TechRoots - Web Development Lesson 3

<!DOCTYPE html>

/* CSS */

// JavaScript

Lesson 3

*VERY IMPORTANT*

We need to pay attention to the following!

1. *Do we have opening and closing tags*

2. *Do our CSS lines end with a semi-colon*

3. *Is the <style> tag within the head*

Now Let’s Go Over the Code from the Last Lesson!

*Everyone’s code should look like this*

<!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
    overflow: hidden;
    background-color: #dddddd;
}
li {
    float: left;
}
li a {
    display: block;
    padding: 8px;
}
body{
   background-color:#d0e4fe;
}
h1 {
   color: red;
   text-align: center;
}
p {
   font-family:"Times New Roman";
   font-size: 20px;
}
</style>
</head>
<body>
<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#food">Food</a></li>
  <li><a href="#friend">Friend</a></li>
  <li><a href="#school">School</a></li>
</ul>
<center><p>Hi My Name is TIM</p>
<p><b>Question</b> Can you guys make me a navigation bar?</p></center>
<h1>My First CSS Example</h1>
<center><p>This is a paragraph.</p></center>
</body>
</html>

Once our code is set we are ready to start editing it.

Let’s now navigate to <h1> and change the heading to this

 <h1 id="home">My First CSS Example</h1>

Change "My First CSS Example" to:(your name's) Website

*Example: John’s Website*

Lastly: navigate to the last

tag and edit it.

Within the edit write 3 sentences on what you learned from the 2 first lessons

Now press Refresh and Result to view it!

You will now use the syntax we have learned and build your own Food Section.

Here are a few hints!

Let’s now navigate to next <h1> and change the heading to this

 <h1 id="food">My First CSS Example</h1>

1. Start with the next <h1> and make the heading (your name's “favorite food”)

2. In the 1st <p> tag, list your two favorite foods

3. In the 2nd <p> tag, write a few sentences as to what ingredients go into that food

Once you are done press Refresh and Result to view it!

Great Job!

*End of lesson 3*