Tesla website clone with HTML, CSS and Javascript 

this is my very first clone coding and sir you are a fantastic tutor. i hope you blow up sooner or later!!! appreciate all your hardwork!

Wow, amazing. Can't believe you have such few views. You're a hidden gem! Thanks for the video!

excellent tutorial !!! I'm learning coding and now I have a task to clone a website. Your video helps me a lot on how to make certain effects!

You deserve a lot more views my man, great tutorial!

Would be cool of you to display what your are typing on the screen in the corner to see some of your shortcuts. Great video

Your channel is heaven for beginners

Amazing tutorial. To think I would’ve done this using a tailwind or bootstrap. Unnecessarily adding dependencies.

I have everything needed in my code however the vehicle titles only display on the first one when I scroll its blank. 42:00 section .content{ opacity:0; z-index:1; position: fixed; width: 100%; top: 0; transition: opacity .3s ease; height: 100vh; padding-top: 15vh; padding-bottom: 15vh; text-align: center; display: grid; grid-template-rows: min-content auto min-content; } section.active .content{ opacity:1; }

Hey great video! I had a question - seems like when i resize my window to mobile size, it begins to repeat the background image? It didn’t seem like it was an issue for you, but i endd up adding no-repeat to the section style in css which fixed that issue but then caused the images to not completely fill up the page. Any advice ?

hey can you show us how to animate the backdrop blur so it smoothly fades in and out ?

Thanks Dawid. Subbed!

Great vid my friend ! How did you made the hrefs as group all together at the same time at 1:53 ? Is there any extension for it?

Great work Sir! Helped me to use grids for first time and the way you were using perfect on-point functions it seemed so easy to clone Tesla 😂.... Well I need to work on JavaScript. Please suggest me some videos where I can sip it

Great video, question though. Is there a way to stop the scroll from breaking? Sometimes it won't go to the next section if you scroll to a certain point, and sometimes text won't even appear

thanks for the video. and pls let me know how you selected here 10:27 write all sections tag at same time pls help. 🙏

im really having problem with the background images .how do you make background images .is javasript needed if you are using css and html.cause when i do background image and i style it in the css i can only use one image . the remaining wont show i hope you get what im saying.

Hi david, thanks for the tutorial. "scroll.js" in don't working.Even though I copied the code you wrote, it didn't work, can you help?

thank you very much i make this webside

Thank you for your tutorial! Where are you from btw?

Fantastic video! What do you use to record then screen?

Hi David, thanks for the tutorial. However, my middle pages are not becoming active and therefore I guess they are not showing the content h1. What to do? (For scroll.js, I copied the code from comments here)

hi; thanks for the video. sadly the js code for scrollingdoes not work for me. I have a Site in Divi Theme with 6 Sections, if I implement the code my sections disappear, cause all of them get the class active. Do you have a solution for this or somebody had the same issue? Thanks a lot.

can you provide github link of this project

did you create this design or did you get the figma ready?

thanks bro, great tutorial

Can we use scroll-snap-type: y mandatory for the scroll effect

Thank you brother this video is really helpful you are awesome make more video on website clone

when you scroll just once, sections appear but if you start scrolling fast, sections dont appear ...

Crazy work!!!!!!!

Uncaught SyntaxError: missing ) after argument list. any solution? i did exatly like you did. error in this line document.querySelector(selectors:'.backdrop').className = 'backdrop active';

i did not understand grid-template-rows: min-content auto min-content; here can we do this another way ?

URL for the Source Code File (completed)?

This is awesome

great video. Thanks.

Great video man, so informative, thankyou ❤️

Could you please upload the Js on a dropbox for the scroll because it doesnt work for me ?

nice coding bro.

this video is awesome but i don't know why scrolling work only on phone any ideas?

Hi Dawid I liked your video. I have doubt at timeline of 40min the scroll is not working smooth for me , it going too slow as it worked for you earlier. attaching code that i followed. could suggest me where it's wrong . document.lastScrollPosition = 0; document.lastCentered = 0; document.onWayTo = null; document.addEventListener('scroll', () => { const direction = window.pageYOffset -document.lastScrollPosition > 0 ? 'down' : 'up'; const sections = [...document.querySelectorAll('section')]; const destIndex = direction === 'up' ? document.lastCentered - 1 : document.lastCentered + 1 if (destIndex >= 0 && destIndex < sections.length) { console.log({ destIndex, direction }); document.onWayTo = destIndex; window.scroll(0,sections[destIndex].offsetTop); } sections.forEach((section,index) => { if(window.pageYOffset === section.offsetTop){ document.lastCentered = index; if(document.onWayTo === index){ document.onWayTo = null; } } }) document.lastScrollPosition = window.pageYOffset; })

Idk why my Tesla logo isn't visible

alright ive done it, now where is my tesla?

Why don't you do it responsive?

I have a problem with JavaScript, as it's doesn't work ans I can't seem to find the problem, anyone else?

can anyone show me how to get those pictures from a website? I am very confused,

i did not understand what you did from the 9:40 minute to the 10:55 how to do that

Hi, My scroll.js is not working. could you please help me?

i cannot put my images through section tag!

in scroll.js when i scroll it did not regiester more than one time. pls help

I didn't find scr file😊

Can you send me the github files ?

Source code pls

You don’t wanna continue Reddit tutorial?

Why you're looking like Cody Rhodes 😐

THis is what I have for line 10 in nav.js document.getElementById('menuBtn').onclick = e => { e.preventDefault(); openMenu(); It is telling me on inspect when I try to select menu this: Uncaught TypeError: Cannot set properties of null (setting 'onclick') at nav.js:10:44 I am so close lol

Many thanks for the tutorial. Sadly it doesn't work for me. I copied it exactly: document.addEventListener(type:'scroll', listener: () => { 6 31 document.addEventListener(type:'scroll', listener: () => { Expected ')' and instead saw ':'. 6 32 document.addEventListener(type:'scroll', listener: () => { Missing semicolon. 6 42 document.addEventListener(type:'scroll', listener: () => { Expected an assignment or function call and instead saw an expression. 6 50 document.addEventListener(type:'scroll', listener: () => { Missing semicolon. 6 42 undefined Unrecoverable syntax error. (15% scanned).

I am new to coding say doing it for one month I think. I am getting errors on my last line is this correct formatting? document.getElementById(elementID:'menuBtn').onclick = 0 => { e.preventDefault(); openMenu(); }