1-Adding HTML

Video

Steps

Let's start adding the HTML to our project. Eventually, we will be toggling back and forth between the HTML and CSS, but for now, we'll just focus on outlining all the things we need with our HTML.
Start with a snippet. If you type html + tab in Sublime, it should give you a <head> and <body> tag with the surrounding <html> tag.
Add a title called Fromage Cheese Market.
Let's link up the CSS file before we forget.

You should have the follow code:

<!DOCTYPE html>
<html>
<head>
     <title>Fromage Cheese Market</title>
     <link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
</body>
</html>

Before we get into the nitty gritty details of HTML, let's set up the structure for all the major chunks we're going to need:

<!DOCTYPE html>
<html>
<head>
     <title>Fromage Cheese Market</title>
     <link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
     <header>
         <!--Login menu-->
         <!--Navigation Menu-->
     </header>
     <section id="sidebar">
         <!--Sidebar Text-->
         <!--Recipe List-->
     </section>
     <section id="main">
         <!--Main Section-->
         <!--Six different cheeses-->
     </section>
     <footer>
         <!--Legal items, navigational items-->
     </footer>
</body>
</html>

This is a great way to start things out, just by giving a kind of outline of things that we'll need. It's what we in the programming world refer to as "stubbing out code".
Then, we can go in and put details inside those various tags. You can recognize tags by the less than < and greater than > symbols that surround them.
Let's go on to the next module and work on the header.

Previous0-Set Up Next2-Header

Last updated 7 years ago