Build a responsive website from scratch with HTML & CSS | Part 1: Navigation bar

πŸ”₯ 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!

Get Kite

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

You May Also Like