Front end development has come a long way in recent years. Websites used to be simple, have a small handful of pages, a few jQuery plugins and perhaps some server side functionality for handling form submissions.

Now, building a modern front-end website involves boilerplates, generators, package managers, task runners, pre-processors and post-processors. And the complexity in  web development continues to grow with many moving parts. It’s confusing and overwhelming to those just starting or transitioning from older techniques. 

In our course Responsive Web Development, we’ll give you the blueprint for building modern responsive websites. Guilherme Müller walks you through the process of building a front end workflow using powerful tools and concepts. Not only does this course cover the theory of modern responsive web development, you’ll learn how to apply each of these fundamental concepts in practice. By building a single-page portfolio website, step by step we’ll demonstrate each concepts by action. 

Specifically, we’ll be covering:
<ul>
<li>How to work with the command line</li>
<li><a href="https://nodejs.org/en/">Node.js</a> and its npm package manager</li>
<li><a href="http://gulpjs.com/">Gulp</a> for running common development tasks</li>
<li><a href="http://sass-lang.com">Sass</a> for pre-processing your styles and building your responsive grid system</li>
<li><a href="https://autoprefixer.github.io/">Autoprefixer</a> for automatically adding vendor prefixes</li>
<li><a href="https://browsersync.io/">BrowserSync</a> for automatically reloading the browser and for remote device testing</li>
<li>Using the <a href="http://bem.info">BEM naming convention</a> for organizing your HTML and CSS as reusable components</li>
</ul>

To complete this course we’ll be using a web browser, a text editor, and a command line interface. You’ll need to be comfortable with HTML, CSS, and JavaScript to follow along with this intermediate level course. It can be tricky.

Once you've completed this course, you may want to check out <a href="https://www.sitepoint.com/premium/courses/functional-javascript-programming-2922">Functional JavaScript Programming</a>, learn about how the web is progressing and JavaScript is moving forward with functional programming.

Introduction

Planning and Slicing

Setting Up a Front-End Workflow

Working with HTML

Working with Sass

Building a Grid System

Styling the Website

Conclusion

HTML & CSS

Build a Responsive Web Site from Scratch

Responsive Web Design

Frameworks

HTML

Description for Setting Up a Front-End Workflow