Intro To Responsive Website Design – HTML & CSS Tutorial

This tutorial teaches you to develop responsive sites from scratch. It belongs of The Responsive Website Design Bootcamp at Scrimba: https://scrimba.com/g/gresponsive

This 4-hour tutorial stands totally on its own legs. It begins with discussing the core principles required to begin believing responsively, and after that it takes you through every action in constructing a professional-level responsive site.

The instructor is the dazzling Kevin Powell, who’s widely known for his videos on HTML and CSS here on YouTube. You can have a look at his channel here: https://www.youtube.com/channel/UCJZv4d5rbIKd4QHMPkcABCw

⭐ Course material ⭐
⌨ (00: 00: 00) Introduction
⌨ (00: 02: 59) 1. Beginning to believe responsively
⌨ (00: 06: 01) 2. CSS Systems
⌨ (00: 09: 16) 3. CSS Systems – Portion
⌨ (00: 15: 14) 4. Managing the width of images
⌨ (00: 20: 05) 5. min-width and max-width
⌨ (00: 22: 54) 6. CSS Systems – The em system
⌨ (00: 28: 25) 7. The issue with ems
⌨ (00: 30: 58) 8. The Option: Rapid Eye Movements
⌨ (00: 35: 46) 9. Choosing which system to utilize
⌨ (00: 39: 18)10 ems and rapid eye movements – an example
⌨ (00: 47: 10)11 Flexbox refresher and establishing some HTML
⌨ (00: 55: 02)12 Standard Designs and establishing the columns
⌨ (01: 02: 09)13 Including the background color
⌨ (01: 06: 21)14 Setting the column widths
⌨ (01: 10: 00)15 Spacing out the columns
⌨ (01: 14: 27)16 Managing the vertical position of flex products
⌨ (01: 19: 42)17 Media Question essentials
⌨ (01: 29: 50)18 Constructing out design responsive with flex-direction
⌨ (01: 36: 45)19 flex-direction described
⌨ (01: 39: 54)20 Developing a navigation
⌨ (01: 44: 40)21 Utilizing flexbox to begin styling our navigation
⌨ (01: 52: 19)22 Constructing out navigation look great
⌨ (01: 59: 38)23 Including the highlight
⌨ (02: 03: 40)24 A more complex navigation
⌨ (02: 10: 25)25 Making the navigation responsive
⌨ (02: 17: 20)26 Having a look at the remainder of the job
⌨ (02: 21: 34)27 Establishing the structure
⌨ (02: 29: 59)28 Included post structure
⌨ (02: 35: 07)29 The web page – HTML for the current posts
⌨ (02: 37: 39)30 Web Page – HTML for the aside
⌨ (02: 43: 45)31 Beginning the CSS for our page
⌨ (02: 59: 15)32 Beginning the design – taking a look at the huge photo
⌨ (03: 07: 48)33 Beginning to believe mobile very first
⌨ (03: 10: 37)34 Styling the highlighted post
⌨ (03: 17: 03)35 Altering the visual order with flex box
⌨ (03: 22: 19)36 Having fun with the title’s position, and the drawbacks of unfavorable margins
⌨ (03: 27: 05)37 Altering the visual order with flex box
⌨ (03: 31: 00)38 Styling current posts for big screens
⌨ (03: 38: 50)39 Establishing the widgets and talking breakpoints
⌨ (03: 45: 41)40 Utilizing a brand-new pseudo-class to wrap-up the homepage
⌨ (03: 53: 12)41 Developing the current posts page
⌨ (03: 56: 39)42 Establishing the About Me page
⌨ (04: 00: 54)43 Sprucing up some loose ends
⌨ (04: 05: 27)44 Crucial Note. The viewport meta tag
⌨ (04: 09: 10)45 Module conclude
⌨ (04: 12: 24) Outro

Find out to code free of charge and get a designer task: https://www.freecodecamp.org

Check out numerous short articles on programs: https://medium.freecodecamp.org

And subscribe for brand-new videos on innovation every day: https://youtube.com/subscription_center?add_user=freecodecamp

Leave a Reply

Your email address will not be published. Required fields are marked *