SitePoint
  • Premium
  • Library
  • Community
  • Jobs
  • Blog
LoginStart Free Trial

The home for developers

Track your course progress, manage projects, and find your dream job - all in one place.

Start Your Free Trial

7 Day Free Trial. Cancel Anytime.

SitePoint Premium

  • Access to 700+ courses
  • Publish articles on SitePoint
  • Daily curated jobs
  • Learning Paths
  • Discounts to dev tools
  • Library/
  • Video courses/
  • Build a Responsive Web Site from Scratch
Build a Responsive Web Site from Scratch

Build a Responsive Web Site from Scratch

Build a modern website with maximum efficiency and organization


Course details

4.4∙63 Ratings36 reviews

Published
April 2017
Videos
27
Duration
2h 2m
Happy students
3070

Take this course

About the course

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:
  • How to work with the command line
  • Node.js and its npm package manager
  • Gulp for running common development tasks
  • Sass for pre-processing your styles and building your responsive grid system
  • Autoprefixer for automatically adding vendor prefixes
  • BrowserSync for automatically reloading the browser and for remote device testing
  • Using the BEM naming convention for organizing your HTML and CSS as reusable components
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 Functional JavaScript Programming, learn about how the web is progressing and JavaScript is moving forward with functional programming.

Course Instructor

Guilherme Muller

Guilherme Muller

Guilherme is a freelance full-stack developer with over 10 years of experience working with websites. With a passion for HTML and CSS, he specializes in the intricacies of building and structuring web pages and layouts.

Course Outline

Lesson 1: Introduction
  • Free
    Introduction
    3:58
Lesson 2: Planning and Slicing
Lesson 3: Setting Up a Front-End Workflow
Lesson 4: Working with HTML
Lesson 5: Working with Sass
Lesson 6: Building a Grid System
Lesson 7: Styling the Website
Lesson 8: Conclusion

Reviews
4.4

58 total

32
22
1
1
2

Course details

4.4∙63 Ratings36 reviews

Published
April 2017
Videos
27
Duration
2h 2m
Happy students
3070

Take this course
SitePoint

Stuff we do

  • Premium
  • Newsletters
  • Learning paths
  • Library
  • Forums

Contact

  • Contact us
  • FAQ
  • Publish your book
  • Write an article
  • Advertise

About

  • Our Story
  • Corporate Memberships
  • Start free trial
  • Login

Connect

  • RSS
  • Facebook
  • Twitter (X)
  • Instagram

Subscribe to our newsletter

Get the freshest news and resources for developers, designers and digital creators in your inbox each week

© 2000 – 2025 SitePoint Pty. Ltd.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Terms of usePrivacy policy