Introduction To Responsive Web Design - HTML & CSS Tutorial
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
And subscribe for new videos on technology every day: https://youtube.com/subscription_center?add_user=freecodecamp
Видео Introduction To Responsive Web Design - HTML & CSS Tutorial канала freeCodeCamp.org
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
And subscribe for new videos on technology every day: https://youtube.com/subscription_center?add_user=freecodecamp
Видео Introduction To Responsive Web Design - HTML & CSS Tutorial канала freeCodeCamp.org
Показать
Комментарии отсутствуют
Информация о видео
Другие видео канала
5 simple tips to making responsive layouts the easy wayLearn HTML5 and CSS3 From Scratch - Full CourseCSS Grid CourseResponsive design made easyThese Personal Websites are just WOW...Top CSS & Javascript Animation & Hover Effects | January 2021Responsive Web Design | 10 BasicsJavaScript Programming - Full CourseBuild a Responsive Website | HTML, CSS Grid, Flexbox & MoreNavbar CSS Tutorial: 3 Ways to Create a Navigation Bar with FlexboxCSS Tutorial - Zero to Hero (Complete Course)Learn CSS Media Query In 7 MinutesBuild and deploy a portfolio website [Full Tutorial Course]HTML Full Course - Build a Website TutorialHow to Make a Landing Page using HTML, SCSS, and JavaScript - Full Course3 Principles for better Web Design: Navigation, Hierarchy & ColorHTML5 & CSS Development: Learn How to Build a Professional Website | Udemy, Jordan HudgensCSS Full Course - Includes Flexbox and CSS Grid TutorialsBuild A Responsive Website With HTML & CSS Tutorial