The Responsive Web Design Bootcamp
Unlock Course
Join 4563 other students
Sign in to get
Access to 30+ free courses
New courses added monthly
Weekly coding challenges
Huge discord community
Exclusive chat access
Start your 7-day trial now
Get access to this course and ALL other Scrimba courses at great value. Our free trial and 30-day money back guarantee makes this risk free for you.
Career Path includes
75+ hours of content
100s of coding challenges
Exclusive Study Group access
HTML, CSS, JS & React
Getting Hired section
30-day money-back guarantee
with Kevin Powell
4563 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.
▼
CSS Fundamentals
1. Welcome to the course!
2. An Important note before we start
3. Introduction to the CSS Fundamentals module
4. Margin and Padding - Margins and spacing out text
5. Margin and Padding - Collapsing margins
6. Margin and Padding - Consistency and a new type of selector
7. Inline and Block elements
8. The span element
9. Styling links
10. Practice Time!
11. Inline-block
12. Styling buttons
13. Specificity basics
14. Specificity - two selectors of equal value
15. Compound Selectors
16. Compound selectors and specificity
17. A better way to name our CSS classes
18. The text properties
19. Font-family and font stacks
20. How to use Google fonts
21. Inheritance
22. Working with, overwriting, and applying inheritance
23. Putting it all together
24. Putting it all together - the CSS
25. Solution to the challenge and module wrap up
▼
Starting to think responsively
1. Starting to think responsively
2. CSS Units
3. CSS Units - Percentage
4. Controlling the width of images
5. min-width and max-width
6. CSS Units - The em unit
7. The problem with ems
8. CSS Units - rems
9. Picking which unit to use
10. ems and rems - an example
11. Flexbox refresher and setting up some HTML
12. Basic styles and setting up the columns
13. Adding the background color
14. Setting the column widths
15. Spacing out the columns
16. Controlling the vertical position of flex items
17. Media Query basics
18. Making out layout responsive with flex-direction
19. flex-direction explained
20. Creating a navigation
21. Using flexbox to start styling our navigation
22. Making our navigation look good
23. Adding the underline
24. A more complicated navigation
25. Making the navigation responsive
26. Taking a look at the rest of the project
27. Setting up the structure
28. Featured article structure
29. The home page - HTML for the recent articles
30. home page - html for the aside
31. Starting the CSS for our page
32. Starting the layout - looking at the big picture
33. Starting to think mobile first
34. Styling the featured article
35. Changing the visual order with flexbox
36. Playing with the title's position, and the downsides of negative margins
37. Styling recent articles for large screens
38. Changing image sizes with object-fit
39. Setting up the widgets and talking breakpoints
40. Using a new pseudo-class to wrap-up the homepage
41. Creating the recent posts page
42. Setting up the About Me page
43. Fixing up some loose ends
44. Important Note: The viewport meta tag
45. Module wrap up
▼
Stepping up our style
1. It's time to step up our style
2. A look at line-height
3. text-transform: uppercase
4. Making things easier to read with letter-spacing
5. A nice color trick with rgba()
6. background-images
7. Background images and the file path (very important note)
8. Controlling our background images
9. BBQ Splash Page - Project Introduction
10. Writing the HTML for the BBQ splash page
11. Starting to style it up - BBQ Splash Page
12. Adding the background image - BBQ Splash Page
13. Changing the order - BBQ Splash Page
14. Styling the main content area - BBQ Splash page
15. Adding the media query - BBQ Splash Page
16. Setting up the typography for large screens - BBQ Splash Page
17. Starting to set things up for large screens - BBQ Splash Page
18. Viewport units
19. Adding viewport units to the BBQ Splash Page
20. Enter box-sizing: border-box
21. Using flexbox to vertically center the main content - BBQ Splash Page
22. Fixing the intro section on both small and large screens - BBQ Splash Page
23. Dealing with very large screens solution #1
24. Dealing with very big screens solution #2
25. The very basics of forms
26. Form basics - form attributes
27. The basics of styling form
28. Adding the form - BBQ Splash Page
29. Starting to style up the form - BBQ Splash Page
30. Making the inputs look good - BBQ Splash Page
31. CSS Gradients
32. Styling the button - BBQ Splash Page
33. Basic transitions
34. Intro to transforms (and a quick word on performance)
35. We can transition more than :hover
36. Border gradients
37. Blending images, colors, and gradients with background-blend-mode
38. Wrap up
▼
Taking flexbox to the next level
1. Taking flexbox to the next level
2. flex-direction, flex-wrap, and flex-flow
3. justify-content and align-items and their relationship to flex-direction
4. Exploring align-content
5. flex-grow and flex-shrink explained
6. flex-basis
7. The flex shorthand property
8. Aligning individual elements with align-self
9. Margin auto and flexbox
10. Building a card component with flexbox - Introduction
11. Building a card component with flexbox - The markup
12. Building a card component with flexbox - Typography
13. Building a card component with flexbox - Mobile layout
14. Building a card component with flexbox - Large screens part one
15. Building a card component with flexbox - Large screens part two
16. Centering something on the screen with flexbox
17. Module wrap-up
▼
CSS Grid: The ultimate layout tool
1. Introduction to CSS Grid
2. Setting up a basic grid
3. Placing items on the grid
4. grid-row and grid-column shorthands
5. Spanning columns
6. Some similarities to flexbox
7. Using grid for our card component
8. The grid-gap property
9. Adding the gap to our card
10. The implicit and explicit grid
11. Exploring grid areas
12. grid-areas and media queries
13. minmax()
14. the fr unit
15. minmax() and the fr unit
16. Putting grid to use - part 1
17. Putting grid to use - part 2
18. repeat()
19. auto-fit and auto-fill
▼
Taking it to the next level
1. Taking it to the next level
2. Analyzing the layouts
3. Starting work on the homepage
4. The HTML for the homepage
5. The first lines of CSS you should always write
6. Setting up our grid for small screens
7. Continuing the hero area
8. The "info" section
9. Setting up the footer
10. Using Font Awesome for our icons
11. Wrapping up the footer
12. Setting up the grid, and hero, for larger screens
13. Setting up the rest of the page for larger screens
14. Starting to style our navigation
15. Setting up our navigation for small screens with positioning
16. Making the close button
17. Creating the "open" state and adding JavaScript to close our navigation
18. Adding the open button to our navigation
19. 18 - Styling the navigation for large screens
20. Fixing up the navigation and hero area
21. Creating the second page
22. Styling the about page
23. Exploring box-shadows to get the effect on our images
24. Using pseudo-elements to add the yellow lines
25. Adding the yellow bar to our titles
26. Creating the contact page
27. Styling the contact form
28. Styling the contact form for larger screens
29. The loose ends
30. You did it!
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
BBQ Splash page
A beautiful and responsive landing page to introduce you to basic concepts
The simple life blog
Learn how to handle text and typography by building a neat-loooking blog.
A marketing agency website
This company website will take your CSS skills to a professional level.
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.
Meet your teacher
Kevin Powell
Hi, Im Kevin. I love to teach people how to make the web and how to make it look good while theyre at it. Over 140,000 people follow my tutorials on YouTube, and I also work full-time at a college teaching web development.
Follow me on twitterWhy 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.
