Using the rem() function | Coder Coder

Autoplay
Autocomplete

Previous Lesson Complete and Continue

BASIC Course | Responsive Design for Beginners

1. Getting Started

Welcome! How to use this course (3:42)
Resources and Tools
Setting up VS Code (8:21)
Intro to Git and GitHub (21:33)
Setting up project files (8:50)
What is Sass? (4:36)
VS Code Extensions (11:25)

2. Introduction to Sass and Responsive Design

Sass partials (13:23)
Sass variables and CSS custom properties (17:10)
Responsive design (6:15)
Sass and BEM (7:09)
Building the responsive 2-column layout (21:03)
Setting widths (17:59)
Sass mixins (12:21)
Using max-width media queries (9:59)
Order of media queries (8:08)
Responsive typography (11:33)
Why you shouldn't use pixels (usually) (15:18)
Sass functions (10:09)
Using the rem() function (20:06)
Why I use em units in media queries (7:09)
Nesting and BEM (4:42)
Default browser styles (8:31)
BEM modifiers and Sass placeholders (11:09)
Helper and utility classes (9:16)

3. BASIC Website Setup

Figma design (15:19)
GitHub commits (3:46)
Adding the favicon (5:36)

4. Global Styles

My VS Code setup for screencasting (3:31)
Study the design (4:48)
Colors (11:44)
Wrapper styles (12:44)
H-tags (6:35)
Clamp() function and responsive typography (15:01)
Responsive typography and media queries (13:25)
Semantic HTML tags (19:00)

5. Top Navigation

Design and exporting logo (4:42)
Creating a skip link (9:14)
Writing the HTML markup (20:02)
Styling the navigation links (21:24)
Layout with flexbox (21:05)
Adding gap with flexbox (6:27)
Spacing and CSS flow layout (19:15)
Hover states (7:51)
Mobile styles (12:59)

6. Hero

Prep and HTML markup (16:45)
Setting up styles (14:47)
Unicorn image (16:51)
Header styles (12:14)
Paragraph styles (21:17)
Unicorn image spacing (13:47)
Button styles (11:30)
Button sizing (15:15)
Button spacing (12:49)
Button hover states (15:55)
Flexbox mobile layout (17:21)
Flexbox desktop layout (15:39)
Sizing the flex children (18:27)
Flex-grow and flex-basis (10:47)
Optional: Grid mobile layout (8:53)
Optional: Grid desktop layout (12:31)
Double-checking the styles (29:09)

7. 3-Column Features

HTML markup (9:47)
Adding the styles (17:08)
Flexbox responsive layout (32:55)
Optional: Flexbox intrinsic layout (14:32)

8. Full-width Feature

HTML markup (9:31)
Adding styles (13:04)
Paragraph and image styles (12:14)

9. Testimonial

Images & Device Pixel Ratio (10:39)
HTML markup (20:31)
Adding styles (7:49)
Quotation mark styles (9:48)
Quote & author styles (12:56)
Flexbox layout (23:16)

10. Full-width CTA

Prep and HTML markup (9:37)
Linear-gradient background (20:01)
Sharing styles (5:54)
Sass @extend at-rule (9:43)
Sass placeholders (15:49)
Sass mixins (10:34)
Helper/utility classes (6:16)
Button styles (5:56)
Checking the styles (8:09)

11. Footer

Prep and HTML markup (27:24)
Adding basic styles (18:40)
Hover state styles (10:02)
Footer column markup (8:01)
SVG styles (10:33)
Sizing and aligning the SVG (8:19)
Responsive layout with CSS grid (27:11)

12. Deployment and finish!

Deploying the site with Netlify (5:41)
Congratulations! Now what? (0:26)

Using the rem() function

Complete and Continue

Discussion

2 comments