Mobile-First Site Build (with CSS Grid)

Websites need to look good on all devices & screen sizes - desktops, laptops, tablets, mobiles & others.In this Mobile-first website build tutorial we'll use CSS grid to create a fully responsive website from scratch. To do this we'll be using media queries & adopting a mobile-first approach, meaning we design for smaller screens first & work upwards in size. If you want to learn about responsive web design, this is the course.

Intro and setup

Making the Html Temaplate

Mobile First Approach Explained

Creating Some Base Styles

Custom Fonts

CSS Grid Basics

Creating a 12 column Grid

Adding mobile styles (part 1)

Adding mobile styles (part 2)

Adding mobile styles (part 3)

Tablet Styles

Adding laptop styles (part 1)

Adding laptop styles (part 2)

Adding laptop styles (part 3)

Tablet Styles

Adding laptop styles (part 1)

Adding laptop styles (part 2)

Adding Final Desktop styles