Completed
- Writing mobile styles for hero background image SVG
Class Central Classrooms beta
YouTube videos curated by Class Central.
Classroom Contents
Responsive Hero - Build a Responsive Website from Scratch
Automatically move to the next video in the Classroom when playback concludes
- 1 - Intro
- 2 - Look at design and image files we'll be using
- 3 - Start writing HTML markup for the hero
- 4 - Talking about the approach to coding the hero image
- 5 - SCSS file setup for the hero image
- 6 - Writing mobile styles for hero background image SVG
- 7 - ⚡ Tip: There's usually no one perfect way to build something
- 8 - Size and position the phone background image for mobile
- 9 - Styling the hero text section
- 10 - Using helper classes to set top/bottom and left/right spacing for sections
- 11 - ⚡ Tip: You don't have to write styles perfectly the first time
- 12 - Writing desktop styles for hero using flexbox
- 13 - Adjusting the hero text and image sections
- 14 - ⚡ Tip: Creating multiple helper classes to control the padding for each side
- 15 - Sizing and positioning the SVG background image
- 16 - 😭 CSS IS HARD, don't let anyone tell you it's easy
- 17 - Work on positioning the phones
- 18 - ⚡ Tip: Don't try to work on multiple elements simultaneously-- focus on one thing at a time
- 19 - Tweaking the background position of phone image
- 20 - Fix tablet styles for the hero section
- 21 - ⚡ Tip: You'll usually only get a mobile and desktop design, so use a hybrid for tablet styles
