Responsive hero | Build a responsive website from scratch (Part 4) скачать в хорошем качестве

Responsive hero | Build a responsive website from scratch (Part 4)

🔥 My course: Responsive Design for Beginners! https://coder-coder.com/responsive/ 💻 Become a full-stack web dev with Zero to Mastery: https://academy.zerotomastery.io/a/af... In this video you can watch me build a responsive website from scratch using HTML, CSS (SCSS) and vanilla JavaScript! This video covers building the responsive hero with background image. Full playlist here:    • Build a website from scratch - Frontend Me...   Challenge on Frontend Mentor: https://www.frontendmentor.io/challen... Source code on GitHub: https://github.com/thecodercoder/fem-... See the final website: https://codercoder-easybank.pages.dev/ SETUP 0:00 - Intro 0:32 - Look at design and image files we'll be using 1:42 - Start writing HTML markup for the hero 04:36 - Talking about the approach to coding the hero image 05:51 - SCSS file setup for the hero image MOBILE STYLES 06:37 - Writing mobile styles for hero background image SVG 08:50 - ⚡ Tip: There's usually no one perfect way to build something 12:07 - Size and position the phone background image for mobile 13:51 - Styling the hero text section 19:23 - Using helper classes to set top/bottom and left/right spacing for sections 25:15 - ⚡ Tip: You don't have to write styles perfectly the first time DESKTOP STYLES 25:34 - Writing desktop styles for hero using flexbox 29:53 - Adjusting the hero text and image sections 33:40 - ⚡ Tip: Creating multiple helper classes to control the padding for each side HERO IMAGE TWEAKS 38:57 - Sizing and positioning the SVG background image 46:33 - 😭 CSS IS HARD, don't let anyone tell you it's easy 47:22 - Work on positioning the phones 47:33 - ⚡ Tip: Don't try to work on multiple elements simultaneously-- focus on one thing at a time 48:10 - Tweaking the background position of phone image 51:54 - Fix tablet styles for the hero section 55:29 - ⚡ Tip: You'll usually only get a mobile and desktop design, so use a hybrid for tablet styles _____________________________________ SUPPORT THE CHANNEL ⭐ Join channel members and get perks:    / @thecodercoder   👏🏽 Hit the THANKS button in any video! 🎨 Get my VS Code theme: https://marketplace.visualstudio.com/... WANT TO LEARN WEB DEV? Check out my courses: 🌟 Responsive Design for Beginners: https://coder-coder.com/responsive/ 🌟 Gulp for Beginners: https://coder-coder.com/gulp-course/ RECOMMENDATIONS ⌨ My keyboard-- get 10% off with code THECODERCODER -- https://vissles.com/?ref=mu96kxst5w 💻 Other gear -- https://www.amazon.com/shop/thecoderc... 📚 My Favorite Books -- https://coder-coder.com/best-web-deve... 📺 My Favorite Courses -- https://coder-coder.com/best-web-deve... 🔽 FOLLOW CODER CODER Blog -- https://coder-coder.com/ Twitter --   / thecodercoder   Instagram --   / thecodercoder   #webdevelopment #coding #programming