Get Results - Core Principles of Web Development Tricks Tips | Laurence Svekis | Skillshare

Get Results - Core Principles of Web Development Tricks Tips

Laurence Svekis, Web technology Instructor

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
22 Lessons (1h 8m)
    • 1. Foundations for web Development

      2:40
    • 2. web develpment tools editors

      3:21
    • 3. setup your editor

      3:07
    • 4. Sublime Text

      4:02
    • 5. Sublime Package control installation

      3:58
    • 6. Basic Web editors for windows

      3:50
    • 7. Popular common editors

      6:49
    • 8. Next Generation Code editor

      2:42
    • 9. A modern open source editor Brackets

      4:33
    • 10. The editor we've always wanted

      3:49
    • 11. Tool for increased workflow for any text editor

      2:45
    • 12. command line interfaces

      2:13
    • 13. Browser Addon for increased workflow for web developers

      3:10
    • 14. Boilerplate for mobile ready websites start quickly

      2:29
    • 15. How to Manage your websites Locally

      3:29
    • 16. Virtual Machines Virtual environments

      2:07
    • 17. Create and configure lightweight reproducible and portable environments

      1:47
    • 18. Mobile device emulators

      1:12
    • 19. code management Git setup options

      3:17
    • 20. FTP file transfer to your server

      2:07
    • 21. Working with FTP for web development

      2:39
    • 22. Workflow conclusion

      1:33

About This Class

Get Results - Core Principles of Web Development Tricks Tips
Technology is ALWAYS changing we help you stay on top of future trends and techniques in web development

Improve your workflow, pick an editor, create a local machine ready to upload to your server. Setup a professional web development environment being able to focus on code.

Setting up a solid work environment leads to better productivity and less frustration with the web development process.

There are a lot of resources out there, and many ways to accomplish getting your code on your web server. But often times developers get overloaded with all of these resources and don't have the time to work through them or to experiment with different ways to do things.

Time consuming setups, that don't work are a real frustration.

We have regular planned updates to this course to feature new techniques and technology as it becomes available. Evolving curriculum will help students of this course stay connected to new and future technology changes.

In this course we will be reviewing many of the popular code editors. An editor lets you write and edit various types of code. Code editors are designed to help you code better, faster and more efficiently. Picking the right editor helps you work better. We will also be going over basic setup of editors and how to customize them.

The build process, we will also be looking at your local environment and how to get the best setup to be able to test out code locally before pushing it live. Setting up a local web development environment allows you to create and modify web applications on your own computer rather than uploading the application files to a server to run the files. Additionally we will go over some great resources that will help you work more effectively.

The last stage to the development process after writing the code and testing, will be to transfer the files to your server. If you are working within a collaborative environment, using versioning there are some great resources to help. Transferring files to your server in addition to code management techniques will be discussed.

step-by-step details on setting up these resources will be covered within this course.

If you are new to web development and need an overview of how it all works together, or if you are a web developer looking to increase your productivity, this course can help.

Having a proper web development environment will help you be more productive, improve your web development workflow and avoid issues on live servers.

In this course we review several of the most popular web editors. Having a good editor is essential for being able to code. Its the foundation for your coding is your web editor and it all starts with that. You should be able to focus on your code and not the software that you are using.

Once you have your editor you should be able to code and preview your code easily. Setting up a local machine server can help you test, preview and check your code. Use tools such as browser extensions, addons and consoles to improve your web code. Not having to really on a live server to view your code means no internet connection required, and you can work out all the bugs before you push to your production server.

Getting you code from your machine you work on, onto your server. Using FTP which software is most popular, as well as using code management solutions to collaborate on coding.

This is a course that focuses on the foundations of being more productive with web coding. Whichever coding language you use, this course is a great addition and full of excellent resources to improve your workflow. New resources will be added regularly in addition to tips and ideas for better working environments.

A strong foundation in web standards and website technology can help developers and designers make choices that lead to more robust, efficient, and maintainable websites.

Transcripts

1. Foundations for web Development: in this course, we're gonna be talking about the fundamentals of Web development. So one of the main questions that always comes up is what software do I use? How do I set up my system so I can quickly and easily begin to program? This, in fact, is one of the main first that new developers and existing developers have is when they're setting up a new environment. They have a bunch of different software to use, and they're unsure about how to set up their system properly. This course, we're gonna be reviewing several different types of editors well, as looking out different ways to set up your system so that it runs server a local host. But you can right away see the changes that you make within your editor live within the website also could be looking at ways to upload that content right to your server. Everything from get to FTP. All this will give you a full overview of the different options that you have when you are setting up your web development environment and setting up your foundation to begin coding , we're not going to be focusing as much on the code as we are about the environment that you're going to be working with them. She can see here we flip through a bunch of different editors all going over to the same HTML 555 You're the ones that we're looking at are going to be free and open source. And then we're also going to look at Dreamweaver as well fairly quickly, because it is one of my favorite editors have been using for a lot of years, and I'm very familiar with that as well. But yeah, you don't necessarily need to purchase Dreamweaver or you don't need to purchase an editor because there's a lot of really good open source ones that do the job. Justus Well or even better than Dreamweaver, also gonna put ride links within the resources to download and to be able to access all of these great resources in order to step up your Web development environment, working predominantly on a Windows based system. But a lot of the websites and the links can also work within knock environment. Software will work across platform across both both environments up this course as a great place to begin, as well as to increase your knowledge of Web development and how to go about setting up your system so that you can get ready to code quickly and easily on your own courting system. 2. web develpment tools editors: One of the biggest questions that I often get asked is, when people are getting started with Web development is what text editor, what editor are you using? So the whole bunch of choices online and any Google search will return a ton of different options. If you're using a Windows machine, you can use something simple, like note pad or download note pad plus, which gives you a little bit more options when you are developing as well as you can purchase something like Dreamweaver, which gives you a whole bunch more options, life previews as well as integration with local host, and you've got a whole bunch of open source options as well. So Dreamweaver will work across platforms. Something like Adam will also work across platforms. We've got brackets, which also is on Dolby product, another open source product. Eso. There's no cost for any of these. The only one that there is a cost for so far is Dreamweaver. Another one that we're gonna be looking at is sublime. Eso. There is technically a cost to that when you do upgrade it to the full version. Um, it's about $70 but they do have unlimited use of the unregistered version so you can indefinitely keep using the unregistered version. Andi. I believe there's probably over 2.5 million developers that are currently using sublime, and it is definitely one of the favorites and most talked about editors. Four Web development gonna be looking at all these different editors within this upcoming videos, and we're just gonna be discussing what's the best way to get started and how to get coding quickest and easiest and to set up your local environment. Sorry, able to get coding and focus more on the courting end of it than worrying about the set up and how you're going to set your system up to be able to coat my personal recommendations if you do have the money to spend to get Dreamweaver. I've been using Dreamweaver for 15 years now, and I do find it is one of my favorite ones to use. If I'm not using Dreamweaver, I'm using sublime. But recently there have spent a whole bunch of these new ones that have come out. Ah, and they are open source, so there's a whole bunch of options. If you are looking for some open source options for courting on across different platforms . So all of these will work across so Windows, machines that work on Macs and the work on Lenox devices. So we're gonna be giving you a high level overview of each one of these. These options and these choices toe help. You better make a choice to start coding within one of these editors and get you up and running the quickest. Also in this course, we're attaching a resource file that's gonna have download links and links to all of these different resources so you can download them on your own system and try them out and see if they if it is something that you want to work with. 3. setup your editor: when you're gonna be creating websites, your code editor is your most important main development tool. You can use it to write code, save lines of code, and once you become familiar with it, you can use the different shortcuts and installed plug ins in order to be able to code faster and more efficiently. So picking a Web editor and setting up your Web editor is going to be extremely important to your development process and your editor is your first step in your environment set up for Web development. I'm just flipping through a bunch of different editors that we're gonna be using within this course and we're gonna be talking about, and we're going to provide more details on this in upcoming videos. The things to look for when you are picking an editor is make sure that your editor allows you to customize shortcuts and has a lot of different plug ins that are going to allow you to write the code. Better make use of the package managers within the editors, get easier to discover, install an update plug ins. So right now, I'm just looking at sublime, and it's got a whole bunch of different packages that are available within it when you are looking for different editors. One thing to do is to compare different packages and plug ins. The plug ins are helpful to in order to become more productive during your development stages and as well as packages that are easy to install, discover and update. Once again, installing packages and plug ins helps you become more productive for your development environment within sublime you press control shift and P to open up. Your manager here says if you're looking for trending packages, you can go to package control dot io. You can see trending packages. So these are some of the more popular one side, these air trending ones. One of the more popular ones for sublime is Emmett S. O. M. It is over here, and it's essential tool kit for Web developers and M, it is another one of those plug ins. Four text for a lot of many of the text popular text editors that greatly improves html CSS workflow. But to download em it, you can see that we've got sublime text there, Adam there and bunch of more popular text editors. No pad plus is there, we'll be talking about brackets as well and Dreamweaver. So this is where you can get packages. One of more popular packages. Cola's I hear you get a good listing of a lot of different text editors that you're able to check out. 4. Sublime Text: most popular text editors out there and preferred by most developers is called sublime. Text of Lime. Text can be downloaded from sublime text dot com, although you can use it without without cost, it will ask you to download and P for the the license, which is $70 so you can keep continuously using it within the free mode. See here, up here at the top. It just tells me that I'm using an unregistered version, and I occasionally yield, will see the pop up will asking you, Teoh, It's the license, but you are able to evaluate it as long as you like to eso the license, and it is a full working version as well. One of the advantages of sublime are that it's been around for a while since 2000 and eight . It's got 2.5 1,000,000 users, and it's ah, very versatile as well as its stable. There's a lot of different themes, and you could do a lot of extensive customization to it, to customize it and get it looking and working the way you need it to work. And it's got a very powerful command palette where you can quickly and easily. It's a bunch of different features on it. You can also customize the view toe, have multiple columns, three different cuff off four different columns as well as hiding in different rows. So this gives you ability to work on several files at one point where you can compare files within the same folder area. So if you are looking for something that find is very powerful, there's also go to anything, are able to go to quickly navigate and locate files and cord within your folder area. We're able to save projects that you're working on and then open up projects as well. And you can also switch projects within the window and check in recent projects. Open projects and remove folders from projects were also able. Teoh. Open up new files as well as see open up recent files that you've just worked on. There's a lot of shortcuts, quick shortcuts that you can use to go to different features within the menu here, so you can see here whatever the command is, you see on the right hand side, all the different shortcut key code shortcuts that you can use to access all of these different commands. This is why sublime is preferred by a lot of developers, and here they do list out some of the main features for sublime. They've got to go to anything. The command palette split, editing instant projects, which multiple selections distraction free mode, plug in a P I as well as it works across platforms. So it works on OS X windows Linux, and you can check out more information on sublime at their website. So it's once again sublime tex dot com. We're also going to give you the download link within the resources of this course. 5. Sublime Package control installation: when you want to install when you want, Install packages on sublime. You could press control shift P and this opens up the package installer and you've got an option here to install package advanced install package. Now, if you've just installed sublime, you might not have these options. Eso You do have to go over to the site in order to download the package control installer eso here. You could go over to package control dot io four slash installation and this allows you to install additional packages into sublime. Once this is set up so you can go to preferences, Browse packages menu and you put a browse up a folder and then go to installed Packages folder. You can also download the packages control sub line package and copy it into your installed packages directory picking on a Windows machine. And I've got my APP data roaming sublime text and installed packages. And this is where I copy over this folder in order to be able to access all the different packages and add additional packages into supplying, so you do have to set this up first most of the time in order to be able to install additional packages into sublime run through quickly how to set up one of more popular packages. So if you're working with HTML CSS JavaScript and you want to have a pretty layout beautify of your code, this is a really good package that goes into sublime and over here tells you how to select and install that. So right now I'm gonna open up sublime are gonna press shift control shift P or command shift p for Lennox and OS X that I'm gonna just type in install. And so this is install manager that we just set up and copied over. And now I can just do install package so I can simply click that Select that, and I'm gonna type in prettify s. So this is the one that we were just looking at, and it's is easily is just simply clicking and doing the installation. Eso That's how you install packages into sublime really use it to do. And now I'm gonna have an option. Teoh prettify my html CSS and the package has been set up. I can see it over here on tools that I'm able to prettify my code and then I've got some options here as well. So I also have two, apparently install No. Would gs went to the website no Js dot org's download And this is the location that after install node Js on. So I'm just going to do the installation here. So now that Node Js has been installed on my system and I'm using a window system, so I just edited at the location. So I'm using program files. This is where no one got installed. So you just got to make sure that you are using the right file path here, and once you do have that set up, then you can click, and you can quickly and easily prettify your code. Beautify it. Um and that's html JavaScript and CSS. So this makes the code a lot more readable and friendly to other users that might want to look at the coat and this one here on the right hand side in this tab. This is the html prettify dot sublime settings. Eso here, you're able to configure that that ad in that we just set up 6. Basic Web editors for windows: when you're going to write HTML code Would JavaScript or CSS? You do have a few options, right? Native on your system, you can use a note pad or you could do unload note pad plus in order to write the coding. As you can see here, I've got a note pad open, and this is no pad plus, which is also a free, open source version of note pad, and it's slightly more advanced than the standard note pad, as you can see here when I've got the same HTML file opened. I do have a little bit of styling and different colors here that I'm able to see the different types of coating that I have here so text as opposed to the actual tagging. And this will work just as well as any other text editor where you're able to edit the different content within the HTML five into HTML file. Then save that and run that service right on your local system. General, you should be able Teoh, open up. Go to the file location, open up the file and even on a local system without having a server running, you should be able to open up here. HTML files CSS files JavaScript files that will run directly within any browser that you have installed on your system. Eso It does have a little bit of understanding of the different languages that I'm using. So here I'm using PHP could see that kind agrees that with the text here a little bit. So there are some options here for different languages, as well as being able to customize the way that you're set up. Looks in no pad plus. But overall, it's a fairly basic. You do have your options here to launch in Firefox and IE and Chrome. They go to run an HTML file. I'm just gonna run that in Firefox, and you can see that it does open up here. I displayed exactly how the code is needs to be for my code that I've entered in for this file to a view source, you can see here the code and then the code that's being output. Eso for David had out it in box there or for I Freeman had added in that box. And when I refresh it, that should be gone so you can very easily work with note pad If you want to quote with, that s so it is fairly limited with its options, as some of the other text editors are quite a bit more advanced, a swell as they have package options and also able to customize it a lot more and to run different code. But getting started note pad will work just as just as well. Most developers, by default, will have some more basic type of editing software, such as note pad. In order to copy out code, remove hidden styling where you can caught kind of copy it in and copy it back out as regular text. Eso I fairly regularly do. Use note pad. When I am doing some text editing eso that I know it makes getting exactly the text that I'm looking for and there's no hidden code or accuse that's gonna affect my coding. What I'm copying, pasting it in. So this would be one of the most basic options for starting to code. Note pad plus link address for that is just note pad, dash plus dash plus stock or s open source works across platforms, and it's very easy to kind of open up and get started with 7. Popular common editors: one of the text editors that have been using, probably for the longest time is Adobe Dreamweaver. This one's been around for a while. I've personally been using it for almost 15 years now since 4000 and one and a lot of the interface. Actually, it looks kind of the same. They're obviously have been some updates on it, but it is very familiar looking. If you are looking at earlier versions of Dreamweaver, so it's a good thing and they do keep it updated. And whenever they do do some coding upgrades to at different version updates, they are fairly good and easily to kind of build into with what you're using at the current time. Eso There is a cost to dreamweaver eso if you just buy the app itself. Dreamweaver Sisi is currently $20 a month. You can also get Creative Cloud, which gives you access to the whole suite of Adobe products, and I believe that's starting at $49 a month. There's also some additional options here if your student teacher and you've got somebody options there to purchase it. Good thing about Dreamweaver is it's built for responsive design eso design developed responsive sites from scratch. It's got built in templates here, but a preview it in real time as well as its Got the photo shop option where you can bring in the photo shopped files and get styling cues from that similar to brackets brackets also developed by Adobe. This is an open source. Text Editor s Oh, this is got some of the same features as Dreamweaver, but it looks a lot different and it doesn't have all the same options as Dreamweaver does. Eso dreamweaver if you are willing to pay for it, it is really good choice for a Web development editor. It's got, um, option here for quick coding as well as one of my favorite features is the life preview. As you can see here, this is my dream Weaver. I've got this open to a PHP file, and when I go to the PHP file, I've got it on split view right now. I can see that I'm echoing out this text and it is actually showing up on my local local host index dot PHP essences. I do have a map server running eso This allows me to run PHP code, and I'm able to see it live within my Dreamweaver interface. Eso obviously HTML and javascript it will work with its built in kind of browser here were able to split the screen right here code and it previews live. So you don't actually need a vamp server or any other servers running on your system for just plain HTML CSS and JavaScript Eso The life preview there is very helpful because you're able to see live exactly when you make changes. You're able to see exactly what it's gonna look like once it's out on the site. So once that gets saved and flip back and forth, just do a refresh there, and we could see that the changes are taking place. The same thing with the PHP. I'm able to save that. Refresh that, and I can see that it is. It is adding in the court in my life preview. If you're looking to just do coding, you can switch the screen to code or if you want to work with the design view, you can work with the design view this way as well. Switch this to design view so that gets rid of the code, and this way you can work with it without even having to look at the court. And when I've save it, I go back to the code. I can see that the HTML code is writing in there as I was working within the design helpful feature. When you're just starting out and you want to see what the code is actually going to do, you're able to do the split screen and see a live version of the code that's being output s a whole bunch of options here as well. Just like the other editors, you've got the keyboard shortcuts on the right hand side, as well as the options here on the left and what they do. Eso You can open up different projects, different folders and setting up sites is a little bit different, cause you just do, ah, new site, then go to Or you could go to manage sites to look at your current sites that are available . You've got some options here under commands, were able to ply the source formatting cleanup. Html clean up word. HTML. So a lot of times when you're importing text or code html code from word it's gonna add in a whole bunch of additional CSS s. Oh, this is a quick way to remove all that CSS. Of course, you've got some formatting options modifying options, insert options. So these are all the different types of quick code snippets that you can insert into your project that you're working on. So an example I'm just gonna do insert and I frame eso there pops in the a frame code for HTML and then I just have to customize the source and and then browse to the file that I wanted to use. And I can simply browse and access the code there. The good thing I like about it is that it is able to error detect as well as its able to see each team l tags that need to be open and closed. Eso if I've got a div here that doesn't have ah closing Div, I'm able to quickly see that as well as I'm able to grab the different code snippets and select out with ones that I want. So I could see where it's opening and where it's closing as well. And with the error checking here, I've got PHP code. So I didn't do my closing. PHP, uh, question Mark bracket eso It was showing that red to indicate that there was an error with the code that it detected right away. So it detects a syntax error, tells me the line that error, and it allows me to have code hinting So if there are any errors, I do see them up here in the top of the menu here as well as I do see it highlighted with whatever line of code isn't isn't working properly. 8. Next Generation Code editor: this video will be looking at light table. So this is the next generation code editor that's available as open source. And it's free on all platforms free and open source on all platforms. This software is the result of a crowd funded Kickstarter campaign that raised over $300,000 in order to develop an open source editor. And as you can see here they were one of the top 10 on Kickstarter highest technology projects. You can see some options here seeing it in action. And these were some of the main features that late table has easily customizable. It's got embed anything. Everything. Anything works the way you want to work beautifully designed, connects you. It's gonna open up my copy of it s Oh, this is light table. So I do have a few files in there, and as you can see, it does, uh, tab over the different files as you open them up. But I usually do. It is I set up my files within a folder, and that's how I set up different projects that I'm working on per folder and got all the different files in there, and from there I can navigate through and select whatever files I'm looking at, so I'm able to see files, say, files, eyes. There's some options here for editing. It's a fairly basic options as well as you're able to change your view options here. So the good thing about light table is it's very minimalist s so you can get right to your coding. You can see you don't have as many options as the other text editors have, but it does do the job very well, and it does have really good options as well. Within it did selection of themes. So if you do want to change around your themes, you can do that as well, fairly easily. So this one's like Table still is in its early phase of development, and it might not have all the different options that other contenders do for text editors. But it is a very good one to get up and running fairly quickly, and it's late. Wait so you're able to install it easily on your system and get going and writing code 9. A modern open source editor Brackets: another editor that's so open. Source. Text editor for Web design. It's called brackets, so this one is designed and brought to us by Adobe. And once again it is free and open source and available on all platforms. So that includes Max Windows and Lennox eso brackets. It's designed by Adobe. It's created for Web developers and has written in HTML CSS and JavaScript using code mirror in a node Js container. Eso also some of the great features about using brackets. You've got an option here for code hints from a PSD file. So PSD file is a photo shop file. If you've got an image and you're trying to get out the colors, the CSS, the different fonts that are being used, you can get all of this out Using the code hints from a PSD file within brackets yourselves have got an option for in line editors. Eso you've got instead of jumping between tabs brackets lets you open a window into the cold. You are about you care about most. It's also got a life preview, so real time connection to your browser make changes in CSS and HTML, and then you're able to see that within your browser, and it's got a whole bunch of great options here, so it's going to open up my copy of it. And so this is brackets by default and only has the one window. But you can also add in split windows vertically split when those horizontally. It's got some really great options here for the life preview. And then it's got here, where you're able to quickly and easily add themes and check what's available. So it just kind of going through what extensions are available. And I can install any one of these extensions simply by hitting. Install eso. If I'm working on PHP projects, there's a syntax into for PHP html format as well as a whole bunch of different. There's some CSS Js and different language winters. There's also an option for themes, so you can change around the different themes eso if you want it to look like slightly different by default, it's gonna light and dark theme so you can change those around, and then you can also see what you've got installed. So here you can change the different themes. I can change it too dark, and I can change it back to light. I'm also able to open up within entire folders, so work with pride with files as in within a project I'm able to use. Keep keyboard shortcuts. Do you quickly and easily do editing as well as find. The find is fairly powerful, a swell where, if you're looking for a particular syntax within your files, were able to find it that way. Ah, the view. You're able to increase decrease font sizes as well as split. You can navigate quickly through your content. There's also a debug mode, which is really a great feature. Within brackets. You can change different languages well documented. Open a P I plug ins for developers. These are just some of the different plug ins that are available for brackets, and there's constantly development on it, so you can check for updates as well as if you've got a creative cloud account. You can sign into your creative cloud and use it that way between different software from Adobe that you might have blood agreed Options for this free and open source. Text Editor 10. The editor we've always wanted: Another text editor that we're looking at is text editor. It's called Adam So Adam, the text editor from Get Hub. And it's an open source application developed in node Js coffee script less and C plus plus very similar to the look of sublime as well. One is free and open source on all platforms. So here you can see an open version of it and as we you can see, it is very similar to sublime. This is sublime that I have open here and then I'm gonna flip back to Adam, which has very similar options. So you can select the different pain so you can split them left. You can split them down. You've also got some options for focusing. It's well integrated with git and get hub. But a really well documented A p I for developers where to sublime. You can open up projects you can save as projects as well. You've got the editor shortcuts the keyboard shortcuts similar once again to sublime, where they've got the command on the left hand side and the short cut on the right hand side, as well as on their website. They've got a full listing of packages themes they have over 2000 packages at the moment have a whole bunch of different themes, so they have 659 different themes. It's also well documented. And then there's also discussion blawg as well within the website. It's a lot of good features to this text editor and as well. Once again, it is open source, and it is available on all platforms well as it comes with a lot of great default packages that you can use right off the bat that come already installed with the software. It also has a really good, powerful find option to find and searched through files as well as you can toggle the developer tools, which gives you developer tools on the right hand side. And it does have, of course, node Js integration modular design, and it's full featured right out of the box. Well, you're able to fork it on, get hub, so are able to access the source code and edit the PSAT. This text editor 11. Tool for increased workflow for any text editor: so whatever text editor that you do choose to use, whether it's sublime brackets, adobe or any other one, it is a good idea to download Emmett Eso. It's tool for Web developers. So I'm just going to show you guys how to install that and set that up on sublime s. So we're just gonna pick sublime text editor download. Or we could just go right into sublime, I believe. Actually, if we do press that download link, it's gonna bring us to the git repository, and this will tell us how to do the installation anyway. And it also gives us a little bit more information about what available actions once it's installed on sublime editor, what available actions are going to be available and essentially what? This what this tool will do is going to be able to include prove your work flow when you're working with HTML. JavaScript and CSS go to their main page, emmett dot io. They do a video here that you can watch, and it does include it's a plug in for many popular text editors that improves html CSS workflow, so it allows you to do some faster coding customization of the coding dynamic snip buttons . And then it's available for all these different editors. So here tells you how to set this up within sublime so I can open that up already. Do have it set up within my sublime, but I can press control shift P or command shift p Do install, install, package and type in. Emmett. You can see they're showing up there at the bottom. It's already do have the main one installed. You can do the install of that one as well, and then once you restart it, you're able to have access to Emmett within your sublime environment. And then for additional information on what's now available so adjusted out in the Emmett CSS snippets. And it gives you some options here and tells you a little bit more about what these snippets will do and how they can increase your productivity and workflow within any one of the editors that you're choosing to work with and that you've downloaded it in again. M. It allows you to have a bunch of useful keyboard shortcuts to increase productivity for Web development 12. command line interfaces: So, inevitably, when you're working with your Web development projects, you may have to access the console, and what the consul does is it gives you command line access to your server as well as running scripts and doing functionality. It's one of the consuls that I like to use, especially on Windows. Gives it that Lennox feeling on Windows and, um, is going to be see why g win. You can download it from C y g win dot com, and it allows me to type in some commands within this console. Browse over to where I've got my website content. Eso here I just typed in c d h change directory to where my driver's. I've got all my content there for the websites on H than I did see the Websites. So I changed into the website folder and then I did an LS which list at the files that are available within DOT folder. And then from there, I can add additional functionality if I'm using get hub or any of the additional services that we're gonna be talking about later on. This gives me access to connect to them using this command line interface. Eso Windows does come with one by default. So do Max. Eso you do have won by default a console that you can use. The reason I use this. See why G drive is? I'm able to add additional options when I'm doing the installation of it s so you're gonna have a whole bunch of options that you can check off and identity just additional options and tools into your interface. And the main reason for using the console is, as it's here, its collection of G n. U and open source tools which provide functionality similar to Lennox distribution on Windows. 13. Browser Addon for increased workflow for web developers: So when you're setting up your Web development environment, another useful set of tools tohave our browser extensions. Eso. If you're using Firefox, I've got Firefox open Right now. One of the more popular and best options for Web developers for for using Firefox is firebug, and what this does is it allows you to download and install this browser. Add on and allows you to inspect HTML. Modify style layout in real time. It's the most advanced JavaScript of bugger available for any browser it can accurate. Analyze network uses and performance. It can extend firebug, add features to make firebug even more powerful and get all the information that you need. And when you do add this in within your browser, you're going to see that you do have an auction here in the top right hand side that you can activate it. So I'm just gonna activate firebug and you see when it is activated, I get this consul here at the bottom that's going tell me a little bit more about the code and what's happening within the coat, so I'm able to actually inspect the cord and for their I'm able to actually edit the code that's available and you can see here once I do edit the code within firebug, it also changes the code on the website. Even though this isn't my website, this is Onley within this browser environment that it is changing. But it is. It does give you some pretty powerful tools as well as information. If you've got scripts that are running and if you got some errors in the scripts, you're gonna be able to see that down here in the console area as well. So when you enable it within the consulate, you can see errors, warnings, information, debug information and a whole bunch of options. Here s so this is really powerful when you are working in within Firefox with chrome and other browsers. They also have additionally very good browser add ons that you can add that do very similar things. Chrome has it built in that it's got a very powerful console, that you're able to do the same sort of thing that firebug does when that's installed on Firefox. So always take advantage of your browser add ons that are available within the community and when you want to do look when you want to look for additional add ons. You can quickly and easily search those on the Internet or through the browser itself. Firefox's just You go to the add on manager and about add ons, and from here you're able to see all the different add ons that you have. Edit the different plug ins and search for additional plug ins and add ons that you want to use for your development environment or to increase workflow for Web development. 14. Boilerplate for mobile ready websites start quickly: if you're looking for a boilerplate and to get going really quickly within Web development , they do have a Web starter kit eso. It's get Hub and it's provided from Google, and it's just called Web Starter kit and what it is. It's a boilerplate. So for multi device development, essentially, it's, um, it's got the tools that are ready for building, and it's gonna open that up. Eso When you download it, you get an up here with a bunch of different fonts. You've got some images. You've got a mean script here, so this provides some functionality. Basic functionality. Ah, and then they also do have styling. It's a whole bunch of options here for styling. They have this CSS and S CSS I here. We've got some basic HTML where you can see how that could Page is going to show up. It's Jason formatted, and it comes with the robots text, and you can see here a swell that its analytics ready. And so the format is essentially that. It's got its headers here at the top description. It's got a view port eso it is mobile ready title, and it's got some options here. Meta options. Some mobile Web app capable. Yes, application name, icon. So you can change that to customize that to what you want to look like. It's also got some special apple mobile compatibility. Here s so it does have the different icons for Apple Emma's applications as well. Theme color. So it's got all this had in their information. So it is mobile ready, and it does give you some S E O tips here and then it's formatted essentially with a header . It's got its navigation being content area, and then it's got its JavaScript here at the bottom. So pre formatted boilerplate really easy to use and to get started. And once you download this, then you can work from here and customize out your application, your Web, your Web application from this point, so great boilerplate to get you started quickly and easily 15. How to Manage your websites Locally: So when you are developing websites, it's gonna be important to test a with those sites and check out what it's gonna look like right within riel environment. Eso One of this piece of software that I use regularly is map and map allows you to set up a local local host quickly and easily on your system. Eso I'm predominantly a PHP developer and ah, right on a regular basis, you have to set up your Apache, your my SQL and your PHP. So whenever you're developing a new application, there's quite a lot of configuration. Ah, so ma'am is fairly easy to use. You could download it right onto your system, and then once you do run it, it also works on Mac and Windows, and then once you've downloaded it, it's a simple it's starting your server. And after I downloaded it, this is my copy, Um amp that's currently running on my system. All I had to do was pointed to my document. Root s. So this is where my websites are. And this is where the websites are that I was currently working on just going open up, Dreamweaver. And this is where I do have. I'm using the same folder, so it's H ford slash websites us. This is the route, and these are the ones that I want to use. And this was what's giving me the ability to actually see PHP files actually, within Dreamweaver when I go to the life preview. So generally by default, you're unable to see HTML, CSS and JavaScript because that works through a browser based on any server code. You need to have a local server running on your system or a server running on your system in order to be able to see it. So that's what man does. It gives me the ability to run a local server on my machine, and from there I'm able to run PHP code and other dynamic code as well as it gives me the ability to access a my SQL database. Eso Oftentimes, when you are writing dynamic code, you're going to need to connect to a database and send cold back and forth to a database. So it's really good to have a local database that you can work with us well, to try out and test out all of your different coding. And it's a ZZ as just stopping and starting. And then there's the preference option here that opens up so you're able to start and stop start servers When starting map stop servers. Eso There's start starting stop options. There's some options for ports, so sometimes you do need to have more customized ports. Sir, you should be able to customize them within here. There's pH piece, all the different standard PHP versions. Eso You can upgrade it or downgraded two different versions, depending on what you want to use. There's also some cashing options. Eso, the Web server is where the document root is, and then just some basic information about boat map so really good one toe have on your system if you want to quickly be able to get some dynamic court up and running within your search site. 16. Virtual Machines Virtual environments: so if you need toe, have multiple boxes running on your system. Different environments, different operating systems. A really good open source. Service to download is Virtual box Verbal at virtual box dot org's and what it is. It's extremely powerful system to have a bunch of different virtual machines. Eso You can use operating systems like clinics or sex windows, Windows XP, Solaris, open, Solaris, FreeBSD and a whole bunch of different Lennox flavors to install and to run on virtual box . And once you do have virtual box running, you can set up different virtual machines and set up a whole bunch of different virtual environments. And the best thing about virtual box is that it is open source and it is freely available. It's developed from Sun Oracle. Once you have it installed, you can customize your virtual box as if it was an actual machine server machine, and then you can connect to it locally and run your Web code. Eso There's a number of different other applications that will run alongside with virtual box as a rapper for virtual box, using the virtual box machines and being able to quickly and easily configure machines within virtual box, so definitely something more advanced. But to go over all the different functionality of virtual box, it would take additional course and lessons. This is quite a bit of information, and it is fairly complex in the whole bunch of different options. Eso In this video, we're just talking about a high level overview virtual box, and it is definitely worth checking out. 17. Create and configure lightweight reproducible and portable environments: one of the rockers for Ah virtual box is called Vagrant, and what vagrant does is allows you to configure development environments that are easy to mimic on other machines simply by typing in a few different command lines having the same environment. It will set that up on someone else's machine or another host machine that say exact same environment that you were working with. So this is a main advantage of using vagrant where you can share your environment and make sure that whoever else is setting up the system is able to have the exact same system set up that you did have and that you were doing testing with him. You can also mimic real time server environments and do testing and Web development on those eso you do need tohave the Oracle virtual box installed. And then once you do have that installed, you can download vagrant, which is available at vagrant up, and then do the configuration of it. There's more information on how to configure it. It is an advanced topics, so we're just doing a high level overview of vagrant, and we're going to get more into this in later videos as well, eso from vagrant. You just do a vagrant up and that's how you get started with the vagrant coat eso Once it is configured, all you have to do is go into your command console type vagrant up. If you've got the vagrant files set up within your system files, this is going to just bring up that server environment that was pre configured for that Web application. 18. Mobile device emulators: When working with mobile devices, there are a few really good emulators. Eso, an IOS emulator, is available from X code, and it's everything that you need to create great applications for Mark iPhone. IPod ESO gives you an interface for recording, testing and debugging your applications for Android. There's a really good android studio for Windows. Eso, if you are developing Android applications, gives you access to the android I. D. A s decayed coup tools as well as the the Android five point old platform. And it gives you a complete emulating system of the android operating system that you can use raid on Windows. Eso There's some requirements there. You can install it on Mac OS X as well, and Lennox as well. And there you have the option to download the SDK tools, and there's some studio packages as well. 19. code management Git setup options: with Get Hub. This gives you the ability to collaborate on projects, do code review code management, and I'll do this all within the cloud. You're able to easily connect to this and send up local files right on to get hub and then from get hub, you're able to send it over to your server. Eso. There's a lot of really good options using Get Hub and it is great for collaboration, version control and working with larger sets of code and sharing cold information. Another alternative. A really good alternative to get hub, which allows you to actually have up to five free users on a private repository. Eso forget hub. If you want a private repository, you have to pay for the upgraded plan. Eso You are able to contribute to free, open source public repositories and create public repositories. But when it comes to keeping private ones, another good resource is bit bucket eso bit bucket very similar to get hub works with the same get commands where you're able to send and collaborate on code using it within the cloud. Others are able to review that code and what you're able to work on code within teams. Eso integrations to multiple applications and then send it over back over to the server. It's unlimited private repositories, and you can have up to five different users within your private repositories. And essentially, it's simple and powerful. You can onboard new team members very easily. And if you do need to upgrade, if you need to go over the five users, if you go to 10 users, it's $10 a month, 25 $25 a month and so on. Video is just as a high level overview of what get is and how to use Get if you need to get more information about using, get and accessing, get to your repositories, creating repositories and sharing code. There's a whole bunch of greet tutorials from their website as well as Get Hub has some really good tutorials as well. There's some more information about the features of Get hub here as well, and you're able to see ah little bit of information about how the repositories work. So you find also that a lot of code is shared through get hub and when you are searching for code online, a lot of times repositories will sit within, get hub as well. Also gonna provide links to do Ah, some get within your browser and learn a little bit about get eso It'll take you through how to initialize Get by doing a get i N i t. Than checking your status and using some basic get commands So it provides some links for this in the documentation of this video. 20. FTP file transfer to your server: Now, once your files are ready on your local machine, you're gonna want transfer them onto your Web server. Eso won a few different ways to do that as we outlined earlier. There's the git repositories where you can transfer it onto get hub or bit bucket, and from their transfer that over to your server using the console eso that's a little bit more advanced. Most people do just use an FTP client s o. They developed their code locally and then ftp it over to their Web server eso. This gives them the ability to transfer files from one one device over to another. And that's what FTP is that file transfer protocol. And right now we're just looking at Wikipedia comparison of a whole bunch of different free and open source FTP clients. So some of the more popular file Zillah and Cyber Duck are some of the more popular ones that are being used files. Ill has been around for quite a while since 2000 and one same with cyber duck. There's a whole bunch of options here is well, so depending on what interface you you like, there's, ah really good options for it and generally they're all pretty good and they all pretty much do the same sort of functionality. Eso were just going over to cyber duck and file Zillah s. All you have to do is just go over to the website, download the client onto your system and once it's downloaded, type in your FTP information and connect to your Web server. Eso file zilla cyber duck and provide links within the documentation of this video course. And then here it just got a whole bunch of different options that each one of them does have, but again, very similar and very easy to to use them to set up and get going. 21. Working with FTP for web development: just another quick overview off FTP. If you're working with FTP client like Cyber Duck, it's really easy to make a connection to your server. All you need to do is just open connection, and you need to know your server FTP address. So sometimes it's FTP and your domain name, and other times you can connect through the I P address as well. Eso If you need to have a secure connection to connect to your online server, you might need to change the port. Eso you got to check with your host provider what the's settings air gonna be. And then, of course, here you just enter in your user name and password. Generally anonymous Loggins are not accepted. But if they are, if you are servers configured to accept that, you can also do an anonymous log in. So all you would have to do is just enter in the FTP server, address the port, and then you could hit connect. And then here it's gonna try to do in a connection to that FTP domain, which obviously I'm not gonna be able to connect to because it's not my domain, and I'm doing an anonymous connection But here it just has that information. And you're able to configure the log in eyes needed the user name and password. So make sure you get that from your host provider. If you are using Dreamweaver, one of the main advantages is that does have ftp built right into it. Just go to manage sites. Just open up at it. The site that you're working with go to servers. And here you can add in additional new server eso. I'm gonna have an FTP server. So here I need tender in that FTP address again. Once again, it could be an I P address or your FTP connection for your host provider. So they're all different. You got check with them to find out what it's gonna be FTP address, and then you just need your user name and password, and here you can do a test of the connection. So before you close down this pop up window, you should just test it to make sure that you are able to connect. Save it. If you want to save your password within Dreamweaver and then you're able to you access it this way as well, and then upload it directly. When you go in your dream weaver window here, you can go to remote view and you can see all the files that are available on your server and download them, edit them and upload them back up to your server. That's I working with FTP for Web development. 22. Workflow conclusion: So once you have it, once you have everything set up from your editor your code editor, which is the basic foundation for beginning to code on and then working with how you're going to be sharing your code, how you're gonna be able to increase your productivity and then being able to view it locally, testing at locally working with it locally and then once that's already and set up and configured your local machine is set up and ready to go. Then you're ready to go with uploading it to your server. Get your server information, circular configuration information, whether you're using FTP or get hub. Uh, that's how you're gonna be connecting to your server. Get all of that information set up and working, connecting on your server so that your local machine is the same as your server machine. And then you should be ready to go with coding and improving your workflow as you get more practice working within your environment. But don't forget to check out our resource file that's attached to this course. It's going to provide you with a ton of different links. All the different links that we've talked about within this course eso yet you can also set up your workflow and you're in environment to work more efficiently developing websites