Courses
All coursesFrontend PathFrontend Bootcamp

Not sure where to start?

Let us help you find your perfect course.
PricingCoursesLog in
Why Scrimba?
Courses
All coursesFrontend PathFrontend Bootcamp

Not sure where to start?

Let us help you find your perfect course.
Pricing
PricingCreate Account
Log in
Go Pro!

Bootcamp

Study group

Collaborate with peers in your dedicated #study-group channel.

Code reviews

Submit projects for review using the /review command in your #code-reviews channel

Courses
All coursesFrontend PathFrontend Bootcamp

Not sure where to start?

Let us help you find your perfect course.

Karma

DashboardConnect to DiscordFind a courseSettingsNew scrim
Log out

Learn Responsive Web Design

Enroll for freeGet started!

Join 9931 other students

Log in to get

Access to all our free courses
Interactive hands-on content
100s of code challenges
Join a friendly community
Enroll for free
Subscribe to access!Subscribe to access!

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!
The course creator Kevin Powell

with Kevin Powell

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 scrims spread across 6 modules.

two girls
CSS Fundamentals

25 lessons2 hours 55 min

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 lessons4 hours 7 min

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 our 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 lessons2 hours 53 min

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 lessons1 hour 18 min

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 lessons1 hour 37 min

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 lessons2 hours 12 min

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. 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
The simple life blog

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

screenshot
BBQ splash page

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

screenshot
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.

Learn HTML and CSS
105 lessons | 5 hours 33 min
with Per Harald Borgen
Per Harald BorgenBeginner

Meet your teacher

The course creator

Kevin Powell

Hi, I'm Kevin. I love to teach people how to make the web and how to make it look good while they're at it. Over 300.000 people follow my tutorials on YouTube. I learned to make websites on my own. I know how fun and rewarding it is, but I also know that it can be incredibly frustrating. I'm here to help make your journey into web development as easy and as fun as possible.

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!

This course is also a part of our hugely popular Front-End Developer 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 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.

I have another question!

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

HomePlans & PricingGift membershipTeacher talent program

Community

Explore the communityPodcastYouTubeGet Scrimba emails

Courses

All courses Free coursesPro coursesSelf-paced Bootcamp

Company

About usSupport centerTermsPrivacy

Built with Imba