Learn Responsive Web Design

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

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