Project Solution: Tesla Homepage HTML Structure
In this solution we'll walk through how to build the HTML tag structure and integrate the content for the Tesla homepage project.
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license
APPLY NOWLEARN MORE

I hope you've tried building the site by yourself. In this guide, we'll go through my solution.

As always, let's start with a basic HTML structure that includes <!DOCTYPE>, <html>, <head>, <title>, and <body> tags.

Inside the <body> tag, we'll start with a container <div>. Inside this tag, let's start building our header. If you remember, we have a logo and two sets of nav bars. We need only one <ul>, and inside this, we can place all that we need. This tag will have a <div> for logo, and an <img> tag for the image. You can grab the images from img directory in "https://github.com/jordanhudgens/tesla-html-css-clone". You can also use your own images. 

<!DOCTYPE html>
<html>
  <head>
    <title>Tesla Clone</title>
  </head>

  <body>
    <div id="container">
      <div id="header">
        <ul>
          <div id="logo">
            <img src='img/logo.png' alt="logo" />
          </div>
        </ul>
      </div>
    </div>
  </body>

</html>

Next, we'll create our first set of nav buttons, which is the left navigation bar. We'll create a class for these navigation elements, as all of it have similar styles. 

<ul>
  <div id="logo">
    <img src='img/logo.png' alt="logo" />
  </div>

  <div>
    <a href="#" class="nav-button">Model S</a>
    <a href="#" class="nav-button">Model X</a>
    <a href="#" class="nav-button">Model 3</a>
    <a href="#" class="nav-button">Charging</a>
    <a href="#" class="nav-button">Energy</a>
  </div>
</ul>

Let's see how it looks on the browser.

If you're wondering about the logo, don't worry! This logo is white, and this is why you can't see it on the browser. If you're still not convinced, right-click on the page and click on inspect. You should be able to see the code now.

We'll duplicate this code for our right navigation buttons, and change the content. 

<ul>
  <div id="logo">
    <img src='img/logo.png' alt="logo" />
  </div>

  <div>
    <a href="#" class="nav-button">Model S</a>
    <a href="#" class="nav-button">Model X</a>
    <a href="#" class="nav-button">Model 3</a>
    <a href="#" class="nav-button">Charging</a>
    <a href="#" class="nav-button">Energy</a>
  </div>

  <div id="right-nav-buttons">
    <a href="#" class="nav-button">Updates</a>
    <a href="#" class="nav-button">Support</a>
    <a href="#" class="nav-button">Find Us</a>
    <a href="#" class="nav-button">Shop</a>
    <a href="#" class="nav-button">My Tesla</a>
  </div>
</ul>

You can also use <li> tags instead of <div>. Its completely up to you. With that, our header is done.

The next section is the center content, including the SVG. We'll create a <div> tag, and inside this, another <div> tag for our SVG image. I'm going to cop paste it from a different file, but just remember that it's nothing but a series of CSS style points and vectors. 

<div id="content">
  <div id="banner">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 257.1 41.8">
      <style>.st0{fill:#BCBEC0;} .st1{fill:#ED1C24;} .st2{fill:#D1D3D4;}</style>
      <path d="M256.3 40.7c0 .6-.5 1.1-1.1 1.1H2.2c-.6 0-1.1-.5-1.1-1.1v-1.2c0-.6.5-1.1 1.1-1.1h253c.6 0 1.1.5 1.1 1.1v1.2zM139.2 13.9l-.1-1.3-.3-1.3-.4-1.2-.4-.8-.5-.8-.6-.7-.6-.6-1-.7-1-.6-1.1-.5-1.8-.6-1.9-.4-1.9-.4-1.8-.1H124l-5.4-.1h-7.3l-2 .2-1.9.2-1.9.4-1.9.6-1.2.5-1.1.6-1.1.8-1 .9-.9 1-.7 1.1-.6 1.2-.4 1.2-.3 1.3-.3 1.9-.1 1.9v.8l-.1 1.8.1 1.8.2 1.2.3 1.2.4 1.2.5.8.6.8.6.7.7.6 1 .7 1.1.6 1.1.5 1.8.5 1.9.4 1.9.2 1.9.1 1.9.1 5.4.1h5.4l1.9-.1 1.9-.1 1.9-.2 1.7-.3 1.8-.6 1.1-.5 1.1-.6 1-.7.7-.6.6-.7.6-.7.5-.8.6-1.2.4-1.3.3-1.3.2-1.9.1-1.9.1-.8.1-1.8v-1.7zm-8.9 3l-.1 2.1-.2 2.1v.1l-.3 1.4-.4 1.4-.3.7-.4.7-.5.6-.5.5-.1.1-.7.5-.8.5-.8.4-.9.3-1.2.2-1.2.1h-5.1l-3.9-.1h-1.2l-1.1-.1-1.1-.2-.8-.2-.8-.3-.7-.4-.6-.5-.1-.1-.5-.5-.5-.6-.4-.7-.3-.7-.3-1-.2-1-.1-1V19l.1-2.1.2-2v-.2l.3-1.5.5-1.5.7-.7.4-.7.5-.6.5-.5.1-.1.7-.5.8-.4.8-.4.9-.3 1.2-.2 1.2-.1 1.2-.1h4l3.9.1h1.2l1.1.1 1.1.2.8.2.8.4.7.5.6.6.1.1.4.6.4.6.3.7.2.7.3 1.5.1 1.5v2zm58.5-3l-.1-1.3-.3-1.3-.4-1.2-.4-.8-.6-.9-.6-.7-.6-.6-1-.7-1-.6-1.1-.5-1.8-.6-1.9-.4-1.8-.3-1.8-.1-1.8-.1-5.4-.1h-7.3l-2 .3-1.9.2-2 .4-1.9.6-1.1.6-1.1.6-1.1.8-1 .9-.9 1-.7 1.1-.6 1.2-.4 1.2-.3 1.3-.3 1.9-.1 1.9v.8l-.1 1.8.1 1.8.2 1.2.3 1.2.4 1.2.5.8.6.8.6.7.7.6 1 .7 1.1.6 1.1.5 1.8.5 1.9.4 1.9.2 1.9.1 1.9.1 5.4.1h5.4l1.9-.1 1.9-.1 1.9-.2 1.9-.4 1.8-.6 1.1-.5 1.1-.6 1-.7.7-.6.6-.7.6-.7.5-.8.6-1.2.4-1.3.3-1.3.2-1.9.1-1.9.1-.8.1-1.8-.2-1.7zm-8.9 3l-.1 2.1-.2 2.1v.1l-.3 1.4-.4 1.4-.3.7-.4.7-.5.6-.5.5-.1.1-.6.5-.8.5-.7.4-.9.3-1.2.2-1.2.1h-5.1l-3.9-.1h-1.2l-1.1-.1-1.1-.2-.8-.2-.8-.3-.7-.4-.6-.5-.1-.1-.5-.5-.5-.6-.4-.7-.3-.7-.3-1-.2-1-.1-1V19l.1-2.1.2-2v-.2l.3-1.5.5-1.5.3-.7.4-.7.5-.6.5-.5.1-.1.7-.5.8-.4.8-.4.9-.3 1.2-.2 1.2-.1 1.2-.1h4l3.9.1h1.2l1.1.1 1.1.2.8.2.8.4.7.5.6.6.1.1.4.6.4.6.3.7.2.7.3 1.5.1 1.5v2zM89.3 28.8c-1.6-.3-2.8-.6-3.1-1.6-.1-.3-.1-.6-.2-1v-3.7c0-.7.3-6.9.3-6.9l.6-11.4H71.5l-.1 2.7c1 .1 2 .2 3 .4 1.6.3 2.8.6 3.1 1.6.1.3.1.6.2 1v4.4c0 .5-.2 3.9-.3 6.2-.1 1-.5 5.3-.6 5.7-.1.4-.2.7-.3 1-.4 1.1-1.7 1.4-3.3 1.6-1 .2-2 .3-3.1.4l-.1 2.7h22.2l.1-2.7c-1-.1-2-.2-3-.4z" class="st0"/>
      <path d="M2 31.3c-.5 0-1-.4-1-1v-.7c0-.5.4-1 1-1 0 0 3.9 0 6.2-1.6 0 0 .4-.3.5-.9.1-.7.5-4.5.5-10.4 0 0 0-.4.2-.7.2-.2.4-.3.7-.3h25.7c2.2 0 13.3-.3 13.3-5.5 0-5.7-15-5.8-15.7-5.8H4.8c-.2 0-.4 0-.7-.2-.3 0-.9-.4-2.7-.6-.4 0-.8-.3-.8-.9v-.2s0-.3.2-.6c.1-.1.3-.3.7-.3H34c2 0 8.9.1 15.2 1.2 8.4 1.5 12.7 4.1 12.7 7.8 0 8.2-21.2 9.2-37.1 9.2h-1.6c-.2 0-1 .1-1 1.3 0 1.9.2 5.4.2 5.4 0 .4.1.9.1 1.1.5.7 2.2 1.2 3.5 1.4 3.3.6 6.3.6 6.4.6.5 0 1 .3 1 1v.6c0 .1 0 .5-.3.8-.1.1-.4.3-.7.3H2z" class="st1"/>
     <path d="M34 1.2c4 0 27.3.3 27.3 8.4 0 8.4-25.6 8.6-36.5 8.6h-1.6s-1.6 0-1.6 1.9.2 5.5.2 5.5 0 1.1.2 1.3c.2.2.6 1.1 3.9 1.7s6.5.6 6.5.6c.1 0 .4 0 .4.4v.6s0 .5-.4.5H1.9s-.4 0-.4-.4v-.7s0-.4.4-.4 4.2-.1 6.6-1.7c0 0 .6-.4.7-1.3s.5-4.7.5-10.4c0 0-.1-.5.4-.5h25.7c2.8 0 13.9-.4 13.9-6.1C49.8 3.1 35.1 3 33.6 3H4.7c-.1 0-.2 0-.4-.1-.2-.2-.8-.6-2.8-.9 0 0-.3 0-.3-.3v-.2s0-.3.3-.3l32-.1c-.1.1.1.1.5.1M34 0h-.6L1.4.1C1 .1.6.2.4.5c-.3.3-.4.7-.4 1v.2C0 2.4.6 3 1.4 3.1c1.6.3 2.1.6 2.4.7h.1c.4.2.7.3 1 .3h28.8c6.1 0 15.1 1.4 15.1 5.2 0 4.8-11.4 4.9-12.8 4.9H10.3c-.5 0-.9.2-1.2.5-.4.4-.4.9-.4 1.2 0 5.7-.4 9.5-.5 10.2 0 .3-.2.4-.2.4C6.1 27.8 3 28 2 28s-1.6.8-1.6 1.5v.7c0 1 .8 1.5 1.5 1.6h30.5c.5 0 .9-.2 1.2-.5.4-.5.4-1 .4-1.2v-.5c0-.9-.7-1.6-1.6-1.6-.4 0-3.2-.1-6.2-.6-1.9-.4-2.8-.8-3.1-1.1 0-.2-.1-.6-.1-.8 0 0-.2-3.6-.2-5.4 0-.2 0-.5.1-.6.1-.1.3-.1.3-.1h1.6c17.5 0 37.7-1.1 37.7-9.7C62.5.7 40.7 0 34 0z" class="st2"/>
      <path d="M226.3 32.1h-29v-3.8h.6c1.8 0 3.1-.5 4-1.4 1.1-1.2 1.1-2.8 1.1-2.8V13.3h11.5v11.2c0 2.9 2.1 3.3 2.2 3.3 2 .2 4.2.3 6.4.3 6.3 0 21.1-1 21.1-10.7 0-9.1-19.6-9.8-25.7-9.8H199v-4h22.3c8.6 0 15.9.7 21.6 2.1 9.1 2.2 13.8 6.2 13.8 11.7-.1 14-25.3 14.7-30.4 14.7z" class="st1"/>
      <path d="M221.2 4.2c10.8 0 34.7 1.1 34.7 13.2 0 13.5-25 14.1-29.7 14.1h-28.5v-2.7c5.9 0 5.6-4.8 5.6-4.8V13.9h10.3v10.6c0 3.5 2.7 3.9 2.7 3.9 1.9.2 4.1.3 6.5.3 9.6 0 21.7-2.1 21.7-11.3 0-9.6-19.8-10.4-26.2-10.4h-18.9V4.2h21.8m0-1.2h-22.9v5.3h20.1c4.2 0 25.1.4 25.1 9.2 0 9.2-14.3 10.2-20.5 10.2-2.7 0-4.9-.2-6.3-.3-.3-.1-1.7-.5-1.7-2.8V12.7h-12.7v11.4s0 1.4-.9 2.4c-.7.8-1.9 1.2-3.5 1.2h-1.2v5.1h29.7c5.1 0 30.8-.7 30.8-15.3-.1-6.7-6.3-14.5-36-14.5z" class="st2"/>
  </svg>
</div>

If you look through this code, you'll see some CSS classes and vector points, and this is what make up an SVG image.

If you refresh the page, you'll see the image.

large

The next will be a <div> tag for our marketing content. We'll probably have separate <div> tags for each line of content. 

<div id="marketing-content">
  <div id="line-1">Maximum Performance. Maximum Range.</div>
  <div id="line-2">Available for Model S and Model X</div>
</div>

The next one is for the buttons, and here I'm going to use <span> tags inside <a href>, just to show that it's possible to do so. 

<div id="buttons">
  <a href="#">
    <span class="button">ORDER MODEL S</span>
  </a>

  <a href="#">
    <span class="button">ORDER MODEL X</span>
  </a>

  <a href="#">
    <span class="button">READ MORE</span>
  </a>
</div>

The last one is our footer. We'll have a nested <div> tag for links and the flag image. We'll have a class for all links for easier styling. 

<div id="footer">
  <div id="footer-links">
    <a class="footer-link" href="#">Tesla Motors &copy; 2016</a>
    <a class="footer-link" href="#">Privacy & Legal</a>
    <a class="footer-link" href="#">Contact</a>
    <a class="footer-link" href="#">Careers</a>
    <a class="footer-link" href="#">Forums</a>
    <a class="footer-link" href="#">Locations</a>
    <a class="footer-link" href="#">
      <img src="img/flag.gif" id="flag" alt="US Flag" />
    </a>
  </div>
</div>

I think that's the basic HTML structure.

If you look at the browser, you can see all our elements.

large

In the next guide, we'll style all of them.