SpaceX Website Clone - HTML, CSS & JavaScript
HTML-код
- Опубликовано: 31 май 2024
- 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):
hostinger.com/traversymedia
Github Repo:
github.com/bradtraversy/space...
Live Demo:
traversydemo.dev
Website & Courses:
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) 
Наука
I have decided to do another video turning into a React project. Maybe even use something like Strapi for page content
can't wait
Great idea.
Hey Brad. Any plans on redoing the Node API Masterclass, maybe with something like Fastify instead of Express? As always, thanks for the free content.
Maybe you'll use Typescript for this?
Yes!! Please do. Always love your React style projects, or maybe even full stack Next.js with mongoDB!
I made the button as it actually is. Thanks for the tutorial Traversy!
.btn {
position: relative;
display: inline-block;
cursor: pointer;
text-align: center;
min-width: 130px;
padding: 15px 50px;
margin-top: 10px;
border: 2px solid white;
text-transform: uppercase;
overflow: hidden;
font-weight: 400;
}
.btn::before {
position: absolute;
content: "hey";
left: 0;
bottom: 0;
background-color: white;
height: 100%;
width:100%;
transform: scaleY(0);
transform-origin: top;
transition: transform .4s cubic-bezier(0.23, 1, 0.320, 1);
}
.btn:hover::before{
transform: scaleY(1);
transform-origin: bottom;
}
.btn span {
position:relative;
}
.btn:hover span {
color: black;
}
Thank you so much for this code
3 minutes in I already know you're gonna knock it out of the park with this project. Love this channel so much. Truly life-changing. Thanks for sharing your knowledge and experience with us. ❤️
Hey man I just want to say thank you so much for uploading videos like this! A few months back I was struggling to build websites by myself and felt kinda stuck watching endless tutorials and not really taking stuff in properly. The secret I suppose is to take the information from these videos and just build things on your own.
I can now say that I am a lot more independent as a lot of the content you upload has been super informative and whenever I watch I keep having a lot of 'light bulb' moments and something in my head is like ahh that makes total sense now lol.
Anyone that is reading this if you haven't already, I suggest having a go at the free Frontend Mentor or Frontend Practice projects and just working through them on your own, even if you start to feel frustrated and stuck I assure you you'll retain knowledge so much easier by finding stuff out for yourself.
Thanks Traversy for your content, time spent on it. I must say I have learned a lot from your channel and found Web Dev position in IT field and cant stop learning from You. Thanks and happy coding :)
Traversy...this was super sweet...such a smooth tutorial. Even more important was when you acknowledged the tips you got from some of your viewers. Or the fact you had to check the button animation from the SpaceX website because you haven't done it before...and you mentioned that..You could have just stayed quiet but you didn't. Superb! ...Those qualities are rare in this industry.
Thank you so much for these. I know many of us really do appreciate these and learn so much from then. Thank you for all that you do.
Thanks brad, just another amazing clone website with an amazing instructor .
Haven't even watched but I know it's gonna be a banger.keep it up brad
Great video man , thanks a lot, i really like these clone projects. I wish you all the best
Wonderfully made and presented! I really get so much from your videos.
Amazing Sir , i have watched your whole HTML & CSS playlist it gives so much confidence to me as a front end Developer
Helpline 📲📩
QUESTIONS CAN COME IN☝️⬆️ ⬆️....
Nice one Brad. For me I am in love with responsive nav bars. This was super cool for me 🤩🤩🤩🤩🤩
GREAT content as always!! Looking forward to giving this a go later! Thank You!!
Dope clone! Nice video production. Loving your videos...
I liked the video before watching 😅
Knows you will deliver something solid everytime
I get so excited when i see videos like this haha.
i love your courses and im so glad i came across you on udemy
great content as always Brad!
Yes,back to the roots! Great job Brad, I've watched dozens of your HTML/CSS videos and Udemy tutorials yet I am still smiling whenever you upload a video with HTML/CSS tutorial
Thank You Traversy. You are a Legend, I hope you know that!!
Really appreciate your work and unbiased view point share by you out of your heart...
Love it as usual Brad, can you please do more Angular videos? Especially project for beginners?
Wow! It works! The first time i tried it took forever to activate and when I disabled my antivirus it worked like in less than a minute! Thanks bro!
Thanks Brad. You are awesome❤
We love u brad thank you for this
@WhatsApp±1217𝟽𝟻𝟶𝟹𝟹33 Traversy Medi Good day brad my name Jesse I must say I've you've really blessed me with all of your videos I've watched
Thanks man for your wonderful content.
Please continue to build this website, thank you very much
Life changing channel💯❤✅
It wrould be imteresting to see a clone creation like this but with web accessibility in mind!!
Thank You . Learn a lot from bangladesh
Thanks, looks great.
Great course!
great work as always.
do you have any idea of the issue with the scrollbar when the side menu is open? overflow:hidden makes the scrollbar disappear, which changes the position of the hamburger button.
Amazing job, really, can you please continue building this website it is very interesting
Waow, great, great, (great) content. Thanx a lot.
Thank you so much Mr !
Always impressed, done a lot of the clones and always learn something new. Do you use any tools to help you get the logos and images for these clones? Would like to practice by cloning other websites on my own.
Pretty cool, would love to see GSAP with react. There aren’t many videos on RUclips about that
Brad thank you bro
Does anyone understand why .hover box always remains on top of the .btn if you give it a value of 0 or more; ?? I tried giving the .btn a z-index of 50 and the span a z-index of 100 and the .hover element was still on top. The only value that works to make it sit under the span is -1. What goes on here?
Excellent SIR
thank you so much , it worked
This is the best project 👋
Thanks a lot Brad for this. This has to be one of the most challenging project I've made following you. However, I often thought about why and how we're using the position property like why section is positioned as relative and section-inner as relative and not the other way around.
Can anyone please help me with this? Even a reference from where I could read in depth about this will be very much appreciated. Thanks
Keep up the good work, Cheers!
Amazing ♥️
Scaaaaaaaaam scaaaaaaam scaaaaaaam and Use the name or traversy media #traversy media @traversy media
Great video as always! I like going through these clones to see how others go about structuring their projects. Just shy of 2 hours in but I wanted to share the changes I made to the countUp function to account for the larger numbers on spacex now and to slow it down near the end like their counter does:
function countUp() {
counters.forEach((counter) => {
counter.innerText = '0';
let updateTime = 1;
const updateCounter = () => {
// Get count target
const target = +counter.getAttribute('data-target');
// Get current counter value
const currentValue = +counter.innerText;
// Calculate distance between current value and target
const distance = target - currentValue;
// Calculate increment based on distance
let increment = distance / 100;
if (increment < 1) {
increment = 1;
}
if ((currentValue / target) > .97){
updateTime = 100;
}
if (currentValue < target) {
// Round up and set counter value
counter.innerText = `${Math.min(Math.floor(currentValue + increment), target)}`
setTimeout(updateCounter, updateTime);
}
};
updateCounter();
});
}
Brad Sir ,I want to ask one thing that when we scroll up that navbar is going to combined with whole page we can do to ..don't happen this
Can you make a tutorial for GSAP?
PLEASE it would be very useful.
Love your work, keep it up!
nice bro
Disable PostCSS extension and your autocomplete in CSS will work
Hey, what's the theme for your vscode ? It looks amazing !
The hover effect on the menu items is really cool. How does it translate to mobile devices where you cant hover? Does that mess it up? Would you need to redesign it to work on mobiles?
Hi Brad (and everyone else having a problem with the lack of autocompletion in their css), all through the
'PostCSS Language Support' extension - automatic language detection opens css files via this extension, which appears to natively have no autocompletion.
You can manually change PostCss to Css in language detection (in the vs code window, at the bottom, next to the information about port, prettier, etc.)
Helpline 📲📩
QUESTIONS CAN COME IN☝️⬆️ ⬆️...
This should've been sponsored by Elon Musk man 😂 what an amazing walk-through!
Hey Brad
I'm waiting for your react native course
And probably golang course on udemy.
I will pay a million for that😌
Thankyou sir
The video is about 2 hours long and you stepped through all the code, but I'm just curious, how much work did it take you to actually code all this before even getting to the video production part? You clearly had all these topics ready to go, were well rehearsed, etc.
hi brad your tutorials are great. I have a question from you . I know front end materials also react js but for back end what do you suggest? I know C sharp and javascript good so between asp.net core and node js which one you suggest to learn ? and is it better as a front end developer find a job then start to learn back end or first become a full stack developer and then find a job for back end or full stack developer positions?
Helpline 📲📩
QUESTIONS CAN COME IN☝️⬆️ ⬆️...
Hey Brad can u tell me u r vscode font settings please !
Awesome
When you want to split flex items, you use margin, why not use column-gap?
Please make a Django project with Celery and teach it, for example, the types of tasks Celery can write, because I can't understand Celery at all, I couldn't find a proper tutorial with Celery either.
if its a rocket ship website, youd think theyd animate the rocket ship to lift off and go up as you are scrolling through the page
I have one doubt, Can't we get html & css from browser inspect tools
Helpline 📲📩
QUESTIONS CAN COME IN☝️⬆️ ⬆️..
Sir please make same kind of project building video's with Reactjs also.
WoW !
Cool
Hi brad, I saw a page on fb that uses your intro. Is it okay?
What if we do transparent text "REWATCH" button on hover ?
Helpline 📲📩
QUESTIONS CAN COME IN☝️⬆️ ⬆️...
SpaceX is using angular right?
Hi mr traversy ….can you do a full stack video on vuejs and express…..
why you don't use rem and em just px ? 😝
Do i need problem solving skill for web development?
Helpline 📲📩
QUESTIONS CAN COME IN☝️⬆️ ⬆️....
Please create a clone application using react js for the below application
1)Teams
2)twitter
3)udemy
4)RUclips
5)Facebook
6)Chatbot application
7) Stock Exchange application
8)Google Maps
Bruh
Clever programmer has already done most of those, also Javascript Mastery
@@jonathan-3008 can you ping me the URL?
First here Sir ❤️
Please can you make a Dart crash course.
34:27
34:32
me everytime i open my vs code
You sound like Improvement Pill
1:04:59
can you clone apple’s website next?
Helpline 📲📩
QUESTIONS CAN COME IN☝️⬆️ ⬆️...
Thanks Brad, Elon Musk should hire you :)
Best teacher
Anyone else having a problem with the increment variable?
Helpline 📲📩
QUESTIONS CAN COME IN☝️⬆️ ⬆️...
You can just set the increment to 1: _const increment = 1;_
And you won't need Math.ceil(). The result is exactly the same.
In Start Counter JavaScript part, I didn't need to to add flags in this code: `window.addEventListener('scroll', () => {
const scrollPosition = window.scrollY;
if (scrollPosition > 100) {
countUp();
} else if (scrollPosition < 100) {
resetCounter();
}
})`
And it works as intended, shows counter when I scroll down and resets it when I scroll up.
I had no need for scrollStarted()
Helpline📲📥⬆️
Question can come in⬆️..
We Stand With Ukraine. Firstly oblige Ukraine for fighting with brothers->Russians, then we stand. Suka America.
Traversy Thanks for everything
quite funny that SpaceX wants to put ppl on The Moon and Mars, but they have kind of amateur website xD
Pᵣₒmₒˢᵐ
The rich stay rich by spending like the poor and investing without stopping then the poor stay poor by spending like the rich yet not investing like the rich
I countlessly share my experience with co-workers at work, on how I made $23,000 from $2,000 in 21days of trading
I just looked him up on google and he's a licensed broker, I am contacting him right away, thanks
I dont know,
watching a guy just code, writing without explaining anything is boring and less educational than you might Expect.