Responsive Hero - Build a Responsive Website from Scratch

Overview

Save Big on Coursera Plus. 7,000+ courses at $160 off. Limited Time Only!

Grab it

Learn to build a responsive hero section for a website from scratch using HTML, CSS (SCSS), and vanilla JavaScript in this comprehensive tutorial video. Explore the process of creating a responsive design, starting with mobile styles and progressing to desktop layouts. Master techniques for positioning background images, styling text sections, and implementing flexbox for desktop views. Gain valuable insights on creating helper classes, tackling CSS challenges, and optimizing designs for various screen sizes. Pick up practical tips on focusing on one element at a time and adapting designs for tablet views. Perfect for web developers looking to enhance their responsive design skills and create visually appealing hero sections.

Syllabus

- Intro.
- 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 .