The Responsive Web Design Bootcamp

Unlock CourseGet started!

Join 4938 other students

Sign in to get
Access to 30+ free courses
New courses added monthly
Weekly coding challenge
Join a friendly community
Unlock Course
Subscribe to access!New Years discount
Subscribe to access to this course and ALL other courses. You get a 30-day money-back guarantee, no questions asked.
This bootcamp includes
15 hours of content - 173 lectures
Tons of interactive challenges
Certificate of completion
Subscribe now!New Years discount
The course creator Kevin Powell

with Kevin Powell

4938 students enrolled

Course level: Intermediate

This course will take you to a professional level in responsive web design. You'll learn to build advanced layouts while solving fun coding challenges along the way.

What's inside

This course contains 174 interactive screencasts spread across 6 modules.

two girls
▼
CSS Fundamentals
25 lessons - 2 hours
1. Welcome to the course!
3:54
2. An Important note before we start
1:10
3. Introduction to the CSS Fundamentals module
2:58
4. Margin and Padding - Margins and spacing out text
4:56
5. Margin and Padding - Collapsing margins
6:36
6. Margin and Padding - Consistency and a new type of selector
5:19
7. Inline and Block elements
6:08
8. The span element
3:34
9. Styling links
12:23
10. Practice Time!
21:57
11. Inline-block
4:53
12. Styling buttons
9:15
13. Specificity basics
4:59
14. Specificity - two selectors of equal value
2:10
15. Compound Selectors
15:13
16. Compound selectors and specificity
6:56
17. A better way to name our CSS classes
8:39
18. The text properties
2:54
19. Font-family and font stacks
5:45
20. How to use Google fonts
8:55
21. Inheritance
1:55
22. Working with, overwriting, and applying inheritance
4:04
23. Putting it all together
8:27
24. Putting it all together - the CSS
17:42
25. Solution to the challenge and module wrap up
4:17
▼
Starting to think responsively
45 lessons - 4 hours
1. Starting to think responsively
3:00
2. CSS Units
3:11
3. CSS Units - Percentage
5:55
4. Controlling the width of images
4:47
5. min-width and max-width
2:46
6. CSS Units - The em unit
5:27
7. The problem with ems
2:29
8. CSS Units - rems
4:44
9. Picking which unit to use
3:31
10. ems and rems - an example
7:47
11. Flexbox refresher and setting up some HTML
7:51
12. Basic styles and setting up the columns
7:02
13. Adding the background color
4:10
14. Setting the column widths
3:36
15. Spacing out the columns
4:24
16. Controlling the vertical position of flex items
5:12
17. Media Query basics
10:05
18. Making out layout responsive with flex-direction
6:52
19. flex-direction explained
3:04
20. Creating a navigation
4:44
21. Using flexbox to start styling our navigation
7:36
22. Making our navigation look good
7:15
23. Adding the underline
3:58
24. A more complicated navigation
6:41
25. Making the navigation responsive
6:53
26. Taking a look at the rest of the project
4:10
27. Setting up the structure
8:22
28. Featured article structure
5:05
29. The home page - HTML for the recent articles
2:29
30. home page - html for the aside
6:03
31. Starting the CSS for our page
15:26
32. Starting the layout - looking at the big picture
8:30
33. Starting to think mobile first
2:46
34. Styling the featured article
6:22
35. Changing the visual order with flexbox
5:12
36. Playing with the title's position, and the downsides of negative margins
4:42
37. Styling recent articles for large screens
7:44
38. Changing image sizes with object-fit
3:53
39. Setting up the widgets and talking breakpoints
6:48
40. Using a new pseudo-class to wrap-up the homepage
7:28
41. Creating the recent posts page
3:25
42. Setting up the About Me page
4:12
43. Fixing up some loose ends
4:28
44. Important Note: The viewport meta tag
3:39
45. Module wrap up
3:14
▼
Stepping up our style
38 lessons - 2 hours
1. It's time to step up our style
2:40
2. A look at line-height
5:12
3. text-transform: uppercase
4:01
4. Making things easier to read with letter-spacing
4:02
5. A nice color trick with rgba()
4:52
6. background-images
3:59
7. Background images and the file path (very important note)
2:05
8. Controlling our background images
7:55
9. BBQ Splash Page - Project Introduction
3:23
10. Writing the HTML for the BBQ splash page
7:01
11. Starting to style it up - BBQ Splash Page
11:07
12. Adding the background image - BBQ Splash Page
3:46
13. Changing the order - BBQ Splash Page
3:45
14. Styling the main content area - BBQ Splash page
2:51
15. Adding the media query - BBQ Splash Page
4:22
16. Setting up the typography for large screens - BBQ Splash Page
2:13
17. Starting to set things up for large screens - BBQ Splash Page
3:22
18. Viewport units
7:29
19. Adding viewport units to the BBQ Splash Page
2:08
20. Enter box-sizing: border-box
7:07
21. Using flexbox to vertically center the main content - BBQ Splash Page
3:19
22. Fixing the intro section on both small and large screens - BBQ Splash Page
2:34
23. Dealing with very large screens solution #1
4:24
24. Dealing with very big screens solution #2
5:30
25. The very basics of forms
10:49
26. Form basics - form attributes
4:13
27. The basics of styling form
5:11
28. Adding the form - BBQ Splash Page
3:30
29. Starting to style up the form - BBQ Splash Page
4:03
30. Making the inputs look good - BBQ Splash Page
3:54
31. CSS Gradients
5:31
32. Styling the button - BBQ Splash Page
5:09
33. Basic transitions
4:44
34. Intro to transforms (and a quick word on performance)
3:01
35. We can transition more than :hover
2:54
36. Border gradients
4:52
37. Blending images, colors, and gradients with background-blend-mode
4:16
38. Wrap up
1:41
▼
Taking flexbox to the next level
17 lessons - 1 hour
1. Taking flexbox to the next level
1:39
2. flex-direction, flex-wrap, and flex-flow
5:15
3. justify-content and align-items and their relationship to flex-direction
7:16
4. Exploring align-content
4:23
5. flex-grow and flex-shrink explained
5:06
6. flex-basis
5:33
7. The flex shorthand property
4:25
8. Aligning individual elements with align-self
1:37
9. Margin auto and flexbox
4:29
10. Building a card component with flexbox - Introduction
2:34
11. Building a card component with flexbox - The markup
4:35
12. Building a card component with flexbox - Typography
5:42
13. Building a card component with flexbox - Mobile layout
11:00
14. Building a card component with flexbox - Large screens part one
5:10
15. Building a card component with flexbox - Large screens part two
5:18
16. Centering something on the screen with flexbox
2:20
17. Module wrap-up
1:51
▼
CSS Grid: The ultimate layout tool
19 lessons - 1 hour
1. Introduction to CSS Grid
3:16
2. Setting up a basic grid
5:21
3. Placing items on the grid
4:03
4. grid-row and grid-column shorthands
5:13
5. Spanning columns
1:42
6. Some similarities to flexbox
5:28
7. Using grid for our card component
13:13
8. The grid-gap property
2:32
9. Adding the gap to our card
2:52
10. The implicit and explicit grid
6:00
11. Exploring grid areas
8:11
12. grid-areas and media queries
6:18
13. minmax()
3:35
14. the fr unit
3:01
15. minmax() and the fr unit
2:27
16. Putting grid to use - part 1
11:32
17. Putting grid to use - part 2
3:30
18. repeat()
3:22
19. auto-fit and auto-fill
5:14
▼
Taking it to the next level
30 lessons - 2 hours
1. Taking it to the next level
1:55
2. Analyzing the layouts
3:26
3. Starting work on the homepage
2:37
4. The HTML for the homepage
3:38
5. The first lines of CSS you should always write
3:52
6. Setting up our grid for small screens
3:08
7. Continuing the hero area
5:03
8. The "info" section
3:32
9. Setting up the footer
3:05
10. Using Font Awesome for our icons
5:25
11. Wrapping up the footer
1:31
12. Setting up the grid, and hero, for larger screens
5:15
13. Setting up the rest of the page for larger screens
5:31
14. Starting to style our navigation
3:17
15. Setting up our navigation for small screens with positioning
5:27
16. Making the close button
3:25
17. Creating the "open" state and adding JavaScript to close our navigation
9:20
18. Adding the open button to our navigation
4:24
19. 18 - Styling the navigation for large screens
2:47
20. Fixing up the navigation and hero area
6:13
21. Creating the second page
2:14
22. Styling the about page
8:48
23. Exploring box-shadows to get the effect on our images
5:23
24. Using pseudo-elements to add the yellow lines
5:05
25. Adding the yellow bar to our titles
3:03
26. Creating the contact page
4:11
27. Styling the contact form
6:34
28. Styling the contact form for larger screens
5:51
29. The loose ends
4:42
30. You did it!
3:20

You'll learn

CSS basics
Sane CSS defaults
Specificity and selectors
CSS best practices
Text and fonts
Units and responsive Text
Flexbox layouts
Vertical aligning of content
Design best practices
Media Queries and viewports
Forms and how to make them look good
Advanced flexbox concepts
CSS Grid layouts
Icons with Font Awesome
Transitions and animations
Adding it all together

You'll build

screenshot

BBQ Splash page

A beautiful and responsive landing page to introduce you to basic concepts

screenshot

The simple life blog

Learn how to handle text and typography by building a neat-loooking blog.

screenshot

A marketing agency website

This company website will take your CSS skills to a professional level.

man

Prerequisites

Before taking this course, you should have a basic understanding of HTML and CSS. You should know how to build simple layouts using those technologies.

The course creator

Meet your teacher

Kevin Powell

Follow me on twitter

Why this course rocks

Let me ask you a few questions:

  • Do you want to learn to build responsive websites that look 100% professional?

  • Do you want to be confident that your website works well on all devices?

  • Are you tired of feeling that your CSS is a mess?

If your answer is YES, then this is the perfect course for you!

It gives you a deep understanding of CSS and responsive design while keeping you fully engaged along the way. You'll learn to build four different layouts: a blog, a landing page, a banner, and a company website. Each one will take your skills to a new level.

The best learning experience

To ensure that the knowledge sticks with you, you are given interactive coding challenges as you progress. It's as if you and the instructor are pair-programming together!

This kind of fast-paced interactivity simply isn't possible with any other platform than Scrimba. And if you get stuck, you have exclusive access to the teacher's Slack channel.

This course is also a part of our hugely popular Front-End Devloper Career Path.

F to the A oracle to the Q

What is responsive web design?

Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries.

Do you have a refund policy?

Yes, just email us (help@scrimba.com) within a month and we'll return the money.

Do I have to pay with credit card?

We also support PayPal. Click the buy button and you'll get the opportunity to choose between credit card (via Stripe) or PayPal.

Will I get a receipt?

Yes, you'll get a receipt (not an invoice, as that's only for group purchases) with the name of the course sent via email. It might take a few minutes before you get it, so please be patient.

Help! I purchased the course, but the course is still locked!

First, try refreshing the page. If that doesn't work, make sure you're logged in with the same account you bought the course with (we support both GitHub and email authentication). If that doesn't solve it, send an email to help@scrimba.com and we'll fix it asap.

I have another question!

Sure! Just shoot us an email at help@scrimba.com

Go Pro!
All courses|Sign in
|Sign up
All courses
DashboardBillingSettingsNew scrim
Sign out
Discord Twitter YouTube GitHub
ResourcesBlogFAQTermsPrivacy
CoursesAll courses Intro coursesLearn JavaScriptLearn React
CompanyAbout usContact usSupport chatStart teaching
Built with Imba