🔥 I’m creating a course: Responsive Design for Beginners! https://coder-coder.com/responsive/
🪁 Code faster with Kite, AI-powered autocomplete that integrates into VS Code!
SUPPORT THE CHANNEL
👏🏽 Hit the Applaud button in any video!
🏆 GitHub sponsors: https://github.com/sponsors/thecodercoder
___________________________________________________
This is first in a series on how to build a responsive website from scratch with HTML & CSS. This video, Part 1 covers setting up the Frontend Mentor project and building the desktop navigation bar.
0:00 – Intro
0:25 – Setting up Frontend Mentor files and using Adobe XD for the design
2:09 – Creating SCSS and JavaScript files
5:31 – Using the Live Sass Compiler VS Code extension
7:36 – Studying the header navigation in Adobe XD
8:00 – Writing the HTML markup for the header
9:32 – Creating styles for the navigation using helper classes
12:06 – Creating header styles
13:46 – Creating Sass variables for colors
14:20 – Styling navigation bar spacing, hamburger menu, and logos
17:56 – Creating and styling header links
20:29 – Creating Sass variables for font sizes
21:28 – Styling header link text
22:30 – Creating CTA button
24:18 – Adding linear-gradient to CTA button
25:57 – Styling the CTA button text
28:38 – Creating helper classes to hide/show content on desktop or mobile
29:16 – Creating a Sass mixin for breakpoints to use in the helper classes
36:40 – Tweaking header link and CTA button styles
39:22 – Tweaking logo styles
40:34 – Adding active/hover states and transitions
Watch the whole series here: https://www.youtube.com/playlist?list=PLUWqFDiirlsuYscECzks6zIZWr_Cfcx9k
Easybank landing page from Frontend Mentor: https://www.frontendmentor.io/challenges/easybank-landing-page-WaUhkoDN
My source code on GitHub: https://github.com/thecodercoder/fem-easybank
_____________________________________
WANT TO LEARN WEB DEV?
Learn to code with a free 7-day trial to Team Treehouse:
https://treehouse.7eer.net/c/1296848/228915/3944
Check out my courses:
Responsive Design for Beginners (in progress, sign up for updates!) — https://coder-coder.com/responsive-design-beginners/
Gulp for Beginners — https://coder-coder.com/gulp-course/
_____________________________________
BEST GEAR & BOOKS FOR CODING
My Gear — https://www.amazon.com/shop/thecodercoder?listId=1LMCKGUTMVYXD
My Favorite Books — https://coder-coder.com/best-web-development-books/
_____________________________________
BLOG — https://coder-coder.com/
INSTAGRAM — https://www.instagram.com/thecodercoder
TWITTER — https://twitter.com/thecodercoder
_____________________________________
#build #website #html #css #webdevelopment
