Basic HTML/CSS Layout

Celeste Kimimila T. Blog, Web Development Resources Leave a Comment

Share this Post

This post is dedicated to the amazing students of the Adams 12 Five Star School District, Title VII Native American Education Program. There is not much instruction on how to use this post unless you are present in our class. However, feel free to leave a comment if you have any questions regarding the use of these resources. I will respond ASAP!

My suggestion is start by pasting the provided code into the HTML section of jsbin.com’s coding environment. 🙂 Happy coding!


Here are some links to some resources that you may find helpful in your web development journey:

jsbin
w3schools
stack overflow


Below, we will be looking at different elements of a basic HTML/CSS Layout!

(altered code, but courtesy of w3schools)



NAME OF PAGE

<style>
div.container {<br />
    width: 100%;<br />
    border: 1px solid gray;<br />
}</p>
<p>header, footer {<br />
    padding: 1em;<br />
    color: white;<br />
    background-color: black;<br />
    clear: left;<br />
    text-align: center;<br />
}</p>
<p>nav {<br />
    float: left;<br />
    max-width: 160px;<br />
    margin: 0;<br />
    padding: 1em;<br />
}</p>
<p>nav ul {<br />
    list-style-type: none;<br />
    padding: 0;<br />
}</p>
<p>nav ul a {<br />
    text-decoration: none;<br />
}</p>
<p>article {<br />
    margin-left: 170px;<br />
    border-left: 1px solid gray;<br />
    padding: 1em;<br />
    overflow: hidden;<br />
}<br />
</style>

&nbsp;

&nbsp;
<div class="container"><header>
<h1>A cool page!</h1>
</header><nav>
<ul>
 	<li><a href="#">Pokemon</a></li>
 	<li><a href="#">Pictures</a></li>
 	<li><a href="#">Games</a></li>
</ul>
</nav><article>
<h1>Pokemon</h1>
Pokemon are wonderful creatures that you can catch, train and battle with your friends or foes!

Some types of Pokemon are: Fire, Water, Ghost, Wind, Insect, Ice...There are so many different types of Pokemon!

</article><footer>Copyright © W3Schools.com</footer></div>

Leave a Reply

Your email address will not be published. Required fields are marked *