TechRoots - Web Development Lesson 2 Part 1
<!DOCTYPE html>
/* CSS */
// JavaScript

Project Part 1

Learning Different Page Formats

How in the world do we make this?

Some things to keep in mind.

1. Img = image

2. “em” is the same as px just helps with sizing in different devices

3. It looks like a lot of work, but remember what we have learned from our last classes and implement those concepts into making this website.

4. Do not forget to save the file 4 times as home.html, food.html, friend.html, and school.html

5. For the smiley face image, you can use any image you would like, just make sure you save it!


Atom

Final Code for Project

<!DOCTYPE html>
<html>
<head>
<style>
img {
    float: left;
    margin: 0;
    padding: 1em;
}
img {
    list-style-type: none;
    padding: 80;
}
img {
    text-decoration: none;
}
ul {
    list-style-type: none;
    overflow: hidden;
    background-color: #dddddd;
}
li {
    float: left;
}
li a {
    display: block;
    padding: 8px;
}
body{
   background-color:#98AFC7;
}
h1 {
   color: yellow;
   text-align: center;
}
p {
   font-family:"Times New Roman";
   font-size: 20px;
}

div.container {
    width: 100%;
    border: 1px solid gray;
}

header, footer {
    padding: 1em;
    color: white;
    background-color: purple;
    clear: left;
    text-align: center;
}
article {
    margin-left: 200px;
    border-left: 1px solid gray;
    padding: 8em;
    overflow: hidden;
}
</style>
</head>
<body>
<div class="container">
<header>
   <h1>My Website</h1>
</header>
<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Food</a></li>
    <li><a href="#">Friend</a></li>
    <li><a href="#">School</a></li>
</ul>
<img src="2.jpg" alt="HTML5 Icon" width="400" height="400">
<article>
  <h1>About me</h1>
  <p>Write 2 sentences about yourself.</p>
  <p>What do you like to do for fun?</p>
</article>
<footer>A website by John Smith &copy</footer>
</div>
</body>
</html>