Mobile First & Responsive Web Design: Build Modern Websites!

Chris Dixon, Web Developer & Online Teacher

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
33 Lessons (4h 15m)
    • 1. Welcome to the course

      1:56
    • 2. What you will need and useful tools

      5:25
    • 3. Why mobile first?

      2:48
    • 4. What is responsive design?

      9:42
    • 5. Getting started with the fluid grid

      7:51
    • 6. Relative units

      6:29
    • 7. Viewport Meta Tag

      3:10
    • 8. Media Queries & Breakpoints

      14:19
    • 9. Wireframe with Gliffy

      4:20
    • 10. Setting up the project

      15:43
    • 11. Header & Navigation

      14:34
    • 12. Adding the main content

      10:01
    • 13. Creating the sign up area & footer

      10:41
    • 14. Mobile first styling

      10:43
    • 15. Mobile styles continued & adding media queries

      11:06
    • 16. Finishing our project

      9:01
    • 17. Responsive Sliding Carousel

      6:19
    • 18. Responsive Social Share buttons

      8:02
    • 19. Responsive images introduction

      2:01
    • 20. Reducing Image File Sizes

      3:44
    • 21. Minification & Page Speed Insights

      7:12
    • 22. Picture Element

      12:17
    • 23. Adaptive Images

      2:23
    • 24. Introduction to Flexbox

      10:41
    • 25. Flexbox grid

      7:32
    • 26. Holy Grain Layout using Flexbox

      8:43
    • 27. Flexbox sticky footer

      3:02
    • 28. Bootstrap Framework

      12:02
    • 29. JQuery Mobile Part 1

      18:33
    • 30. JQuery Mobile Part 2

      10:00
    • 31. Other popular frameworks

      3:11
    • 32. Thank you

      1:15
    • 33. Follow me on Skillshare!

      0:23
13 students are watching this class

Project Description

Build your own fully responsive, designer clothing website from scratch!

By the end of this course you will have built your own fully responsive Designer Clothing website! As you progress through the course you will be applying everything you have learned into a real in depth project.

You can really show off your mobile first and responsive design skills with this project. You will have applied the following skills in this project:

  • We will go over what responsive design is and why a mobile first approach can be beneficial
  • Tools you can use to help your project
  • Fluid grids and relative sizes
  • The Viewport Meta Tag
  • Media queries and breakpoints
  • We will then add jQuery plugins to the project to create a responsive sliding carousel and social sharing buttons
  • Dealing with responsive images and the picture element
  • How to optimise our images and files

Feel free to follow along and create the same as me or customise how you like!

I hope you enjoy and look forward to seeing what you create!

Student Projects

project card
Chris Brennan
1 comment
project card
1 comment