SpaceX Website Clone - HTML, CSS & JavaScript

[@TraversyMedia]

I have decided to do another video turning into a React project. Maybe even use something like Strapi for page content

[@abhaythakur8572]

can't wait

[@sandeepkprasad92]

Great idea.

[@ts3798]

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.

[@pelumini]

Maybe you'll use Typescript for this?

[@shlomominkowicz65]

Yes!! Please do. Always love your React style projects, or maybe even full stack Next.js with mongoDB!

[@draigan]

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; }

[@satyasridevi851]

Thank you so much for this code

[@TylerNicholson-ee6cf]

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.

[@SvetaSveta-ms4hi]

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. ❤️

[@mosesnandi]

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.

[@jesse4011]

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.

[@amanashra1607]

Amazing Sir , i have watched your whole HTML & CSS playlist it gives so much confidence to me as a front end Developer

[@ztcanada_1]

Helpline 📲📩 QUESTIONS CAN COME IN☝️⬆️ ⬆️....

[@janisdregeris]

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 :)

[@mbm6048]

Haven't even watched but I know it's gonna be a banger.keep it up brad

[@luisbranco4060]

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!

[@techwithbekas]

Thanks brad, just another amazing clone website with an amazing instructor .

[@almirk.479]

Great video man , thanks a lot, i really like these clone projects. I wish you all the best

[@ashik_moosa]

I liked the video before watching 😅 Knows you will deliver something solid everytime

[@spaceorbust6636]

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.

[@tensegamer1539]

i love your courses and im so glad i came across you on udemy

[@neutrallane]

Nice one Brad. For me I am in love with responsive nav bars. This was super cool for me 🤩🤩🤩🤩🤩

[@reggiebdog]

Wonderfully made and presented! I really get so much from your videos.

[@robertzohrabyan3316]

Please continue to build this website, thank you very much

[@DireSwift]

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(); }); }

[@ilikelearning6427]

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

[@jonathonkiner7415]

I get so excited when i see videos like this haha.

[@sanjaybatak3549]

Thank You Traversy. You are a Legend, I hope you know that!!

[@RockstahRolln]

GREAT content as always!! Looking forward to giving this a go later! Thank You!!

[@DonGabby007]

Dope clone! Nice video production. Loving your videos...

[@gagansinghbatth5604]

Really appreciate your work and unbiased view point share by you out of your heart...

[@KylePrinsloo]

This should've been sponsored by Elon Musk man 😂 what an amazing walk-through!

[@alvirarahman1559]

Love it as usual Brad, can you please do more Angular videos? Especially project for beginners?

[@igweachijesseobinna4584]

We love u brad thank you for this

[@igweachijesseobinna4584]

@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

[@emil4483]

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.)

[@ztcanada_1]

Helpline 📲📩 QUESTIONS CAN COME IN☝️⬆️ ⬆️...

[@HypeHarborHub]

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.

[@KingZuluKing]

Amazing job, really, can you please continue building this website it is very interesting

[@sadique_x_]

Life changing channel💯❤✅

[@abualmaruf8901]

Thank You . Learn a lot from bangladesh

[@EricShans]

great content as always Brad!

[@alesmahoney7368]

Thanks Brad. You are awesome❤

[@SergioOlivieri89]

It wrould be imteresting to see a clone creation like this but with web accessibility in mind!!

[@JefrusOk]

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?

[@souravray7448]

Thanks man for your wonderful content.

[@amanashra1607]

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

[@filipevalentegomes2383]

Pretty cool, would love to see GSAP with react. There aren’t many videos on KZbin about that

[@frockygarcia2004]

Hi brad, I saw a page on fb that uses your intro. Is it okay?

[@benacker8525]

Disable PostCSS extension and your autocomplete in CSS will work

[@nisa-wk7gm]

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.

[@manindra502]

I have one doubt, Can't we get html & css from browser inspect tools

[@ztcanada_1]

Helpline 📲📩 QUESTIONS CAN COME IN☝️⬆️ ⬆️..

[@robertzohrabyan3316]

How can I add a submenu with dropdown arrow for both mobile and desktop menus?

[@augustuscaeser8939]

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

[@shayanhdry6224]

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?

[@ztcanada_1]

Helpline 📲📩 QUESTIONS CAN COME IN☝️⬆️ ⬆️...

[@bipuljha792]

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!

[@richardwilliam7030]

Hey Brad I'm waiting for your react native course And probably golang course on udemy. I will pay a million for that😌

[@FrankSmith-nq9tw]

When you want to split flex items, you use margin, why not use column-gap?

[@naczelnypsycholog6296]

why you don't use rem and em just px ? 😝

[@FascalRanky]

Thanks, looks great.

[@abubakaryasin8610]

This is the best project 👋

[@dalziboy]

Can you make a tutorial for GSAP? PLEASE it would be very useful. Love your work, keep it up!

[@stephanemo2135]

Waow, great, great, (great) content. Thanx a lot.

[@schoolbeans2968]

Hey, what's the theme for your vscode ? It looks amazing !

[@alirezabarzeh2781]

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.

[@harry4088]

Hey Brad can u tell me u r vscode font settings please !

[@hassaneoutouaya]

Thank you so much Mr !

[@DmitrySafarov]

Great course!

[@TayambaMwanza]

SpaceX is using angular right?

[@adilkevin6220]

Please create a clone application using react js for the below application 1)Teams 2)twitter 3)udemy 4)KZbin 5)Facebook 6)Chatbot application 7) Stock Exchange application 8)Google Maps

[@yorokobi9498]

Bruh

[@jonathan-3008]

Clever programmer has already done most of those, also Javascript Mastery

[@adilkevin6220]

@@jonathan-3008 can you ping me the URL?

[@iamhassanhashmi]

Amazing ♥️

[@iamhassanhashmi]

Scaaaaaaaaam scaaaaaaam scaaaaaaam and Use the name or traversy media #traversy media @traversy media

[@ismoiljonabduqahhorov5825]

What if we do transparent text "REWATCH" button on hover ?

[@ztcanada_1]

Helpline 📲📩 QUESTIONS CAN COME IN☝️⬆️ ⬆️...

[@nikhuge6580]

Hi mr traversy ….can you do a full stack video on vuejs and express…..

[@isaacjon]

Brad thank you bro

[@mohammedabdulaziz3658]

Excellent SIR

[@proribrajokproribrajok7789]

Do i need problem solving skill for web development?

[@ztcanada_1]

Helpline 📲📩 QUESTIONS CAN COME IN☝️⬆️ ⬆️....

[@novavidanovocomeco957]

thank you so much , it worked

[@vinaypatil8009]

Sir please make same kind of project building video's with Reactjs also.

[@Arabian_Abomination]

Thanks Brad, Elon Musk should hire you :)

[@untildev8530]

34:27 34:32 me everytime i open my vs code

[@cavidanbagiri7837]

We Stand With Ukraine. Firstly oblige Ukraine for fighting with brothers->Russians, then we stand. Suka America. Traversy Thanks for everything

[@999NRG]

can you clone apple’s website next?

[@ztcanada_1]

Helpline 📲📩 QUESTIONS CAN COME IN☝️⬆️ ⬆️...

[@KomalMYM]

1:04:59

[@frank-il3zm]

nice bro

[@uchubiloemmanuel342]

Please can you make a Dart crash course.

[@jabezahouansou8024]

WoW !

[@dragonreborn2141]

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()

[@beomseok5957]

Helpline📲📥⬆️ Question can come in⬆️..

[@tsamansumbane2318]

Best teacher

[@alexandernewland7420]

Anyone else having a problem with the increment variable?

[@ztcanada_1]

Helpline 📲📩 QUESTIONS CAN COME IN☝️⬆️ ⬆️...

[@hb20007]

You can just set the increment to 1: _const increment = 1;_ And you won't need Math.ceil(). The result is exactly the same.

[@mylesprospero8105]

You sound like Improvement Pill

[@twoplustwoequals5733]

quite funny that SpaceX wants to put ppl on The Moon and Mars, but they have kind of amateur website xD

[@swapnildhiman2032]

Thankyou sir

[@HankTheTankCoding]

First here Sir ❤️

[@andresgarciaalves]

Awesome

[@bikramchettri9405]

Cool

[@hatsapp8966]

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

[@tarnow1236]

I countlessly share my experience with co-workers at work, on how I made $23,000 from $2,000 in 21days of trading

[@isabellakate3429]

I just looked him up on google and he's a licensed broker, I am contacting him right away, thanks

[@irenestokes211]

Pᵣₒmₒˢᵐ

[@kevinschulz9770]

I dont know, watching a guy just code, writing without explaining anything is boring and less educational than you might Expect.