Build a Responsive Web Site from Scratch

Lesson 1, Step 1: Introduction

Download zip Diff changes Checkout lesson1.1 What's this?

Sign up to continue

Courses Outline

Lesson 1: Introduction

Free

Introduction

3:58

Lesson 2: Planning and Slicing

The Design

4:39

Exporting Assets

2:54

Lesson 3: Setting Up a Front-End Workflow

What is a Front-end Workflow?

3:45

Installing Node.js, npm and Gulp

6:23

Installing Gulp Plugins

4:52

Creating Gulp Tasks

8:31

Quiz

Lesson 4: Working with HTML

The BEM Methodology

5:03

Building the HTML Page Structure

3:12

HTML for the Page Content

6:46

Lesson 5: Working with Sass

Sass Partial Structure

5:54

Responsive Mixins and Functions

7:02

CSS Reset, Google Fonts and Font Awesome

4:36

Lesson 6: Building a Grid System

The Grid System Concept

4:20

Prototyping the Grid in CSS

3:02

Creating a Responsive Grid Mixin

5:40

Quiz

Lesson 7: Styling the Website

Styling the Header and Navigation

5:00

Styling the Footer

5:28

Styling the Page Sections

3:29

Styling the Portfolio Section

3:22

Styling the Blog Section

3:35

Styling the Contact Form

3:34

Creating a Responsive Hamburger Menu

5:57

Refining the Responsiveness

8:57

Lesson 8: Conclusion

Conclusion and Next Steps

2:46

Join SitePoint Premium to download this course