- Look at design and image files we'll be using.
- Start writing HTML markup for the hero.
- Talking about the approach to coding the hero image.
- SCSS file setup for the hero image.
- Writing mobile styles for hero background image SVG.
- ⚡ Tip: There's usually no one perfect way to build something.
- Size and position the phone background image for mobile.
- Styling the hero text section.
- Using helper classes to set top/bottom and left/right spacing for sections.
- ⚡ Tip: You don't have to write styles perfectly the first time.
- Writing desktop styles for hero using flexbox.
- Adjusting the hero text and image sections.
- ⚡ Tip: Creating multiple helper classes to control the padding for each side.
- Sizing and positioning the SVG background image .
- CSS IS HARD, don't let anyone tell you it's easy.
- Work on positioning the phones.
- ⚡ Tip: Don't try to work on multiple elements simultaneously-- focus on one thing at a time.
- Tweaking the background position of phone image.
- Fix tablet styles for the hero section.
- ⚡ Tip: You'll usually only get a mobile and desktop design, so use a hybrid for tablet styles .
Responsive hero | Build a responsive website from scratch (Part 4)