7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

1.1 Welcome

It’s an exciting time to be a web developer! In this course, we explore common tools for boilerplates, abstraction, browser dev tools and more.

Course Prerequisites
  1. HTML, CSS — TutsPlus Course: 30 days to learn HTML and CSS
  2. Command Line Command Line is your best friend
  3. Text editor such as Sublime Text — Tutsplus Course: Perfect Workflow in Sublime Text 2
  4. Install Rubygems ruby package manager
  5. Install Node (this comes with NPM) – node package manager
  6. Git and Github — Tutsplus Course: Git Essentials
  7. CDNjs – one stop for many hosted popular libraries
Resources
  1. A Baseline for Front-End Developers by Rebecca Murphey
  2. Tooling for the Modern WebApp Developer ( slides) by Addy Osmani
  3. Tooling and WebApp Development Stack ( slides) by Paul Irish
  4. The Breakpoint show by Google Developers

1.Introduction
1 lesson, 04:44

1.1
Welcome
04:44

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

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.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.

Back to the top