Responsive Hero - Build a Responsive Website from Scratch

Responsive Hero - Build a Responsive Website from Scratch

Coder Coder via YouTube Direct link

- Intro

1 of 21

1 of 21

- Intro

Class Central Classrooms beta

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

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.