Currently, I am working on the Technical Document Page project to get the responsive web design certification. I have a rough outline of what I want to go over in the page, and need to give example code for my reader to use as referance. However, I need to use the <div>
element in my example code. The problem is that I cannot figure out how to get the <div>
element into a paragraph form, and not a actual element. I have looked it up, but there doesn’t seem to be much on the topic.
So, the question is how do I add a <div>
element into my paragraph so it is seen on the user interface? In advance, all help is greatly appreciated.
HTML (Note: I haven’t added CSS yet):
<!DOCTYPE html>
<html lang="en">
<head>
<title>DevTips.com</title>
<link rel="stylesheet" href="TDP.css">
</head>
<body>
<main id="main-doc">
<!--To Be Removed Later-->
<h1 id="h1-header">How to Animate an Object in CSS (An Introduction)</h1>
<!---->
<section id="Introduction" class="main-section">
<header id="header1">
<h2>Introduction</h2>
</header>
<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>
<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">
<!--This section will be about setting the stages for animation-->
<header id="header3">
<h2>Getting Set Up</h2>
</header>
<p>Before anything, you will need to set up the object to animate it. <br>
You can do this with something like this: <br><br>
</p>
</section>
<section id="animation_name" class="main-section">
<header id="header4">
<h2>animation-name</h2>
</header>
</section>
<section id="animation_duration" class="main-section">
<header id="header5">
<h2>animation-duration</h2>
</header>
</section>
<section id="@keyframes" class="main-section">
<header id="header6">
<h2>@keyframes</h2>
</header>
</section>
</main>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
</body>
</html>
Please let me know if any other information is needed. Thank you!