Responsive Web Development


 15 Reviews Add a review

Published April 2017

Build a modern website with maximum efficiency and organization

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:

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.

What you'll learn

  • Sass, Node, npm, Gulp and Autoprefixer
  • BEM Methodology
  • Create a responsive grid system
  • Closed captions available
SPONSORS
Meet your instructor
Guilherme Muller

Guilherme is a freelance full-stack developer with over 10 years of experience of working on the web. With a passion for the HTML and CSS languages, he creates courses and screencasts about these subjects.

Lesson 1: Introduction
Free Introduction 3:58
Lesson 2: Planning and Slicing
Free The Design 4:39
Free Exporting Assets 2:54
Lesson 3: Setting Up a Front-End Workflow
Free 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

Leave a Review