Premium Features

Download Video

Project Setup and Initial Markup

Published 3 months ago

Setting up our project, we'll need access to the Figma design file (https://www.figma.com/file/LJ8KC40jSPGR4rgEim2qYC/Chris-Courses---CSS?node-id=1%3A2), and we need to create an html file to work out of.

If you're ever writing a basic HTML webpage, it's very common to write out of a file called index.html which typically represents the homepage of a website.

Once you have your HTML file created, you'll need to start creating some HTML markup. HTML tags are used to identify different pieces of content - some tags possess functional ability (the anchor tag allows you to link to other webpages), while other tags act as grouping tags to organize your content in a way that makes sense for CSS layout (div, span).

We're going to start marking up the header with a simple <header></header> tag, then go more in-depth to add all of the HTML elements required to start styling the website's header.

By the end of this video, your code should look like this:

index.html
<header>
  <div>
    <img src="" alt="" />
    <a href="">Pricing</a>
    <a href="">Courses</a>
    <a href="">Blog</a>
    <a href="">Forum</a>
  </div>
  <div>
    <a href="">Login</a>
    <button>Sign Up</button>
  </div>
</header>

Comments

Want to participate?

Create a free Chris Courses account to begin

Login

No comments yet, be the first to add one

Cheat Sheet Preview

Download The Official Chris Courses HTML5 Canvas Cheat Sheet

Essential canvas syntax at your fingertips.

Download Now

Providing the lift to launch your development career

© 2021 Chris Courses. All rights reserved.