In this video, we will re-create parts of the SpaceX website including the homepage, menus, and some inner pages. We will create some animations and use JavaScript to manipulate the DOM.
Sponsor: Hostinger (10% off):
Github Repo:
Live Demo:
Website & Courses:
Timestamps:
0:00 - Intro
0:37 - Hostinger Sponsor
1:39 - Project Demo
4:38 - Header/Navbar HTML & CSS
17:23 - Menu Underline Animation
22:52 - Homepage Section A
30:22 - Button & Hover Animation
38:29 - Fade In & Up Animation
44:40 - Scroll Arrow Animation
49:29 - Remaining Homepage Sections
53:30 - Footer
58:29 - Media Queries
1:04:25 - Hamburger Icon & Open Animation
1:12:22 - JavaScript For Open Toggle
1:14:30 - Dark Overlay
1:18:32 - Remove Scroll On Open
1:19:40 - Side Menu HTML & CSS
1:33:00 - Inner Page & Fade Animation
1:42:20 - Stats Counter HTML & CSS
1:46:07 - Stat Counter JavaScript
2:00:00 - Inner Page Responsiveness
2:02:40 - Remaining Inner Pages
2:08:27 - Deploy To Hostinger (Using Git)
1 view
0
0
2 months ago 08:37:35 1
Elon Musk: Neuralink and the Future of Humanity | Lex Fridman Podcast #438
2 months ago 00:00:35 1
Close-Up of #SpaceX #Starship’s Booster Landing Burn & Epic Catch from a 360° camera! 🚀🤯 #IFT5
2 months ago 00:21:32 1
From Today To The Year 3000: Let’s Dive Into The Future!
2 months ago 00:04:46 1
SHOCKING Elon Musk BANNED From UK Investment By Starmer 👀
2 months ago 02:16:47 1
Elon Musk: War, AI, Aliens, Politics, Physics, Video Games, and Humanity | Lex Fridman Podcast #400