Introduction To Responsive Web Design - HTML & CSS Tutorial

Channel:
United States freeCodeCamp.org
Subscribers:
10,900,000
Published on ● Video Link: https://www.youtube.com/watch?v=srvUrASNj0s


Duration: 4:11:04
1,116,006 views
28,930

This tutorial teaches you to build responsive websites from scratch. It’s a part of The Responsive Web Design Bootcamp at Scrimba: https://scrimba.com/g/gresponsive

However, this 4-hour tutorial stands fully on its own legs. It starts with explaining the core concepts needed to start thinking responsively, and then it takes you through every single step in building a professional-level responsive website.

The teacher is the brilliant Kevin Powell, who’s well-known for his videos on HTML and CSS here on YouTube. You can check out his channel here: https://www.youtube.com/channel/UCJZv4d5rbIKd4QHMPkcABCw

⭐️ Course content ⭐️
⌨️ (00:00:00) Intro
⌨️ (00:02:59) 1. Starting to think responsively
⌨️ (00:06:01) 2. CSS Units
⌨️ (00:09:16) 3. CSS Units - Percentage
⌨️ (00:15:14) 4. Controlling the width of images
⌨️ (00:20:05) 5. min-width and max-width
⌨️ (00:22:54) 6. CSS Units - The em unit
⌨️ (00:28:25) 7. The problem with ems
⌨️ (00:30:58) 8. The Solution: Rems
⌨️ (00:35:46) 9. Picking which unit to use
⌨️ (00:39:18) 10. ems and rems - an example
⌨️ (00:47:10) 11. Flexbox refresher and setting up some HTML
⌨️ (00:55:02) 12. Basic Styles and setting up the columns
⌨️ (01:02:09) 13. Adding the background color
⌨️ (01:06:21) 14. Setting the column widths
⌨️ (01:10:00) 15. Spacing out the columns
⌨️ (01:14:27) 16. Controlling the vertical position of flex items
⌨️ (01:19:42) 17. Media Query basics
⌨️ (01:29:50) 18. Making out layout responsive with flex-direction
⌨️ (01:36:45) 19. flex-direction explained
⌨️ (01:39:54) 20. Creating a navigation
⌨️ (01:44:40) 21. Using flexbox to start styling our navigation
⌨️ (01:52:19) 22. Making out navigation look good
⌨️ (01:59:38) 23. Adding the underline
⌨️ (02:03:40) 24. A more complicated navigation
⌨️ (02:10:25) 25. Making the navigation responsive
⌨️ (02:17:20) 26. Taking a look at the rest of the project
⌨️ (02:21:34) 27. Setting up the structure
⌨️ (02:29:59) 28. Featured article structure
⌨️ (02:35:07) 29. The home page - HTML for the recent articles
⌨️ (02:37:39) 30. Home Page - HTML for the aside
⌨️ (02:43:45) 31. Starting the CSS for our page
⌨️ (02:59:15) 32. Starting the layout - looking at the big picture
⌨️ (03:07:48) 33. Starting to think mobile first
⌨️ (03:10:37) 34. Styling the featured article
⌨️ (03:17:03) 35. Changing the visual order with flex box
⌨️ (03:22:19) 36. Playing with the title’s position, and the downsides of negative margins
⌨️ (03:27:05) 37. Changing the visual order with flex box
⌨️ (03:31:00) 38. Styling recent articles for large screens
⌨️ (03:38:50) 39. Setting up the widgets and talking breakpoints
⌨️ (03:45:41) 40. Using a new pseudo-class to wrap-up the homepage
⌨️ (03:53:12) 41. Creating the recent posts page
⌨️ (03:56:39) 42. Setting up the About Me page
⌨️ (04:00:54) 43. Fixing up some loose ends
⌨️ (04:05:27) 44. Important Note. The viewport meta tag
⌨️ (04:09:10) 45. Module wrap up
⌨️ (04:12:24) Outro

--

Learn to code for free and get a developer job: https://www.freecodecamp.org

Read hundreds of articles on programming: https://medium.freecodecamp.org



Other Videos By freeCodeCamp.org


2019-10-24AWS Certified Cloud Practitioner Training 2020 - Full Course
2019-10-22Pygame Tutorial for Beginners - Python Game Development Course
2019-10-16CSS Tutorial - Zero to Hero (Complete Course)
2019-10-14Learn Bootstrap by creating a custom admin theme - Intermediate Tutorial
2019-10-09Algorithms Course - Graph Theory Tutorial from a Google Engineer
2019-10-07Build 5 Dapps on the Ethereum Blockchain - Beginner Tutorial
2019-10-03Netlify Tutorial - How to build and deploy websites using Netlify
2019-10-01React and APIs - Full Tutorial - Hacker News API Application
2019-09-26TensorFlow 2.0 Crash Course
2019-09-19Data Structures Easy to Advanced Course - Full Tutorial from a Google Engineer
2019-09-18Introduction To Responsive Web Design - HTML & CSS Tutorial
2019-09-09Sass Tutorial for Beginners - CSS With Superpowers
2019-09-06CEO can code? Watch Netlify's CEO code a Sudoku app from scratch in a bar on a Saturday night
2019-09-04How to start a coding YouTube channel (with tips from a bunch of successful creators!)
2019-09-03Spring Boot Tutorial for Beginners (Java Framework)
2019-08-29jamovi for Data Analysis - Full Tutorial
2019-08-27Intermediate React Tutorial - Todoist Clone (with Firebase, Custom Hooks, SCSS, React Testing)
2019-08-21Scratch Tutorial for Beginners - Make a Flappy Bird Game
2019-08-19How to Build an E-commerce Website with Django and Python
2019-08-16Docker Tutorial for Beginners - A Full DevOps Course on How to Run Applications in Containers
2019-08-14How to Build Tetris in React - GameDev Tutorial (with React Hooks!)


Tags:
html
css
responsive web design
web design tutorial
html tutorial
css tutorial
web design course
responsive web development
responsive web sites