SitePoint
  • Premium
  • Library
  • Community
  • Jobs
  • Blog
LoginStart Free Trial
Build a Responsive Web Site from Scratch
Introduction
The Design
Exporting Assets
What is a Front-end Workflow?
Installing Node.js, npm and Gulp
Installing Gulp Plugins
Creating Gulp Tasks
Quiz
The BEM Methodology
Building the HTML Page Structure
HTML for the Page Content
Sass Partial Structure
Responsive Mixins and Functions
CSS Reset, Google Fonts and Font Awesome
The Grid System Concept
Prototyping the Grid in CSS
Creating a Responsive Grid Mixin
Quiz
Styling the Header and Navigation
Styling the Footer
Styling the Page Sections
Styling the Portfolio Section
Styling the Blog Section
Styling the Contact Form
Creating a Responsive Hamburger Menu
Refining the Responsiveness
Conclusion and Next Steps