Web developer Resources | Laurence Svekis | Skillshare
Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
7 Lessons (38m)
    • 1. Section2

      2:15
    • 2. 7 How to use Atom web editor

      7:50
    • 3. 8 Brackets web editor

      2:57
    • 4. 9 Advanced webdev options mysql database and php code

      4:35
    • 5. 10 Get online web hosting FTP

      9:25
    • 6. 11 setting up a domain name

      6:43
    • 7. 12 Resources for Web developers

      3:45

About This Class

Atom.io Brackets.io free open source editors how to create a website and get started with hosting

Transcripts

1. Section2: This next set of lessons is diet designed around Web developer resources. So when we will be looking at, in particular several different Web editors, there's one called adam dot io, which we'll be featuring. And we're gonna be talking about how to get that set up on your computer and get running with Adam. I'll we're also gonna be comparing it briefly to brackets I owe. So both of these are free open source editors that are not commonly being used by Web developers, and I thought I would take this opportunity to highlight those and tell you a little bit more about it. So, of course, if you already comfortable with a Web editor, it might just be good. Teoh have overview highlight information about that. These are available. We're also gonna be talking about how to display your code. So oftentimes, if you're developing a website, you wanna have a local version that you can work with and you can develop it. So if you're using server side scripting, especially if you're using PHP. And if you're looking for my sequel database, we're gonna talk about how to set that up on your local machine using an application called Zampa. Also within the course, we're gonna be discussing how to get hosting and how FTP works and highlighting some of the more popular FTP applications that are available there. So this is a course essentially designed to help you get started online quickly and find out some more about resources that are available to you in order to get your website up and running. We're also gonna be looking at domain names now. Domain names are essential when you're setting up your website. Having a good domain name is really important. And we're gonna be going over how you can pick a domain name and how they work, how it gets set up. Also talking about some of the more popular Web developer resources out there, Probably a lot of them you've already heard about. But there's a few that were gonna be highlighting within this course just as an overview toe help you out and let you learn more about web development. This course is set up basically to teach you more about web development and to answer some of the questions you may have about tying it all together 2. 7 How to use Atom web editor: in this lesson, we're going to be looking at Adam. I'll and this could be example of one of the free Web editors that you can download on your system and you can get started with to create and start writing some Web code. So within Adam, we're gonna look at the different settings of Adam, how you can change themes, editor options, adding and opening files. Also some of the packages and how to install more packages and as well as update and change themes. Now there's quite a lot of power behind these editors, and really, this is just gonna be a basic overview of some of the basics of getting started with Adam and setting it up and actually could figuring it so that it looks and acts the way that you prefer it to. So let's go over to the website The atom website So website is again adam dot io, and it's again open source editor. Depending on your system, you can try it for different platforms and so on those options for other platforms. And as you can see, there's a number of different options for windows for Max and so on. So we've got a M D chips and ah, and so on. So a lot of options to install Adam across different platforms. And as you can see, there's a lot of updates. Toe Adama's well, so there's constantly getting updated again. I'm on a windows machine, so downloading windows version and once you download it, you're going to get presented with this install Welcome guide. So this is the basics of Adam. Once you've installed it, this is what you get. And you've got the welcome guide, which is a great place to get started. And it can really, literally just walk you through the settings so we can do things like we can open up a project. So this is for if we already have on open project, we can install a package so we can open up the installer. We could choose a theme. We can customize styling, but what I'm gonna do is you're welcome to go through the welcome guide, which is a great place to get started with with Adam. Or we could just go down to under file settings, open up settings here, and this is where you're also presented with a lot of options. for Adam. And as mentioned, this provides you everything you need to know in order to get started with Adam so able to restore previous Windows on Start Open Editor open empty editor on starts that you've got some options there also different audio and core settings so automatically update and so on . So when it comes to themes, themes are what allow you to look at like a light theme s. So this is an example of the light theme. You can change the syntax toe Adam dark, so that makes sense that you've got in dark syntax and ah, light background. So again, there's a number of different options. You can also edit the styling for it and as well, you can download and install additional themes. So these air the themes that come by default within Adam. You also have under the editor, you've got a number of settings here, and a lot of these are very useful. So auto in denting when you paste it. You can even change the font size, which is a great option here so you can change the font size of your text. So if I go ahead and if I create and you file. I can see that my foot size is now that 36 pixels. There's also a number of other options here. One of them is the line numbers. So line numbers, I find it very useful. But if you don't like them, you could always uncheck that. And you can see what it looks like without the line numbers. There's also the soft tabs. There s a number of different options here. Zoom fought when control scrolling so they could see the different font sizes. Just allows you to use the control and scroll with your mouse to increase and decrease the default font size. And, as you can see, scroll sensitivity and just a bunch of stuff here. Now the font size is 49. So going to reset it back to 36 so on. So also, I can set up projects. I can open folders. I could open files, I can create projects. So add Project folder. It means you browse over to the project. And if you want to have this as the project folder, you automatically get menu over here. And these are the files that are available within the folder, and if you're working on them, you could click those and open those up. It was a good idea for every website you're developing. To call it a separate project avoids a lot of confusion with the files, cause a lot of times your files will meeting the same s. You have index files and so on. And besides that, it's just also a way to organize all of the content per project. So projects are great way Teoh. Really keep your work organized and be able to access it really quickly. Eso There's also a lot some shortcuts here within within Adam. So if you want to set up a basic HTML file so you could do something where you've got HTML and then press so typing in HTML. So actually, I had to create a file First creative test html. So now you type in HTML and press tab and their eagle, you get a default html template, all ready to go. So some really cool shortcuts and code snippets that allow you to save some time when you're doing your Web development. And, of course, there's a whole lot mawr two brackets Utkan. Look at all the different packages, you can go again. Open up settings. If you want to install different packages, you can check and search out packages. So if you want HTML packages, you can see there's an auto complete here, so this one's already installed. You can disable it. HTML Support and Adam again. You've got some options on the settings. So just like if you've worked with WordPress or any other way, you can see that you can search the packages or if you want to. You could also go over to adam dot io and go to packages, and you can see all the different featured packages and popular packages. And these packages just allow, as it says, Adam, to do some really amazing things. So definitely worth while once you start creating your website content, if you want to save a little bit of time, take a look at the packages. There's always a good idea toe have within your A pack within your editor in order to make it easier to create your Web projects in your Web code. So the next lesson we're gonna briefly look back again at some of the other editors that we've talked about, and we're also going to start looking at just different tools and resources in order to start creating your websites and your Web projects, some different tools and resources that will make it a whole lot easier to get started with Web development. So all of this is coming up. 3. 8 Brackets web editor: when it comes to Web editors. As we saw in the past few lessons, there's a lot of options. And in the last lesson, we looked at adam dot io. So we featured some of the options for using adam dot io. There's another really popular one as well, and that's brackets io. So that's another one. It's a lot similar Teoh what Adam provides. And again, this is again by personal preference. So this is my version of brackets that I have. It doesn't quite come with as many default packages, and it does have the ability to do packages. S You've got extension manager, and you can do kind of the same thing that we showed you within Adam, where you've got ability to do themes you've got the ability to set. I find different available. I work extensions as they call them here. So I was going to say packages, but there's also you can see what's installed. There's so the ability to update on it. So again, depending on what your personal preferences, you could choose either one of these as a as a Web editor or try one out, see how it goes. Try another one out. US. Have got some options here for the different themes. The line numbers again for rapping the words. We've got just a lot of different options as well, for adding in packages. Another one that's really important toe have within your editor, and a lot of them already have. This is finding replace. So sometimes you'll find that your typed a bunch of code and you've got a bunch of cold within your Web project, and all of a sudden you need to make some changes to some of the wording. And maybe you've linked out to a company and the company name changes or something like that happens. That's where find and replace becomes a really useful feature, and they all have this it just presented in different ways. So finding, finding and matching and replacing is all part of what Web editors do. And this is why it is also important that you have a pretty good Web editor because you have all of this great functionality, and the really thing about brackets is it gives you this option for running live views of the code. So just by default you have this life preview ability where you can actually see what the court looks like as it gets rendered out. So again, that was another really cool feature of it that you can actually see what it's gonna look like when you're are rendering it out. So this is just example of the website. See, when I typed in Hello, Hello shows up rate within that website, So that's another advantage of brackets. But again, pick the one that you like, try them out both, and let's move on to you the next lesson where we're going to talk of it, some of other tools and resources in order to get started quickly with Web development. 4. 9 Advanced webdev options mysql database and php code: this lesson. We're talk about some war advanced options for Web development. So previously we've talked about developing html CSS JavaScript files, and we saw that all we needed is a browser to render out that code. But the problem is that even though we can navigate to our Web pages, we can just simply click a song as these files are deceived as HTML files. So when I click on it, my browser actually knows what to do, and it opens that file up. But we see that we've still got these really ugly you RL's so we've got file dot dot ford slash k website web dev index dot html, and we even see that with ah brackets here. So we've got the 1 27.0 dot 0.1 and this is just the local Web address, so we still have some fairly ugly. You are else for the Web pages, and we don't have access. If you want to write some server side code, we don't have the ability to actually to render that it on our computer. So if we want to write some PHP code, well, we would need some other applications in order to start rating PHP. And this is where having something that actually simulates a server on our local machine is ideal. And one of the simplest ways Teoh essentially, to get a server up and running on your computer. And actually, I have one running right now, and this is called Zampa. So the applications, called Zampa, works across multiple browsers and essentially gives you an Apache server that can run on your machine. And you can also have options for my sequel. You can ftp to it and so on. But for the most part, if you're looking for just having a Web browser up and running and having your Apache machine up and running, you can simply start that application installed application and then start the Apache server, and you can see here that it's using ports 80 and 443 So 80. If you're familiar with ports, 80 is the default port. Your computer uses toe access Internet and also port for 43 is the secure port. So it's http s support, so basically it gives me the ability to go over to local host and see the output contents instead of having to go to all of this. I can just go over to local host and this gives me the ability toe access the files so the local host becomes the root directory and I can access the files that I've created on that root directory. So I had index and had host our test and is the same thing as seeing it in here, but it gives it a much cleaner. You are l. And also the benefit of it is that I can type PHP code, and I also have access to a database. So I can I start up my sequel database and I can actually go over to that sequel database, and I can see it when I go to local host my PHP. So this is on my sequel database access by PHP application called My PHP Myatt Men, and it gives me the ability to run a data base on my system. We see that the Web server is an Apache Web server. It's running version 5.6, so this is what's installed here. And in order to install this really easy set up, Discover two Apache friends dot org's and download the version for the platform that you're using. So we've got Windows the next and OS sex here in the middle. Just select which one you want to download and you're up and ready to go. And that's with the new version of PHP having SQL and everything ready to go to right server code. And also, even if you're just doing HTML, it's sometimes beneficial that you could just go to a local host, and you can essentially simulate running your code as it would look within your domain. So speaking of domains and websites, in the next lesson, we're gonna look at getting hosting and then how we get those files from our local computer up to our Web host and actually have a website that's going to be accessible through the Internet. So that's coming up in the next lesson. 5. 10 Get online web hosting FTP: the previous lessons we've looked at how we can start creating our Web code, what kind of tools and resources we can utilize in order to create that Web code. And next, we are gonna look at how we can get our files online to a server. So you saw earlier that browsers connect to a server that contains the Web files, and that's how they render out that code. The HTML and the Web files are just a set of instructions on how it should be displayed. So in order to get those files to a server, first of all, we have to get a server on line, and that's where we go to get hosting. And there's a number of resources for hosting. There's a lot of great free hosting as well, and I would actually advise against free hosting. But in this lesson, I'm going to just show you how to set up free hosting. And there are some disadvantages to free hosting, mainly being that if you're doing free hosting well, you don't always have 100% control over your hosting environment. Eso Sometimes if you are starting out hope free hosting is a good idea to just to get the feel of it and practice it. And then you can, of course, upgrade to a paid hosting ah, shared hosting account. A lot of times you can get hosting relatively cheap just for a few dollars a month. But either wait. If you're getting hosting, make sure you register domain and so on. So I'm gonna walk you through how to get free hosting at Web free hosting dot net and how to set up an account there. And then also, we're gonna look at different ftp ways of transferring files to the server from our local machine. So we're gonna be taking a look at three of them. Were popular applications used to accomplish this. So first of all, let's go Teoh Web free hosting dot net. I see they've got a free hosting account here, so they've got the parameters here. Basically, when you're looking to write PHP code, make sure you've got a PHP host sin. Not all of them will allow a sp dot net. So that was the free one doesn't but the basic one does so again, Keep in mind what programming languages you're planning on using and let that be the guide to what your requirements are for hosting. And when you're searching out a hosting account, make sure that you've got all of that availability and also when you've got a basic domain . So make sure you've got ability to set up your own domains because there's definitely nothing worse than setting up, Ah, hosting account and then a domain, and you set it up under somebody else's primary domain, get really successful and then you don't have access to it. So I'm just gonna log into that account that I created with the free hosting their the Web free hosting dot com or dot net. And this is basically what I got from them. Eso They have the ability Teoh to create databases, which is really cool. They've got stats here, registering domains and so on. So you've got a lot of really cool options here. You see, you've got the FTP manager. The first thing that you need to do is get a website so web U R l s o. I just set up one of the free ones here, so you've got the ability here to create a free Earl, so I just create one. Learn to. At web pages dot com, they had a number of options as well for different main domains. So again, really cool option to just get started and try it out. Eso That's what I've done here. So what I did signed up picked a free domain And I've got basically a basic website set up . And now what I want to do is actually get my files that I've created here on the computer. I want to get this up to the Web server. So hello, world. My new website and welcome. So this is my main index page, and I'm just gonna add into this. So now I've created index dot html html page html file and I want to get this website up. Teoh, my Web host going back to what our options are. And one of the common ways to transfer files is using FTP. So that's file transfer protocol. There's a lot of options, pliant software. So this is a Wikipedia article here, and as you can see, a ton of options for different clients, popular clients and so on. So we've got some of the more popular ones like cyber duck file, Zillah and coffee Coffee script, I believe should be somewhere here as well. Eso those are Three of them were popular ones that are used. You've probably also heard of a few of these other ones that we're looking at here. So again, it's again a personal preference. Acute FTP is another popular one, but that's on trial. So these ones here are free and open source s. Oh, go ahead and pick one of those. I've got file zilla on my computer and I believe also have cyber duck. But again, they're gonna work the same way, same format and in order to get the settings So we need a host. We need a user name and a password, and we can just use a default port of 21 for just regular FTP and 22 for secure FTP. So going to your dashboard over here, they've got FTP manager, so I'm just gonna pop over to here. They've got my user name, they've got the path so they've got ability here. Teoh, get some account information, so I could just do my information here. I can see that I've got my host page, so I can I've got actually to here so I can use either one. So this one is actually going to go to the root. So pop that into your host and it's not allowing me copy and paste that through because I believe when I'm copying it, I'm getting a space on top. So let's try this this way. I've got my user name. So again, I got a copy and paste out over going over to here to use her name and then type in the password, and then we could just do the port and just do a quick connect here. So we see here that now I've connected to the server. So on the left hand side is my local computer where I've got my Web de folder. So this is the same one that I've got open over here in brackets Show a sidebar. So I've got a Web de folder. I've got an index file and so on there and just going to refresh that cause I've got the test file there, and then here I've got what's on my server. So it's just now a matter of going to the correct webpage taking that file and transferring it over basically here just asked me if I want to overwrite that file and which I do now I can go back to that website and I can refresh it. And boom, there's our file that we worked on our local computer now sitting online at Learned to at Web pages dot com and says, Easy is that to you create your files on your computer and then simply upload them to your Web server and you'll find that with some editors were ableto have FTP programs built right in. So Dreamweaver is one of them. Eso dreamweaver It's a lot easier to transfer files can do it right within the editor Goto files and upload it. So again, there's always dIsa disadvantages to some editors advantages to others. And it's again about those personal preferences what you what and how you like to use your Web editors and what features you need within those Web editors and tools. So now that we've shown you how to get files on a server, how you can get hosting, and I did mention that domain names are super important, especially when you're trying to set up a website a Web business and something like learn to dot at Web pages dot com just won't cut it. There's a lot of benefits to doing free hosting like this, where you don't have to pay for a domain name. But at the end of the day, this could be more harm than good, especially if your business takes off and does really well. It's always gonna be a sub domain of at Web pages dot com. You're not gonna have any choice but to use this hosting account because you've got to stay on their in order to keep that domain because you don't actually control the at Web pages dot com domain. It's a lot of disadvantages as well. A search engines. They don't index sub domains as well as they do main domains. So in the next lesson, we're gonna talk about domains and everything you need to know about getting a domain 6. 11 setting up a domain name: in this lesson we're gonna look at do means whiny why we need domain names and briefly, what I p addresses are and how you can actually pick a really good domain name. So its first take a look at what I p addresses are. So essentially, any computer connecting to the Internet needs an I. P address. An I P address is a set of numbers 0 to 255 connected with a dot So we've got a dot between a dot notation between each one's each set of these numbers. Eso kind of like with this example here. So we've got 1 72 16 to 54 1 So basically, that actually translates in to essentially the location of the server. Most recently, we've been upgraded toe I. P. V six, which gives us some even Mawr address options. Teoh find computers on the network. So again, every every computer that's accessing the Internet has an I. P. Address. You can look up your I p address through a number of different sources online, where you could just simply check your current I p address. So this is the way that a web, a website or a browser can actually find the domain. So basically, if you put a domain name in, then it goes over to domain name server, and the DNS is the one that actually translates that I p address into the domain name. So it's something where we're entering a domain name. This gives us the ability Teoh. Translate that domain names such as domaine dot com and connected to the I P address, allowing our Web browser to be able to return back the correct files from the correct server and render those out for the user. So essentially, that's the basics of an I. P address, and I p addresses. Every server needs one. And this is you as well. For every website and what every Web host and so on comes to domain names. Chances are most of the domain names that you might be looking for are probably already taken. So here I'm just gonna search for learning education dot com. So if I want to come in and register brand new domain name, I looked up and I thought learning education dot com would be perfect for the new website that I'm creating. I can do a quick search of it and only to find out that somebody already has it registered and it's already taken. And unfortunately, I'm not able to register because everyone's always Onley able to register that one name. And we can see here that there's a bunch of Webb's domain ideas that are being sold right now. So if I was looking for learning dash education dot com says the premium domain, it's somebody is selling it. This is the price they've listed in that, and it gives us a bunch of options here. But if we don't want to pay for it, we've got some new domain names s a new extensions. So these are the top level domain name Seacon do Learning education, dot design, learning education, dot news and so on. So this always isn't the best case, because most Web users that are coming in are going to be expecting dot com or one of the familiar extensions. So the idea here is to find something that's a dot com and try to register it and try to find some kind of name combination that is still available and for a relatively good price and something that you can that you can work with and start as your own domain name and create a place on and on Internet for your website files. So again, it does take a little bit of research. And using sites like domaine dot com with the suggestion of domain ideas is a great place to start because it gives you different combinations of domain names. Eso if I wanted to go to something like learning education. 2017 of course, is longer, but luckily it's still available. So if this is the domain name that I wanted, I can register it here, or I can go over to register a domain, and I can type in and check to see if it's available. So all the Web hosts that have domains are gonna have this check to see. It's available because, of course, you can only register that one domain name. Once it's gone. Nobody else can take it. It locks up for a minimum of a year when you're buying a domain name, and then, if you do want open it up, you can you can open it up, you can sell it, or you don't have to renew eso here. It's got the terms. You can root. You can register it for up to 10 years, and then it's got the fees for registering it for 10 years and so on. So once you pick your domain name and do take some time on this because this is going to be really important, it's essentially your identity online. So really think it through and make sure that the domain names that you are picking are relevant to the content that's going to be on your website. There is some indication that search engines do pay attention to those domain names they used. Teoh pay a lot more attention to the domain names, but apparently not as much. But either way, it's a good way to provide Ah, useful domain name that your users can remember. They can type it in, and they can associate it with the content you're creating online. So that's how you set up a domain name. And again, a domain name is essential. If you're launching your own Web business, don't do a sub domain. Don't do it on anybody else's domain. Make sure that you go take that extra step and that you do register a domain name for yourself. So do take some time on that. In the next lesson, we're gonna look at some of the more interesting communities that are out there in order to find out more resources and learn about Web development. And there's a lot of Web developers online, a lot of active communities and a lot of great places to go. Teoh, just discuss Web development and find out more about it, so we're gonna feature some of those in the upcoming lesson. 7. 12 Resources for Web developers: when you're getting started out online as a Web developer, there are a lot of resources on line, and there really are just endless amounts of information that you can explore through. And you could literally spend hours upon our days upon days looking through all of this information. So in this lesson, I wanted to highlight some of the primary communities that I find that provide the most value. And when you're starting out as a Web developer now, the primary one that everybody goes to every Web developer interacts with is stock over full. If you're not familiar with stock overflow, get familiar with hot stock overflow. It's the police on line that 6.7 million programmers go to to discuss Web development. So you've got a number of different topics and pretty much anything you can think of, any questions that you may have as more than likely already been asked if it hasn't been asked, you can go ahead and ask those questions. There's every type of language here, every type of concept and so on. So this is if the primary resource for any Web developer when they're creating content online as a reference point to find out more about Web development. Another really great resource is the Warrior Forum. Now the Warrior Forum isn't 100% pro HKUST on Web developers, but there's a lot of Web marketing and peripheral information in accordance to development . So we do have programming. We do have Web design in Warrior Forum, but there's a lot of other really useful cool stuff. There's a lot of applications. There's a lot of tips and just how to make money online and just a lot of really cool stuff . Search engine optimization. And that, of course, is optimizing your content in order to show up better within search engine rankings. And therefore you get more traffic. The higher up you are in search engines because you'll find that most your traffic is actually coming from search engines within your Web space. So this is a really great resource, and you should get familiar with all of these different topics. As you create websites, start to understand s CEO search engine optimization as well as a different ways to grow your Web presence. And then lastly, of course, there's a lot of different. There's a lot of different boards that you can go to a lot of different forums. Eso There's one called Web Master forums, which is pretty good. It's got a lot of good resources and information at tour it tutorials, guides and so on. There's another really great resource that you can access. And, of course, amongst the thousands and millions of other resources that are online, I would find that these three are probably some of the best ones on stock overflow for sure , 100% sign up for Stack Overflow because there's a ton of great information on here. And of course, there's a lot of other really great communities in order to learn more about HTML, JavaScript and CSS. And in the next lesson where to talk more about the foundations of the Web. And I know we've briefly touched over how to create websites. So we're gonna get Maurin depth with HTML, CSS and JavaScript, and we're also gonna talk about content systems such as WordPress and Google sites. So that's all coming up in the next lesson