Responsive Hero - Build a Responsive Website from Scratch

Overview

Learn to build a responsive website from scratch using HTML, CSS (SCSS), and vanilla JavaScript. The course covers creating a responsive hero section with background image. Students will gain skills in writing HTML markup, styling with CSS, using SCSS for styling, implementing mobile and desktop styles, and utilizing flexbox for layout. The teaching method involves a hands-on approach where the instructor demonstrates coding techniques and provides tips throughout the video. This course is intended for beginners in web development who want to enhance their skills in building responsive websites.

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 .