Responsive Design for Beginners

30h 51s
English
Paid

Course description

You have already learned the basics of HTML and CSS... so what's next? Sure, you can repeat the steps from the tutorial and have become a master at finding answers on Google, but the very thought of starting a new website project from scratch is intimidating. You're learning little by little, but you often find yourself spending hours battling confusing CSS bugs instead of actually writing code. Where do you even begin?

Read more about the course

Imagine...

  1. You are not staring at an empty VS Code editor but know exactly how to start and which files to create.
  2. You can transform a design from Figma into a website that looks great on all devices.
  3. You use Sass capabilities: modules, mixins, variables, and much more.
  4. You clearly understand when to use flexbox and when to use grid.
  5. You don't write "spaghetti code," but organize SCSS files in a way that you can understand them even months later.
  6. And most importantly, you understand how CSS works, including its strange and sometimes frustrating features.


Sounds great, but how do you get there?

Hello! My name is Jess Chan.

In this course, I will show you how a professional developer thinks. Instead of a set of disjointed lessons, you will go step-by-step through the entire process: from a layout in Figma to a finished site with HTML, SCSS, and JavaScript. And most importantly, I will explain why I make certain decisions. It's like having a senior developer sitting next to you, commenting on the entire process.

My goal is for you to gain confidence in CSS and feel comfortable working on any project, even if you have to tackle tasks you haven't encountered before.

The course is divided into 3 levels: BASIC, PREMIUM, and ULTIMATE.

BASIC (22 hours)

  1. 17 hours of introductory material: setting up VS Code, GitHub, a complete introduction to Sass/SCSS (a mini-course on its own).
  2. 5 hours of practice: creating a basic site perfect for beginners.

BASIC Topics:

  1. Semantic HTML tags
  2. Code organization: BEM, Sass partials, mixins, variables, utility classes
  3. CSS cascade
  4. Document flow: inline, block, inline-block, and their features
  5. Flexbox and grid
  6. CSS units: px, em, rem, %, vw, ch
  7. Responsive typography with clamp()
  8. CSS variables (custom properties)
  9. Responsive images: srcset and DPR
  10. Working with SVG and inline-SVG
  11. CSS animations: hover effects, transitions
  12. Backgrounds with linear-gradient()
  13. Math in CSS with calc()

PREMIUM (4 hours)

Continuation where we build more complex sections of a site.

PREMIUM Topics:

  1. Animated underlines and backgrounds for hover states
  2. CSS grid areas and named grid lines
  3. SVG forms
  4. Absolute positioning of elements
  5. Alternating blocks with nth-child
  6. Pseudo-elements ::before and ::after
  7. Form styling

ULTIMATE (6 hours)

The final block with more advanced techniques and JavaScript.

ULTIMATE Topics:

  1. Responsive burger menu with animation and accessibility
  2. Overlay contexts and z-index
  3. Color themes based on CSS variables
  4. Building a block grid with grid, auto-fit, and minmax()
  5. Overlapping elements with grid and absolute
  6. object-fit and object-position for images
  7. Effects with mix-blend-mode
  8. Basics of Node, npm, package.json
  9. Compiling Sass using Vite and JS modules


In the end, you will step-by-step create a real responsive website based on a Figma layout and gain experience as close as possible to the work of a professional front-end developer.

Watch Online

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 140 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing

Watch Online Responsive Design for Beginners

0:00
/
#1: Welcome! How to use this course

All Course Lessons (140)

#Lesson TitleDurationAccess
1
Welcome! How to use this course Demo
03:43
2
Setting up VS Code
08:22
3
Intro to Git and GitHub
21:34
4
Setting up project files
08:51
5
What is Sass?
04:37
6
VS Code Extensions
11:26
7
Sass partials
13:24
8
Sass variables and CSS custom properties
17:11
9
Responsive design
06:16
10
Sass and BEM
07:10
11
Building the responsive 2-column layout
21:04
12
Setting widths
18:00
13
Sass mixins
12:22
14
Using max-width media queries
10:00
15
Order of media queries
08:09
16
Responsive typography
11:34
17
Why you shouldn't use pixels (usually)
15:19
18
Sass functions
10:10
19
Using the rem() function
20:07
20
Why I use em units in media queries
07:10
21
Nesting and BEM
04:43
22
Default browser styles
08:32
23
BEM modifiers and Sass placeholders
11:10
24
Helper and utility classes
09:17
25
Figma design
15:20
26
GitHub commits
03:47
27
Adding the favicon
05:37
28
My VS Code setup for screencasting
03:32
29
Study the design
04:49
30
Colors
11:45
31
Wrapper styles
12:45
32
H-tags
06:36
33
Clamp() function and responsive typography
15:02
34
Responsive typography and media queries
13:26
35
Semantic HTML tags
19:01
36
Design and exporting logo
04:43
37
Creating a skip link
09:15
38
Writing the HTML markup
20:03
39
Styling the navigation links
21:25
40
Layout with flexbox
21:06
41
Adding gap with flexbox
06:28
42
Spacing and CSS flow layout
19:16
43
Hover states
07:52
44
Mobile styles
13:00
45
Prep and HTML markup
16:46
46
Setting up styles
14:48
47
Unicorn image
16:52
48
Header styles
12:14
49
Paragraph styles
21:18
50
Unicorn image spacing
13:48
51
Button styles
11:31
52
Button sizing
15:16
53
Button spacing
12:50
54
Button hover states
15:56
55
Flexbox mobile layout
17:22
56
Flexbox desktop layout
15:40
57
Sizing the flex children
18:28
58
Flex-grow and flex-basis
10:48
59
Optional: Grid mobile layout
08:54
60
Optional: Grid desktop layout
12:32
61
Double-checking the styles
29:10
62
HTML markup
09:48
63
Adding the styles
17:09
64
Flexbox responsive layout
32:56
65
Optional: Flexbox intrinsic layout
14:33
66
HTML markup
09:32
67
Adding styles
13:05
68
Paragraph and image styles
12:15
69
Images & Device Pixel Ratio
10:40
70
HTML markup
20:32
71
Adding styles
07:50
72
Quotation mark styles
09:49
73
Quote & author styles
12:57
74
Flexbox layout
23:17
75
Linear-gradient background
20:02
76
Prep and HTML markup
09:38
77
Sharing styles
05:55
78
Sass @extend at-rule
09:44
79
Sass placeholders
15:50
80
Sass mixins
10:35
81
Helper/utility classes
06:17
82
Button styles
05:57
83
Checking the styles
08:10
84
Prep and HTML markup
27:25
85
Adding basic styles
18:41
86
Hover state styles
10:03
87
Footer column markup
08:02
88
SVG styles
10:34
89
Sizing and aligning the SVG
08:20
90
Responsive layout with CSS grid
27:12
91
Deploying the site with Netlify
05:42
92
Congratulations! Now what?
00:27
93
Getting started
01:19
94
Setup and HTML markup
10:06
95
Writing styles
17:32
96
Prep and setup
04:43
97
Wrapper styles
16:57
98
Content styles
19:49
99
Prep and markup
13:29
100
Basic styles
20:55
101
Text links
13:22
102
Layout styles
19:00
103
Alternating styles
12:58
104
Prep and markup
06:23
105
First quotation mark
12:17
106
Second quotation mark
09:00
107
Troubleshooting
09:28
108
Prep and markup
13:05
109
Form styles
17:59
110
Mobile grid layout
11:15
111
Aligning grid children
14:02
112
Tablet-Desktop grid layout
14:55
113
Deployment & Congrats
02:42
114
Introduction
01:36
115
Prep and markup
07:15
116
Menu styles
24:57
117
Menu shadow
12:57
118
ARIA and animation
15:36
119
Overlay
13:24
120
JavaScript
15:08
121
Hiding elements accessibly
18:05
122
Switching viewport widths
09:23
123
Animation issues
11:19
124
Stacking and z-index
10:19
125
Locking the scroll
10:51
126
More optimizations
15:46
127
Setup
09:05
128
Dark theme
08:41
129
Setup and markup
27:03
130
Basic styles
13:27
131
Text block styles
20:48
132
Font sizing
15:41
133
Adding cards
19:52
134
Layout styles
13:24
135
Gradient variations
06:38
136
Sass for-loop
20:36
137
Installing Vite
18:28
138
Loading files
18:35
139
Deployment
06:50
140
Congratulations!
01:42

Unlock unlimited learning

Get instant access to all 139 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

Page Transitions

Page Transitions

Sources: superhi.com
Integrate the Barba.js Javascript library into your websites and use CSS and Javascript techniques to add smooth and harmonious effects.
4 hours 10 minutes 33 seconds
Composing Layouts in React

Composing Layouts in React

Sources: fullstack.io
In this course we show you how to build complex layouts in React by composing just a few foundational layout primitives. Along the way you will learn modern CSS Layout tools lik...
4 hours 38 minutes 12 seconds
Complete Web Developer in 2025: Zero to Mastery

Complete Web Developer in 2025: Zero to Mastery

Sources: udemy, zerotomastery.io
Learn to code. Get hired. This is one of the most popular, highly rated coding bootcamps online. It's also the most moderen and up-to-date. Guaranteed. You'll g
37 hours 3 minutes 37 seconds
Tailwind Mastery

Tailwind Mastery

Sources: Build UI
Tailwind CSS has become one of the most popular ways to style modern web applications, and for good reason. Its APIs make developers feel incredibly productive, and because it's...
2 hours 34 minutes 57 seconds
Tailwind UI (Application UI + Marketing)

Tailwind UI (Application UI + Marketing)

Sources: adamwathan
Tailwind UI is a collection of professionally designed, pre-built, fully responsive HTML snippets you can drop into your Tailwind projects. Get started by check