SpaceX Website Clone - HTML, CSS & JavaScript - Best Webhosting

ULTRAFAST, CHEAP, SCALABLE AND RELIABLE! WE STRONGLY RECOMMEND ACCU WEB HOSTING COMPANY

Watch Web Development Traversy Media Video: 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)

Published: Sunday, September 25, 2022 11:08 AM
Category: Web Development Traversy Media

19 Views

Related Videos

HTML & CSS Mobile UI Layout | CVS Clone

by Best Webhosting Added 4 years ago 64 Views / 0 Likes

In this project we will use HTML & CSS to build a mobile first layout. We will build a clone of the CVS app landing page and learn about the grid, flex, media queries and more. Sponsor: Linode Hosting https://linode.com/traversy Code: https://codepen.io/bradtraversy/full/RwNoRVm • Become a Patron: Show support & get perks! http://www.patreon.com/traversymedia Website & Udemy Course Links: https://www.traversymedia.com Follow Traversy Media: https://ww
Hulu Webpage Clone | HTML & CSS

by Best Webhosting Added 1 year ago 31 Views / 0 Likes

Create the Hulu homepage with HTML, CSS and a bit of JavaScript. Sponsor: Hostinger (10% off with TRAVERSYMEDIA) https://www.hostinger.com/traversymedia Code: https://github.com/bradtraversy/hulu-webpage-clone Modern HTML & CSS From The Beginning Course: https://www.udemy.com/course/modern-html-css-from-the-beginning/?referralCode=EB0470C43F3C3E9AA306 Timestamps: 0:00 -Intro 2:41 - Base & Header HTML 7:04 - Base Styles 10:04 - Header CSS 19:38 - Media
Whatsapp UI Clone in Html and CSS | Chat App Design

by Best Webhosting Added 1 year ago 17 Views / 0 Likes

Click For More : https://www.youtube.com/c/OnlineTutorials4Designers/videos?sub_confirmation=1 ------------------ Enroll My Course : Next Level CSS Animation and Hover Effects https://www.udemy.com/course/css-hover-animation-effects-from-beginners-to-expert/?referralCode=90A9FFA7990A4491CF8D CSS Infinity Course : https://www.udemy.com/course/infinity-creative-css-animation-course/?referralCode=7AC20462B284B24ECCFF Another Course : Build Complete Real
Pluralsight Login Page Clone - HTML & CSS

by Best Webhosting Added 4 years ago 95 Views / 0 Likes

In this video we will be creating a clone of the Pluralsight login page with HTML5 and CSS3 including Flexbox and media queries for responsiveness. Sponsor: DevMountain Bootcamp https://goo.gl/6q0dEa Code: https://codepen.io/bradtraversy/pen/MzyJqw Flexbox in 20 Minutes: https://www.youtube.com/watch?v=JJSoEo8JSnc • Become a Patron: Show support & get perks! http://www.patreon.com/traversymedia Website & Udemy Courses http://www.traversymedia.com Foll
Whatsapp UI Clone in Html and CSS | Chat App Design #shorts

by Best Webhosting Added 1 year ago 12 Views / 0 Likes

Whatsapp UI Clone in Html and CSS | Chat App Design Tutorial : https://youtu.be/qHFFFHMTC4U ------------------ Click For More : https://www.youtube.com/c/OnlineTutorials4Designers/videos?sub_confirmation=1 ------------------ Enroll My Course : Next Level CSS Animation and Hover Effects https://www.udemy.com/course/css-hover-animation-effects-from-beginners-to-expert/?referralCode=90A9FFA7990A4491CF8D CSS Infinity Course : https://www.udemy.com/course/
Build a Netflix Landing Page Clone with HTML, CSS & JS

by Best Webhosting Added 4 years ago 81 Views / 0 Likes

In this video, we will re-create the Netflix landing page using HTML, CSS and a bit of JavaScript for the tabs. We will use modern CSS3+ techniques like Grid, Flex, overlays, shadows, etc Code: https://codepen.io/bradtraversy/pen/yWPONg Modern HTML & CSS Udemy Course Promo: https://www.udemy.com/course/modern-html-css-from-the-beginning/?couponCode=TRAVERSYMEDIA Sponsor: DevMountain Bootcamp https://goo.gl/6q0dEa • Become a Patron: Show support & get
How to Make Website using Html & CSS Step by Step | Animated Website Html CSS & Javascript

by Best Webhosting Added 3 years ago 26 Views / 0 Likes

Enroll My Course : Next Level CSS Animation and Hover Effects https://www.udemy.com/course/css-hover-animation-effects-from-beginners-to-expert/?referralCode=90A9FFA7990A4491CF8D Another Course : Build Complete Real World Responsive Websites from Scratch https://www.udemy.com/course/complete-responsive-website-design-from-scratch/?referralCode=F1DFAF1715AF6CE5780E ------------------ Join Our Channel Membership And Get Source Code of My New Video's Eve
How to Make Responsive Website Design using Html CSS & Javascript | CSS Animated Website | Animation

by Best Webhosting Added 3 years ago 28 Views / 0 Likes

Enroll My Course : Next Level CSS Animation and Hover Effects https://www.udemy.com/course/css-hover-animation-effects-from-beginners-to-expert/?referralCode=90A9FFA7990A4491CF8D Another Course : Build Complete Real World Responsive Websites from Scratch https://www.udemy.com/course/complete-responsive-website-design-from-scratch/?referralCode=F1DFAF1715AF6CE5780E ------------------ Join Our Channel Membership And Get Source Code of My New Video's Eve
Complete Responsive Website from Scratch using Html CSS & Javascript | Mobile Friendly Website

by Best Webhosting Added 3 years ago 42 Views / 0 Likes

Enroll My Course : Next Level CSS Animation and Hover Effects https://www.udemy.com/course/css-hover-animation-effects-from-beginners-to-expert/?referralCode=90A9FFA7990A4491CF8D Another Course : Build Complete Real World Responsive Websites from Scratch https://www.udemy.com/course/complete-responsive-website-design-from-scratch/?referralCode=F1DFAF1715AF6CE5780E ------------------ Join Our Channel Membership And Get Source Code of My New Video's Eve
Netflix Landing Page Website | Responsive Website Design using Html CSS & Javascript

by Best Webhosting Added 3 years ago 28 Views / 0 Likes

Enroll My Course : Next Level CSS Animation and Hover Effects https://www.udemy.com/course/css-hover-animation-effects-from-beginners-to-expert/?referralCode=90A9FFA7990A4491CF8D Another Course : Build Complete Real World Responsive Websites from Scratch https://www.udemy.com/course/complete-responsive-website-design-from-scratch/?referralCode=F1DFAF1715AF6CE5780E ------------------ Join Our Channel Membership And Get Source Code of My New Video's Eve
Responsive Personal Portfolio Website using HTML CSS & JavaScript | Complete Website from Scratch

by Best Webhosting Added 3 years ago 29 Views / 0 Likes

Enroll My Course : Next Level CSS Animation and Hover Effects https://www.udemy.com/course/css-hover-animation-effects-from-beginners-to-expert/?referralCode=90A9FFA7990A4491CF8D Another Course : Build Complete Real World Responsive Websites from Scratch https://www.udemy.com/course/complete-responsive-website-design-from-scratch/?referralCode=F1DFAF1715AF6CE5780E ------------------ Join Our Channel Membership And Get Source Code of My New Video's Eve
How to Make Website using Html CSS & Javascript | Responsive Travel Website with Video Slider

by Best Webhosting Added 3 years ago 27 Views / 0 Likes

Enroll My Course : Next Level CSS Animation and Hover Effects https://www.udemy.com/course/css-hover-animation-effects-from-beginners-to-expert/?referralCode=90A9FFA7990A4491CF8D Another Course : Build Complete Real World Responsive Websites from Scratch https://www.udemy.com/course/complete-responsive-website-design-from-scratch/?referralCode=F1DFAF1715AF6CE5780E ------------------ Join Our Channel Membership And Get Source Code of My New Video's Eve