Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Newer Course Available
If you're brand new to web development why not check out our more recent course: How to Become a Web Developer.

Next lesson playing in 5 seconds

Cancel

Tools of the Modern Web Developer

Welcome

04:44
  • Overview
  • Transcript

Are you just getting into web development, or would you like to hone your skills as a web developer? In Tools of the Modern Web Developer, we discuss all the web development tools you need to polish and perfect your abilities.

1.Introduction
1 lesson, 04:44

Free Lesson
1.1
Welcome
04:44

2.Boilerplates and Scaffolding
4 lessons, 1:00:43

Free Lesson
2.1
HTML5 Boilerplate
10:13

2.2
Twitter Bootstrap
09:29

2.3
Foundation
19:41

2.4
Yeoman
21:20

3.Markup Abstraction
2 lessons, 28:06

3.1
Emmet
15:47

3.2
Markdown
12:19

4.CSS Abstraction
3 lessons, 47:51

4.1
Sass + Compass
19:37

4.2
LESS
14:47

4.3
Stylus + Nib
13:27

5.HTML and Javascript Abstraction
2 lessons, 20:37

5.1
Jade
15:16

5.2
Haml
05:21

6.Javascript Preprocessing
1 lesson, 13:22

6.1
Coffeescript
13:22

7.Templating
2 lessons, 28:41

7.1
Mustache
15:17

7.2
Handlebars
13:24

8.Workflow
4 lessons, 44:14

8.1
Mobile Debugging
07:20

8.2
Local Web Servers
10:19

8.3
Autosave
08:38

8.4
Chrome DevTools - Inspect + Debug
17:57

9.Conclusion
1 lesson, 01:25

9.1
Conclusion
01:25


1. Introduction

1.1 Welcome

Hello, everyone. Welcome to a brand new Tuts Plus Premium course on the Tools of the Modern Web Developer. This day it is very exciting to be a web developer, and there are tons of tools out there that can help us code better, spot mistakes and even increase our productivity. This two part screen cast course will help us kind of give an overview through all of these tools. Now before I jump into telling you what I will be covering in part one, let us first cover some of the prerequisites. The very first prerequisite that we have to know is the basic CSS and HTML, and I highly recommend you learn CSS at Tutsplus.com the, by Jeffrey Way. The next one is command line, yes I will be using a lot of command line to install stuff and execute commands. I will be using text editor Sublime Text to code out most of the videos. If you have your own text editor you can go ahead and use it as well. Now there are two package managers that I will be using consistently to install a lot of these tools. The very first one is called RubyGems. If you do not have it in your system, do go ahead and install Ruby and then RubyGems. So now that you have RubyGems in your local machine, do ensure that first you have the Ruby programming language. And secondly after you installed the gem, if you queried gem --version, yup, it should give you a version as well. Next RubyGem, the second package manager is Node Package Manager. Now in order to install Node Package Manager, you can already do so by installing Node. So do ensure you have both Node and NPM in your local machine. Once again if you come back to your command line and query Node --version, it should be installed in your system. And it will be similar to NPM as well. So for all packages and tools, we'll be heavily using NPM and RubyGems. Next, for just a few videos we will be using some kind of version control system especially when we are doing some kind of continuous integration. And also we will be requiring a GitHub account. There is a fantastic Tuts Plus course by Andrew Burgess on Git and GitHub, so do check out this course. Lastly, to include a lot of JavaScript libraries, I will be consistently using cdnjs.com. So here it will come with a lot of URLs that we can access and include in our HTML files and this will directly give us the library. So let's try, for example, very popular library jQuery, so if you search through it and there you go, you have the jQuery library, we will definitely be taking on the latest version. But of course for your own purpose you can go and refer to the older versions as well. Finally, before we start this screen cast course, I encourage you to go ahead and have a brief outlook on what are the tools available. So I have four resources for you to just brush through or even go in depth. One of them is by Rebecca Murphy, an article called A Baseline for Front-End Developers. Second one is a talk on Tooling for the Modern Webapp Developer by Addy Osmani. Do go through the slides as we will be covering many of the tools mentioned here as well. Next is also a talk by Paul Irish where he talks about a lot of tools. And yes, we will be covering many of the tools mentioned here. But it is very good to go through his slides as well as some of the articles I mentioned to have a brief overview of what this course will cover. And lastly, to keep ourself updated, there is also a Google developer show called Breakpoint which happens monthly. Finally coming back to part one where I will go through 20, or rather 18 videos specifically on each tool. I'll start off with the boilerplate and scaffolding tools and these tools will help us get started with any web application. Next group I'll come onto abstraction. For markup, for CSS, HTML, and JavaScript. You will quickly find that using such an abstraction tool will make us code faster. Lastly I'll also go through some templates where we can insert in data, and finally some workflow on how we can basically save our code and view it in a browser in a faster manner. So do get prepared on all the prerequisites, and have a read through of all the reading materials, and I'll see you in the next video.

2. Boilerplates and Scaffolding

2.1 HTML5 Boilerplate

HTML5 Boilerplate is a starter kit for any front-end project. So let's say we have a very simple front-end project. A bunch of HTML files as well as a very simple CSS file. How can we include this starter template which comes with a lot of files into our current set of project? Let's explore that. We will first start with downloading the project right here. So let's open up the zip file, and immediately you will see that it comes with a lot of image files, some markdown files, so that includes some documentation. As well as some files that we can include in our project. The key to tackling HTML5 Boilerplate is to understand each of the components and under each of the file understand each of the parts of the code. So let's do that starting with our HTML file. So currently, I have opened up the HTML file which is really simple. It contains a bunch of header tags, some paragraph tag and a bo, blockquote tag. Next we also have style sheet which is really simple, just the explain class which is under the paragraph. Let's see how we can integrate HTML5 Boilerplate. First, we will tackle index of the HTML. Inside this file, it will already contain a lot of codes. So let's tackle this part by part. Firstly, we will tackle the code that comes before the head tag. This comes with some conditional comments that we can use when coding CSS, especially when targeting older browsers. So that sounds good to me, so why don't we go ahead and copy this into our current project. So I'll replace the DOCTYPE with the code from HTML5 Boilerplate. Next, we have the entire head tag, which I'm gonna copy. And let's paste this inside our current project. All right, so firstly, we, we have to deal with the title. So let's go ahead and copy this here. Next, when we go down, we also see place a favicon and the apple-touch-icons. Now the good thing about HTML5 Boilerplate, guess what? It already comes with these picture files. So I'll just go ahead and transfer them right to our project. So, whenever we have a web application, to make it add to the home screen, these icons can be used. And, of course the favicon is part of this little icon that comes with the browser. Great, so moving on, we also find style sheet, and here we see that two style sheets are linked. One is normalize.css. So, what is normalize.css? It comes with a bunch of styles so that all the elements appear same or consistent across all the browsers. So as indicated in HTML5 Boilerplate, it is good to include it before our own style sheet. So looks like we can go ahead and import the CSS folder. So I'm just gonna go do that. Inside the CSS folder, we also see main.css. Now this comes with HTML5 Boilerplate's own base styles which I highly recommend going through it by reading through the comments. And as we scroll down, we'll come to a section that will say, Author's custom styles. This is exactly where we will include our product specific styles. So I'll just go ahead and refer to my very simple project specific style. I'll copy and paste it right to the main.css. Write something like this. So, looks like we are all set with the CSS, so I'm just gonna go ahead and delete my original file. After integrating the CSS styles from the HTML5 Boilerplate, if you go ahead and refresh it, there you go, you will notice that both the normalized has been applied as well as our own project specific style. So let's just move on and here we will come to the body code, so let me just go ahead and copy all of them. And I'll bring it over to my own project, so let me go ahead and paste it. So let's go through once again part by part. Firstly, you have this conditional comment, so if this is an older browser, it will basically prompt the user to upgrade the browser. Now sometimes, if this is a client project, I will probably not include it so let me just go ahead and delete it. Next is add your site or application content here, uh-huh. So looks like we can go ahead and add this bit of info that we coded previously. And replace it right here. Great, and after that, I can go ahead and delete the rest of my previous code. Next, if we move on, you will see that the script files are placed right at the bottom. And it is also useful to note that there is one script file in the header tag and that is the modernizr. Now Modernizr is a JavaScript framework that is a feature detection tool. So if we are supporting various browser that might not support some of the cutting edge features, Modernizr is a great tool to have. Now for the simplicity of our project, we will not use Modernizr. Next, we will come across some of the script files right at the bottom of the HTML file. Here, we will come across jQuery, so if our project is using jQuery, go ahead and use it. If not, we can just delete it. Now, if you notice one little information there is no http colon. Now, this phenomenon is very well explained by Paul Irish through protocol-relative URL. And, here he kind of explains that if the browser is viewing the current page to HTTPS, or HTTP, it basically prevents the security pop up. Now, we are not using a jQuery for this very simple project, so likewise, we can go ahead and delete it. Next, there is plugins.js and main.js, and as you can see here, it contains some of the console errors in the browsers that lack, lacks a console and the main.js is basically an aim to file where we can code out our project specifics scripts. So it looks like our product doesn't need it, so I'll just go ahead and delete it as well. Lastly, there is the Google Analytics code which is right at the bottom of the page. You can either copy it from the generated code from Google Analytics or you can just use this one and replace the numbers right here. So let me go ahead, select everything and indent so that it looks good. And I'll also go ahead and delete some of the comments which are no longer required. And looks that our HTML page is all done and integrated with the HTML5 Boilerplate code. Now if you come back to the rest of the files in HTML5 Boilerplate, you will notice that there are two files which are Git specific, the version control system. So if you are using Git as the version control system, it's very useful to have a look at these. The first one basically tells us that if we go to the GitHub page, we will find a list of ignore files, and we can pick and choose the ones that are relevant for our project. And similarly, we also have the Git attributes file that basically tells us the attributes that we want to include for this project, it's good to have these two files if you are using Git. Next, there is the 404 page which will come in handy, we can of course customize it according to the style of our project. So I'll go ahead and include it in my project. Next, if you look at the files, a change log, contributing, and the doc folder, these are, basically, for us to understand the HTML5 Boilerplate code. So, basically, we do not have to include these files in our project folder. We also have crossdomain.xml files, if you're external plugins, such as Flash. But I don't think we need it for this project so I will not transfer it. Next, we also have this little fun thing called the humans.txt so let me transfer it first. Humans.txt is a little text file that resides in the root of our project. And it basically lists all the people that are behind this project. An example is GitHub's human.txt file. Lastly, there is also robots.txt which is useful for the search engines. So, looks like we have integrated pretty well, the HTML5 Boilerplate. Why don't we go ahead and look at it in the browser? So there you go, from the looks of it, nothing has changed. But guess what? If you read through in detail, for example, the styles or humans.txt, some of the Git attributes, it already consists of a lot of boilerplate code that will help us get started and speed up our project. As a final note, I will fire up this project through a Apache HTTP Server so let me just copy this into the document root folder. And I am using MAMP to fire up the Apache server. Yup, it appears exactly the same, and let me just fire up the console and you see the Network's tab is loading up a lot of the files. Now if you are using some kind of server, such as Apache, to load your files, well, guess what? HTML5 Boilerplate comes with a handy htaccess file. So let me just go ahead and, copy this over. And notice now with the help of the new htaccess file, when I refresh it, and let's see we access a normalize.css, you see a lot of good stuff being included. For example, we can have, we have the encoding as a gzip, there's also, like, cache control. Everything has been included for you. So if you're using Apache, you can use the htaccess file that already comes with it. And if you are using some other servers, for example, there is, another project under HTML5 Boilerplate called the Server Configs. And inside here, along with Apache, you will see other servers, for example, nginx, lighttpd, or even Google App Engine. So go ahead and explore the GitHub repository for HTML5 Boilerplate for not only the main project, repository, but also some peripheral ones such as the server configs. So that's a little bit about HTML5 Boilerplate. As we saw, it contains a lot of pieces of good code that we can include, but of course, be sure to read through all of them so that we can customize and pick and choose exactly the ones we need for our current project.