How to Create a Web Page with HTML5 and CSS
Add More Content
You should complete these lessons in order.
If you haven't completed the first 4 exercises, go back and start at the beginning.
Adding paragraphs
Our next step is to add a little content to the main division.
To the main division, we'll add 8 paragraphs of sample using the paragraph tag. ( <p></p>)
Fifth Exercise
Copy and Paste the code shown in drk red inside of the main division below the H1 tag as shown:
<main>
<h1>Responsive Web Design</h1>
<h2>Single Column Layout</h2>
<p>We can use this single column layout to learn a little about Responsive Web Design.</p>
<p>RWD came along about 10 years ago when surfing the internet with cell phones began to be an every day habit. A need for web design that allowed the same web site to be viewed on a desk top , laptop, tablet or cell phone was a must. What was then Liquid web design evolved further into what today is the norm as RWD.</p>
<h2>Easy HTML5 Construction</h2>
<p>I've tried to construct these templates with as little HTML code as possible. I advise novice web developers to spend more time studying CSS and Responsive Web Design techniques. Learn to manipulate page structure and images with what we call Media Queries.</p>
<h2>Media Queries</h2>
<p>Media Queries allow the developer to change font sizes, alter navigation devices and resize images or actully swap them out at different <b>screen sizes</b>. Let's stay away from words like resolution that just confuse the issue for now. .</p>
<p>To demonstrate grab the right edge of the browser and squeeze it to the left. As the width of the screen decreases five different size images will be displayed using the Media Queries in the style sheet. When you've squeezed as far as you can open Web Developer Tools beside it to get to the smallest size screen width.</p>
<h2>Drop down Menu</h2>
<p>The CSS for the drop down menus is a bit verbose, but it's easier than learning javascript. There are a lot of sites out there that offer free menu codes, but most are heavy on the JS and will pose problems for beginners when trying to troubleshoot problems that arise.</p>
Save myfirstpage.html Refresh and Preview
Defining Appearance of New Paragraphs with CSS
We've already covered the formating of h1 heading tag. Now we'll format our h2 headings and paragraphs.
Copy and paste the code into your style sheet below the last entry.
Explanation below:
main h2{
font-size:22px;
text-align:center;
color:#99ccff;
margin:1% 0;
text-shadow:1px 2px #000000}
main p{
text-align:left;
text-indent:16px;
margin:1% 0}
Save myfirstpage.html Refresh and Preview
Finish the Footer
Copy and Paste your footer information to the footer element using the paragraph tag as shown.
<footer>
<p>© 2025 - My Company - All Rights Reserved</p>
</footer>
Save myfirstpage.html
Copy and Paste into the style sheet:
footer p {
color: #efefef;
text-align: center;
padding: 1% 0
}
Save myfirstpage.html Refresh and Preview
The Result
If this is what you see, you are ready to continue:
Were you successful? If you were, congratulations!!
If not, check the code that you added to your HTML page and style sheet.
What's Next
At this point, you could actually use what you've built so far to create a very simple website. Problem is, you have a liquid web page, but it's not yet to a point where we can call it responsive.
To begin the task we need to learn to manipulate our browser and use it and Web Developer Tools to start setting break points and adding Media Queries to adjust the web page to be viewed on smaller devices.Let's take a break and learn to manipulate our browser
.
Helps
Laptop users: I just can't believe how much faster and easier I can work on my laptop since I added a wireless mouse and keyboard.
I bought a MOFII Lovely for my wife as a birthday present and she loved it. I borrowed it one day just to see if it would speed things up on my laptop.
Trying to do web development on a laptop can really be a pain if you've got a lot to do.
So, I bought one for myself and plugged the little nano 2 in 1 receiver into my USB port. Started cranking out pages instantly.
Kick myself now for not getting it sooner.
Desktop or laptop, I highly recommend MOFII wireless mouse and keyboard.
Check it Out!
Free Tools and Resources We Recommend
Need something more advanced. Check out our Web Development Resources page for some more advanced tutorials and reference guides for HTML5, CSS3, Responsive Design and SEO.
- Free Responsive Web Design Certification freeCodeCamp
- freeCodeCamp is a proven path to your first software developer job.
- More than 40,000 people have gotten developer jobs after completing this – including at big companies like Google and Microsoft.
- Finally, you'll learn how to make webpages that respond to different screen sizes by building a Twitter card with Flexbox, and a complex blog layout with CSS Grid.
- FREE Certification Courses!!
- Free Ebook How to Code in HTML5 and CSS3
- "How to Code in HTML5 and CSS3" is a free e-book about making websites in HTML5 and CSS for absolute beginners. It doesn't require any experience in IT to start....
- FREE HTML Editor (Windows): NoteTab Light
- All the features of a commercial HTML editor.
- FREE Apache Server (Windows): IndigoAmpp
- Set up a real time server environment right on your PC. Test forms and scripts before uploading to your web space.
- Linux Users
- If like us, you've left the insane world of Microsoft Windows for the even worse experience of Linux, we recommend the Geany Code Editor. You'll find it in your Linux Mint software repository. It's simple but powerful and FREE.
- For image resizing we've found the easiest Linux tool to be Krita.