Hello there. Welcome back to this web development tutorial series.
We have learned a few concepts so far and before we continue, let's review them by doing a quick test.
At this point, you should have a html file, named my_site.html with the following code in it;
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="my_site.css">
</head>
<body>
<h2>NASA | JPL</h2>
<h1>ON A MISSION</h1>
<h4>PODCAST</h4>
<p>A new podcast from NASA</p>
<ul>
<li>Arrival</li>
<li>We Are the World</li>
<li>Worlds of Wonder</li>
</ul>
<ol>
<li>NASA is cool</li>
<li>Coding comes second, arguably.</li>
<li>What is third place?!</li>
</ol>
<table>
<tr> <th >Name</th> <th >Title</th> </tr>
<tr> <td >John Doe</td> <td >Tutor</td> </tr>
<tr> <td >Jane Doe</td> <td >Student</td> </tr>
</table>
<img src="images/apollo.jpg" width="450px" height="450px" >
<p>Click <a href="https://relatableterms.blogspot.com/">me</a> to start learning code </p>
</body>
</html>
This html file should be linked to a my_site.css file.
Open my_site.css using Sublime Text (or whichever text editor you prefer) and delete any code in it.
Type (or copy & paste) the following css code instead;
.reds{
color: red;
}
.blues{
color: blue;
}
#underlined{
text-decoration: underline;
}
ul{
list-style-type: square;
}
#roman{
list-style-type: upper-roman;
}
td{
border: 1px solid red;
}
.blueBordered{
border : 2px solid blue;
}
#greenItalic{
color: green;
font-style: italic;
}
Great. Now here is the test / exercise.
Looking at the css code (above, the one you just copied into your my_site.css file), modify the html code in my_site.html file so that you end up with a website that looks like the image below;
Again, without editing the css code given above, modify your my_site.html code to create a website that looks like the screenshot above.
Great! Have fun!
As always, leave any questions you might have in the comment section below.
We have learned a few concepts so far and before we continue, let's review them by doing a quick test.
At this point, you should have a html file, named my_site.html with the following code in it;
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="my_site.css">
</head>
<body>
<h2>NASA | JPL</h2>
<h1>ON A MISSION</h1>
<h4>PODCAST</h4>
<p>A new podcast from NASA</p>
<ul>
<li>Arrival</li>
<li>We Are the World</li>
<li>Worlds of Wonder</li>
</ul>
<ol>
<li>NASA is cool</li>
<li>Coding comes second, arguably.</li>
<li>What is third place?!</li>
</ol>
<table>
<tr> <th >Name</th> <th >Title</th> </tr>
<tr> <td >John Doe</td> <td >Tutor</td> </tr>
<tr> <td >Jane Doe</td> <td >Student</td> </tr>
</table>
<img src="images/apollo.jpg" width="450px" height="450px" >
<p>Click <a href="https://relatableterms.blogspot.com/">me</a> to start learning code </p>
</body>
</html>
This html file should be linked to a my_site.css file.
Open my_site.css using Sublime Text (or whichever text editor you prefer) and delete any code in it.
Type (or copy & paste) the following css code instead;
.reds{
color: red;
}
.blues{
color: blue;
}
#underlined{
text-decoration: underline;
}
ul{
list-style-type: square;
}
#roman{
list-style-type: upper-roman;
}
td{
border: 1px solid red;
}
.blueBordered{
border : 2px solid blue;
}
#greenItalic{
color: green;
font-style: italic;
}
Great. Now here is the test / exercise.
Looking at the css code (above, the one you just copied into your my_site.css file), modify the html code in my_site.html file so that you end up with a website that looks like the image below;
Great! Have fun!
As always, leave any questions you might have in the comment section below.
Comments
Post a Comment