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 max-width media queries
Complete and Continue
Discussion
2
comments
Load more
2 comments