Coding a landing page website with HTML & CSS
In this live coding stream, we built a website from scratch, using a free template from Frontend Mentor!
Video starts at 3:09!
Huddle landing page from Frontend Mentor:
https://www.frontendmentor.io/challen...
_____________________________________
TABLE OF CONTENTS:
3:09 - Explaining the template from FrontendMentor.io
4:18 - Getting the project files
6:22 - Setting up the files, explaining Sass workflow
17:25 - Writing the different sections of the website in HTML markup
27:45 - Explaining CSS box-sizing
29:10 - Global styles
34:10 - Adding Google fonts
41:40 - Header logo, method 1 (background-image)
48:56 - Header logo, method 2 (img tag)
49:55 - Body background SVG image and padding
58:41 - CSS grid for main content layout (image on left, text on right)
1:09:48 - Main content text
1:22:30 - "Register" CTA button w/ active state
1:48:49 - Social icons using Font Awesome
2:09:51 - Polishing mobile styles
_____________________________________
Follow Coder Coder:
Blog: https://coder-coder.com/
Instagram: / thecodercoder
_____________________________________
#webdevelopment #html #css #livecoding #learntocode