Udemy, Coursera, 2U/edX Face Lawsuits Over Meta Pixel Use

Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

Scrimba

Learn Responsive Web Design

via Scrimba

Go to class Write review

Overview

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

Syllabus

  • 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 our 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. 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!

Reviews

Start your review of Learn Responsive Web Design

Go to class

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Sign up for free
Someone learning on their laptop while sitting on the floor.