Become A VS Code SuperHero Today: https://vsCodeHero.com
Join my Discord developer community: https://discord.gg/A9CnsVzzkZ

In this video, we are going to create a fancy hamburger menu button. You may have seen my previous hamburger menu video. If not, check that one out too. (https://youtu.be/dIyVTjJAkLw)

This design was inspired by frontendjoe and ipek.uiux. They created this initially using React but I’m going to refactor it using just HTML, CSS, and JavaScript.

They have tons of great design and development related content on Instagram. So go check them out:
frontendjoe: https://www.instagram.com/frontendjoe/
ipek.uiux: https://www.instagram.com/ipek.uiux/

Source Code: https://codepen.io/codeSTACKr/pen/jOMKmyX
_____________________________________
Get FREE AI-powered code completions from Kite: https://www.kite.com/get-kite/?utm_medium=referral&utm_source=youtube&utm_campaign=codestackr&utm_content=description-only
FREE 7-Day trial at Treehouse: https://treehouse.7eer.net/codeSTACKr
_____________________________________

Tools I use:
codeSTACKr Theme: https://marketplace.visualstudio.com/items?itemName=codestackr.codestackr-theme
STACKr Code Font (Exclusive to my VS Code Course – https://vsCodeHero.com)
SuperHero Extension Pack: https://marketplace.visualstudio.com/items?itemName=codeSTACKr.superhero-extensions
_____________________________________

Timestamps
00:00 – Intro
00:37 – HTML
01:19 – Initial CSS
05:32 – CSS Custom Properties Refactor
07:41 – Single Source of Truth Refactor
_____________________________________

Show support!
PayPal: https://paypal.me/codeSTACKr
_____________________________________

Watch Next:
Playlist: Web Development For Beginners – https://www.youtube.com/watch?v=Ez4yHS2dsN8&list=PLkwxH9e_vrAJ0WbEsFA9W3I1W-g_BTsbt
_____________________________________

Connect With Me:
Website: https://www.codestackr.com
Twitter: https://twitter.com/codeSTACKr
Instagram: https://instagram.com/codeSTACKr
Facebook: https://facebook.com/codeSTACKr
_____________________________________

** Affiliate Disclaimer: Some of the above links may be affiliate links, which may generate me a sales commission at no additional cost to you.

#codeSTACKr #CSS #learntocode

source