My audience on YouTube has been asking me to create an in-depth course on building websites for a while now, so today I’m super excited to let you know that I’ve teamed up with Scrimba to bring you the Responsive Web Design Bootcamp.
The primary focus of the course is on how to build responsive websites, but only focusing on responsiveness didn’t feel right to me.
I wanted to make it as inclusive as possible, in that someone who’d just started learning HTML & CSS would be able to jump in without feeling intimidated, but I also wanted to make sure that it went deep enough to satisfy those who’ve already been in the game for a while.
As you can imagine, that means that there is a lot of content! It clocks in with 173 lessons and over 15 hours of content.
To help stay organized with that much content, the course is split into several modules (you can find a more detailed breakdown of each one below):
- Module 1: CSS Fundamentals
- Module 2: Starting to think responsively
- Module 3: Stepping up our style
- Module 4: Taking flexbox to the next level
- Module 5: CSS Grid: The ultimate layout tool
- Module 6: Taking it to the next level
So in reality, the course is more like 6 stand-alone courses, but where each one builds on the previous one.
Learning through doing
I’m a strong advocate of learning through doing. I don’t see the point in learning everything there is about something which can seem a bit complex (such as flexbox) before ever having used it.
What’s the point in learning about what the cross-axis is and flex-basis when at first you just want to create a few columns?
So this course is all about learning through doing. I use this approach because, when you are finished with the course, you will not only be comfortable with what was covered in the course, but you will have hands-on knowledge with CSS.
You will come out of this course being comfortable with CSS. We can’t cover it all but the foundation that you’ll build by going through this will set you up for success as you continue learning and building websites.
If this sounds like something you’d like to check out, click right here. As an added bonus, during the launch period, you can get it for 71% off! If you’d like more information on it first, keep on reading!
Scrimba is a game-changer
As I mentioned off the top, I teamed up with the guys at Scrimba to put this course together. If you aren’t familiar with Scrimba, they’ve changed the game when it comes to learning web development online.
When you first dive in, it might seem like any other video lesson, but you can interact with the code directly in the video player.
Yes, you heard that correctly, you can pause a video, change the code in the video player and see the updates live in the built-in preview window. Hit play, and it resumes right where you left off. It's incredible.
Wait, who am I?
My name is Kevin Powell and I have a YouTube channel devoted to CSS that currently has over 80,000 subscribers.
I've also been teaching in the classroom, where I'm currently entering my 6th year of teaching.
I teach everything from intro to HTML & CSS classes to page layout, typography, Photoshop and more.
Through my experience teaching in the classroom, I've seen a lot of what works and what doesn't first hand with my students and I've brought that experience to how I've structured this course.
I'm also very passionate about CSS. I see this course as an opportunity to help people see why I love it so much!
If you're ready to take your CSS skills to the next level, click here to sign up!
A more detailed breakdown of the modules
Module 1 - CSS Fundamentals
Module 1 continues from where my free HTML and CSS Crash Course leaves off. So it starts at a pretty basic level but quickly gears up!
In this module, we’re exploring fundamentals such as understanding the box model, as well as making sure we properly understand things like inheritance and specificity which many people, even experienced developers, get frustrated with.
Even though the focus is on the basics, we add in Google fonts and some design tips and tricks to start making a few simple layouts look good while we are at it.
It’s an essential module to make sure we all understand the basic concepts of CSS before we dive into the more complicated material.
Module 2 - Starting to think responsively
This module is a big module, and at the heart of things, a very big focus for this course. It introduces units new units, media queries, and starts taking a look at flexbox.
It also dives into how to analyze a layout before even writing a line of code. This is a foundational skill and something that many people struggle with.
Along with planning ahead, we also start to explore how to name our classes to avoid running into problems as a project scales up in size.
This module concludes with building out a three-page site and making sure that it’s fully responsive.
Module 3 - Stepping up our style
This one is all about taking a look at the more nuanced side of CSS.
It starts by continuing the last project to help make it even better before diving into another design where learn a few extras, such as background images, gradients, viewport units, some finer details on typography, as well as creating and styling a basic form.
It’s about understanding CSS at a deeper level and starting to unlock some of its awesome potential.
This module wraps up with building a simple, responsive splash-page, but one which forces us to continue leveling up what we know about CSS.
Module 4 - Taking flexbox to the next level
Module 4 is a change of pace.
At this point, we’ve created a lot. We’re starting to be comfortable with how it’s all working, so it’s time to take a real deep dive into flexbox (one of the two layout tools we have in CSS).
We look at the finer details of it such as flex-basis, align-self, how auto margins inside of flexbox change (and more!).
Once you’ve wrapped up this module, you’ll learn how to really control every element on a page properly.
Module 5 - CSS Grid: The ultimate layout tool
Then it's time to get into CSS Grid, which is CSS’ newest layout tool. It’s a major step up from flexbox. It allows us to build much more complicated layouts while simplifying our HTML in the process!
This module explores how it works, and how things like auto-fit, minmax(), and grid areas can make creating responsive websites so much easier!
We’ll examine how we can recreate some of our old layouts with grid, as well as take a look at a few simple page designs and how grid can be super useful when looking at the big picture as well as at the component level.
Module 6 - Taking it to the next level
Module 6 is the final project where we put everything together and build a 3-page site that uses everything we’ve learned so far, including CSS Grid.
While we’re at it, we’ll take things to the next level by exploring new things, such as pseudo-elements, some neat tricks with shadows, as well a very small dive into JavaScript.
Ready to step up your CSS game and master building responsive websites?
If you’d like to step up your CSS game, during the launch period it is on sale for $29, which is 71% off the final price! Click here to dive in and take your CSS skills to the next level.
Top comments (0)