SpaceX Website Clone – HTML, CSS & JavaScript



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):
http://hostinger.com/traversymedia

Github Repo:
https://github.com/bradtraversy/spacex-website

Live Demo:
https://traversydemo.dev

Website & Courses:
https://traversymedia.com

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)

source