Hello to whoever is reading this! So I have been getting back into finishing my Responsive Web Design Certification after some schoolwork took over my time. One problem I have been having for a while is that despite having more than ten (I think eleven) p elements, I can’t seem to get it considered complete. From memory, this happened after I surrounded certain sections in div elements (specifically, the problem was with the id of page3 or page4), in order to split the document into pages (not the best, but I am working on it). So, I ask, how did I break my code? All the other div containers work fine, so I am really confused.
Help is much appreciated, and thanks in advance!
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>DevTips.com</title>
<link rel="stylesheet" href="TDP.css">
</head>
<body>
<!-- Navigation bar-->
<div>
<nav id="navbar">
<header id="header-nav">
<h3 id="nav-header"><u>Contents</u></h3>
</header>
<ul id="nav-list" class="shadow">
<li class="list"><a id="list-a" href="#Introduction">Introduction</a></li> <br>
<li class="list"><a id="list-a" href="#What_you_should_already_know">What you should already know</a></li>
<li class="list"><a id="list-a" href="#Getting_set_up">Getting Set Up</a></li>
<li class="list"><a id="list-a" href="#Starting_the_Animation">Starting the Animation</a></li>
<li class="list"><a id="list-a" href="#Length_of_Animation">Length of Animation</a></li>
<li class="list"><a id="list-a" href="#Creating_Animation_Frames">Creating Animation Frames</a></li>
</ul>
</nav>
</div>
<!-- Document-->
<main id="main-doc">
<div id="page1" class="shadow">
<h1 id="h1-header">Animating an Object in CSS (An Introduction)</h1>
<section id="Introduction" class="main-section">
<header id="header1">
<h2>Introduction</h2>
</header>
<!-- Introduces what document is about, and what the purpose of it is.-->
<p>
Animation can make a web page user interface much more interesting. It can also bring attension to <br>
certain places that you want the user to see. This document is going to give a basic, and simple overview of animation. <br>
We will focus on the three most important animation properties, which are:
</p>
<ul>
<li>animation-name</li>
<li>animation-duration</li>
<li>@keyframes</li>
</ul>
</section>
<section id="What_you_should_already_know" class="main-section">
<header id="header2">
<h2>What you should already know</h2>
</header>
<!--Prerequisites for document-->
<p>
To learn from this page, you will need the following:
</p>
<ul>
<li>A general understanding of the World Wide Web (WWW) and Internet</li>
<li>Experiance with HyperText Markup Language (HTML)</li>
<li>Experiance with Cascading Style Sheets (CSS)</li>
</ul>
</section>
<section id="Getting_set_up" class="main-section">
<header id="header3">
<h2>Getting Set Up</h2>
</header>
<!-- This section goes over the setup for the animation process-->
<p>
Before anything, you will need to set up the object to animate it. <br>
You can do this with something like this: <hr>
</p>
<div class="show_code">
<code>
<DOCTYPE html> <br><br>
<style> <br><br>
div{ <br>
height: 100px; <br>
width: 500px; <br>
-color: #000000;<br>
}<br><br>
</style> <br><br>
<html lang="en"> <br>
<div id="animated-object"></div> <br>
</html>
</code>
</div>
<hr><br>
<p>This creates a black square. We can use this as our object to create an animation.</p>
</section>
</div>
<div id="page2" class="shadow">
<section id="Starting_the_Animation" class="main-section">
<header id="header4">
<h2>Starting the Animation</h2>
</header>
<p>Now, we need to start creating our animation, by accessing the id.</p> <br><br>
<div class="show_code">
<code>
<DOCTYPE html> <br><br>
<style> <br><br>
div{ <br>
height: 100px; <br>
width: 500px; <br>
background-color: #000000;<br>
}<br><br>
<span class="bringAttentionTo">#animated-object{ <br><br>
} <br><br></span>
</style> <br><br>
<html lang="en"> <br>
<div id="animated-object"></div> <br>
</html>
</code>
</div>
<br><br>
<p>We then need to name our animation:</p><br><br>
<div class="show_code">
<code>
<span class="bringAttentionTo">#animated-object{ <br>
animation-name: left-right; <br>
}
</span><br><br>
</code>
</div>
<hr><br><br>
</section>
</div>
<div id="page3" class="shadow">
<section id="Length_of_Animation" class="main-section">
<header id="header5">
<h2>Length of Animation</h2>
</header>
<p>
After that, we must specify how long the animation will run. <br>
We can do this using the <code style="background-color: #F1F1F1">animation-duration</code> property. <br>
Let us use three seconds for this animation: <br><br>
</p>
<div class="show_code">
<code>
<DOCTYPE html> <br><br>
<style> <br><br>
div{ <br>
height: 100px; <br>
width: 500px; <br>
background-color: #000000;<br>
}<br><br>
#animated-object{ <br>
animation-name: left-right; <br>
<span class="bringAttentionTo">animation-duration: 3s;</span><br>
} <br><br>
</style> <br><br>
<html lang="en"> <br>
<div id="animated-object"></div> <br>
</html>
</code>
</div>
<hr><br><br>
</section>
<section id="Creating_Animation_Frames" class="main-section">
<header id="header6">
<h2>Creating Animation Frames</h2>
</header>
<!-- How to program the animation itself -->
<p>
Currently, you might wonder how we are going to animate this object. The way to do this is actually quite simple. <br><br>
We use keyframes! Keyframes allow you to state when something should happen down to each frame if you want.
However, for this program, we will keep it on the simpler side.<br><br>
First of all, we need to set up the keyframes like this: <br>
</p><br>
<div class="show_code">
<code>
<DOCTYPE html> <br><br>
<style> <br><br>
div{ <br>
height: 100px; <br>
width: 500px; <br>
background-color: #000000;<br>
}<br><br>
#animated-object{ <br>
animation-name: left-right; <br>
animation-duration: 3s; <br>
} <br><br>
<span class = "bringAttentionTo">
@keyframes left-right { <br><br>
}
</span><br><br>
</style> <br><br>
<html lang="en"> <br>
<div id="animated-object"></div> <br>
</html>
</code>
</div>
</div>
<div id="page4" class="shadow">
<p>Next, we need to set up the timings. We use percentage (%) for this.</p>
<br><br>
<div class="show_code">
<code>
<span class = "bringAttentionTo">
@keyframes left-right { <br>
0% { <br><br>
}<br><br>
50% { <br><br>
}<br><br>
100% { <br><br>
}<br><br>
}
</span><br><br>
</code>
</div>
<p>
Now, we can really do whatever we want with this rectangle. <br>
Right now, lets make it so it moves left and right by manipulating the margin on the left (margin-left).
</p>
<div>
<code>
@keyframes left-right { <br>
0% { <br>
margin-left: 100px; <br>
}<br><br>
50% { <br>
margin-left: 50px; <br>
}<br><br>
100% { <br>
margin-left: 100px; <br>
}<br><br>
}
</code><br>
</div>
</div>
<div id="page5" class="shadow">
<p>
The last step is to use <code style="background-color: #F1F1F1;">animation-iteration-count: infinite;</code> in order to loop it forever. <br>
</p>
<div class="show_code">
<code>
<DOCTYPE html> <br><br>
<style> <br><br>
div{ <br>
height: 100px; <br>
width: 500px; <br>
background-color: #000000;<br>
}<br><br>
#animated-object{ <br>
animation-name: left-right; <br>
animation-duration: 3s; <br>
<span class="bringAttentionTo">animation-iteration-count: infinite;</span><br>
} <br><br>
@keyframes left-right { <br>
0% { <br>
margin-left: 100px; <br>
}<br><br>
50% { <br>
margin-left: 50px; <br>
}<br><br>
100% { <br>
margin-left: 100px; <br>
}<br><br>
}
</style> <br><br>
<html lang="en"> <br>
<div id="animated-object"></div> <br>
</html> <br>
</code>
</div>
<p>
Congrats! You just created your first animation!
</p>
<br><br><br> <!-- May remove breaks later -->
</section>
</div>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
</body>
</html>
CSS:
.show_code
{
width: 300px;
height: auto;
background-color: #f1f1f19a;
padding: 20px;
margin: 30px;
}
.bringAttentionTo
{
color: yellowgreen;
}
.object
{
height: 100px;
width: 500px;
background-color: #000000;
}
#main-doc
{
display: grid;
justify-content: end;
margin: 25px 100px 100px 100px;
}
.main-section
{
font-family: Arial;
padding: 10px;
margin: 50px;
}
#nav-bar
{
padding: 50px;
}
.list
{
margin: 10px 100px 50px 40px;
padding: 5px;
}
#nav-list
{
margin: 10px 50px 50px 50px;
float: left;
background-color: lightgrey;
display: grid;
align-items: center;
list-style-type: none;
border-radius: 10px;
}
#list-a
{
color: black;
text-decoration: none;
}
.shadow
{
box-shadow: 0px 10px 10px 10px rgba(0,0,0,0.4);
padding: 20px;
margin: 30px;
}
#nav-header
{
padding: 15px;
margin: 20px 20px 20px 200px;
}
#h1-header
{
text-align: center;
}