Hellow guys, Welcome to my website, and you are watching How to build a simple responsive layout with CSS grid. and this vIdeo is uploaded by Coder Coder at 2020-04-15T07:00:08-07:00. We are pramote this video only for entertainment and educational perpose only. So, I hop you like our website.
| Name | How to build a simple responsive layout with CSS grid |
| Video Uploader | Video From Coder Coder |
| Upload Date | This Video Uploaded At 15-04-2020 14:00:08 |
| Video Discription | π₯ 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/aff_338z7xnj/external?affcode=441520_ti97uk6b I'll show you how to build a simple two-column responsive layout, and explain the basic properties of how CSS grid works. 0:00 - Intro 0:18 - Setup project files 3:12 - Using Live Sass VS Code extension 6:49 - Adding gradient backgrounds, tweaking styles 8:18 - Creating the grid template, using the "fr" unit 10:44 - Using Firefox grid inspector 13:30 - Changing the grid template styles 13:48 - grid-template-columns and repeat() function 14:15 - grid-template-rows 15:04 - Placing grid child items using grid-column and grid-row 18:38 - Building the two-column layout Source code on Codepen -- https://codepen.io/thecodercoder/pen/xxwGrqK Music: StreamBeats by Harris Heller -- https://www.youtube.com/channel/UCQ6hCusHlsIDXqoTbbTHSUQ _____________________________________ SUPPORT THE CHANNEL β Join channel members and get perks: https://www.youtube.com/channel/UCzNf0liwUzMN6_pixbQlMhQ/join ππ½ Hit the THANKS button in any video! π¨ Get my VS Code theme: https://marketplace.visualstudio.com/items?itemName=CoderCoder.codercoder-dark-theme 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/thecodercoder?listId=1LMCKGUTMVYXD π My Favorite Books -- https://coder-coder.com/best-web-development-books/ πΊ My Favorite Courses -- https://coder-coder.com/best-web-development-courses/ π½ FOLLOW CODER CODER Blog -- https://coder-coder.com/ Twitter -- https://twitter.com/thecodercoder Instagram -- https://www.instagram.com/thecodercoder #webdevelopment #coding #programming |
| Category | Science & Technology |
| Tags | web development | html | css | learntocode |
