In this section, we're going to go over Project #4, which is recreating the Tesla homepage. At the time of creating this tutorial, the Tesla homepage looked like this:

But, now it has changed, though some elements are still common.

You can decide which web page you want to clone - the above one or the current one. It doesn't really matter because you'll still learn quite some concepts, and the experience of building such a live site can come handy for your future projects.

The key items are:

Header that includes a logo, a left navigation bar and a center navigation bar, though both the bars look slightly different from each other.

The image in the center - "P100D". This is not a traditional image, rather it is a SVG or a vector made up of many different points. If you right click on the page and see the source, you'll see a number of points that make up this image.

If you're trying this out on your own, I'd recommend you find a SVG image and integrate it with the file. It'll be a good learning experience.

If you can't find any image, go to the show notes, and there you'll see a link to "https://github.com/jordanhudgens/tesla-html-css-clone". Here you'll see the index.html file, and feel free to take the SVG image from it. However, don't look at the rest of the code because I think the best way to learn something is by making mistakes and coming up with your own solutions to fix them.

The next item is a large high resolution image as the background.

A footer that contains a few links and the image of a flag.

So, good luck building this webpage. Once you're done, we'll go through my solution together.

Resources

• Images for website