Tesla-Landing-Clone

Responsive Tesla Landing page Clone built using HTML, CSS, Tailwind CSS, JavaScript and Astro for educational purposes.

Table of Contents

• Preview
• Lighthouse report
• What have I learned?

Preview

Tesla.Landing.page.Clone.Demonstration.mp4

https://tesla-landing-clone-tan.vercel.app

Lighthouse report

What have I learned?

• Astro and its workflow.
• How to work with web components.
• Advanced Tailwind CSS.
• scroll-snap property to build sliders.
• object-fit: cover;, object-position properties and source tag to display responsive images.
• Mastering the display: inline | block | inline-block; property.
• Mastering position: relative | absolute | fixed | sticky; and z-index properties.
• Advanced flexbox: display: inline-flex;, flex-grow, flex-shrink and flex-basis properties.
• Animations related to translate on any axis, opacity and scale properties.
• JavaScript Intersection Observer API.
• SEO, Accesibility and Web Performance techniques.