Responsive Design For Beginners
Released 9/2025
By Coder Coder
MP4 | Video: h264, 1920x1080 | Audio: AAC, 44.1 KHz, 2 Ch
Genre: eLearning | Language: English | Duration: 140 Lessons ( 30h ) | Size: 5.76 GB
A course on how to build a website from a design with HTML and Sass/SCSS.
You've learned the basics of HTML and CSS. now what?
Sure, you can follow a tutorial and have gotten pretty at Googling to find answers, but the thought of starting a completely new website project terrifies you.
You're doing the best you can learning bits at a time. But you feel like you're stuck trying to fix weird CSS issues more often than you're successfully writing code.
Where do you even begin?
Imagine.
Not being stuck staring at your blank VS Code editor, but knowing how to jump in and start creating your website files.
Being able to translate Figma design files into a front-end website that looks good on all devices.
Knowing how to utilize features like Sass modules, mixins, CSS custom properties, and more.
Feeling comfortable using both flexbox and grid, and knowing when to use each.
Not writing spaghetti code, but organizing your SCSS files and writing styles in a way that makes sense, even weeks or months later.
Understanding how CSS works, even some of the quirkier (ahem, more frustrating) parts.
Hi there! ?? I'm Jess Chan.
I create tutorials for beginner web developers on YouTube. But in my previous life, I worked for 8 years as a web developer for advertising and marketing companies.
Also, you might not know that I'm also a self-taught developer. I didn't get a computer science degree or even go to a coding bootcamp.
It was incredibly tough starting out. I often felt extremely lost and confused, spending literal hours Googling and desperately trying different solutions to fix bugs.
Over the years, I learned more about how CSS worked, and why it would behave in very weird ways sometimes. And I became something of a specialist in taking a design file and turning it into a custom, responsive website.
crate holding HTML5, CSS, Sass, and GitHub logo badges
I'll show you how to think like a professional web developer.
Going through tutorials is great, but it's not the same as seeing how a professional would build a website from a design, from the ground up.
In this course, I'll take you step-by-step through the process of building a website from scratch with HTML, SCSS, and JavaScript.
I'll also explain my reasoning and decision-making the whole way- something that is missing from most web dev tutorials. Think about it like having a senior developer talking you through an entire website build- and getting to ask them questions the whole way!
You can do the same thing on your own, of course, but I can save you a lot of time by teaching you an efficient approach to building websites.
My ultimate goal is for you to hit a point where you feel confident in your CSS skills, and comfortable in your ability to research and problem solve- even for things you don't know off the top of your hea
Enroll in course
unicorn
Responsive Design for Beginners
A course on how to build a website from a design with HTML and Sass/SCSS.
Created by Coder Coder
Enroll in course
You've learned the basics of HTML and CSS. now what?
Sure, you can follow a tutorial and have gotten pretty at Googling to find answers, but the thought of starting a completely new website project terrifies you.
You're doing the best you can learning bits at a time. But you feel like you're stuck trying to fix weird CSS issues more often than you're successfully writing code.
Where do you even begin?
floating laptop with abstracted lines of code on the screen
Imagine.
Not being stuck staring at your blank VS Code editor, but knowing how to jump in and start creating your website files.
Being able to translate Figma design files into a front-end website that looks good on all devices.
Knowing how to utilize features like Sass modules, mixins, CSS custom properties, and more.
Feeling comfortable using both flexbox and grid, and knowing when to use each.
Not writing spaghetti code, but organizing your SCSS files and writing styles in a way that makes sense, even weeks or months later.
Understanding how CSS works, even some of the quirkier (ahem, more frustrating) parts.
Sounds great, but how do you get there?
Jess Chan sitting at a computer
Hi there! ?? I'm Jess Chan.
I create tutorials for beginner web developers on YouTube. But in my previous life, I worked for 8 years as a web developer for advertising and marketing companies.
Also, you might not know that I'm also a self-taught developer. I didn't get a computer science degree or even go to a coding bootcamp.
It was incredibly tough starting out. I often felt extremely lost and confused, spending literal hours Googling and desperately trying different solutions to fix bugs.
Over the years, I learned more about how CSS worked, and why it would behave in very weird ways sometimes. And I became something of a specialist in taking a design file and turning it into a custom, responsive website.
crate holding HTML5, CSS, Sass, and GitHub logo badges
I'll show you how to think like a professional web developer.
Going through tutorials is great, but it's not the same as seeing how a professional would build a website from a design, from the ground up.
In this course, I'll take you step-by-step through the process of building a website from scratch with HTML, SCSS, and JavaScript.
I'll also explain my reasoning and decision-making the whole way- something that is missing from most web dev tutorials. Think about it like having a senior developer talking you through an entire website build- and getting to ask them questions the whole way!
You can do the same thing on your own, of course, but I can save you a lot of time by teaching you an efficient approach to building websites.
My ultimate goal is for you to hit a point where you feel confident in your CSS skills, and comfortable in your ability to research and problem solve- even for things you don't know off the top of your head.
Quincy Larson
Teacher, freeCodeCamp
Jessica can distill even the most complicated coding concepts down into easy-to-understand lessons. She makes it look effortless. As a teacher myself, I respect how adeptly Jessica is able to equip beginner web developers with coding skills.
abstract coding user interface depicted with squares and lines
What's in this course?
This course is formatted a bit differently from other courses you may have seen.
Instead of focusing each lesson on different CSS properties or topics, the entire course follows building a website from a Figma design, and how to handle common problems that you'll encounter along the way.
Responsive Design for Beginners is actually made up of 3 courses: BASIC, PREMIUM, and ULTIMATE.
The BASIC Course is 22 hours long and includes
17 hours of introductory content: setting up VS Code, GitHub, and a complete introduction to Sass/SCSS that's a mini course in itself.
5 hours of building a more basic website that's great for beginners.
The PREMIUM Course (4 hours) expands on that, and we'll build additional sections that require more difficult skills.
The ULTIMATE Course (6 hours) will continue expanding, and we'll build more advanced sections as well as an animated hamburger menu.
Check out the Figma designs that we'll be building from for each of the 3 courses
Why did I format the course this way?
Over the years working in marketing and advertising, I realized that a huge part of being a web developer is being able to solve problems and how to build X, Y, and Z.
No client is going to quiz you on all the possible values of the CSS position property. They don't care about that.
What they do care about is if you can make those cards 3-columns across on desktop and stack to 1 column on mobile. Or making sure the image of their product doesn't look pixelated and weird on Retina screens.
Going through this course will try to emulate what working as a web developer is like in real life
Setting up your workflow in VS Code
Compiling Sass files
Organizing your project files
Creating a GitHub repository to track changes
Navigating a Figma design and interpreting it into SCSS styles
Using Google Fonts and Font Awesome icons
Building an accessible, responsive website with HTML, SCSS and some JavaScript
Troubleshooting your styles with Firefox Developer Tools
Deploying your website to Netlify
Homepage
Code:
Bitte
Anmelden
oder
Registrieren
um Code Inhalt zu sehen!
