Responsive 4-column layout with flexbox | Build a responsive website from scratch (Part 5) скачать в хорошем качестве

Responsive 4-column layout with flexbox | Build a responsive website from scratch (Part 5)

🔥 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... This is Part 5 of a series building a responsive website from scratch using HTML, CSS (SCSS) and vanilla JavaScript! In this video we're building a 4-column responsive layout for the Features section of the Frontend Mentor Easybank landing page. 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/ 0:00 - Intro 0:27 - Look at the design and plan approach 1:15 - Start writing HTML for feature blocks 3:49 - Start writing SCSS styles to use flexbox for multi-columns 6:54 - Adding space between flex child items 10:32 - Adjusting the flex layout for tablet 13:50 - Styling the icons and text 18:04 - Adding global text styles for headlines 20:30 - Adjust intro section width 25:58 - Style the feature card icons 27:54 - Style feature card titles 29:54 - Style feature card descriptions 31:49 - Add padding in the "container" helper class 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