How to Create a Web Page with HTML5 and CSS
Creating the lmenu.html Web Page
Stepping into the world of Responsive Web Design
Up to this point your web page is just Liquid.
A little gadget in CSS3 makes it possible to change the appearance of your web page to adapt to the size of device screen that loads it and move on to being Responsive.
As our last entry in the stylesheet we'll add a simple media query that will adapt the web page to devices with screens from 240 pixels to 480 pixels wide.
Except for the menu this isn't that hard a task with a one column page.
The media query is really valuable when used with multiple column pages that contain images that need to be reduced in size for smaller screens.
Creating lmenu
The solution to our header text and navbar wrapping problem was added way back in lesson 2 with the little menu link that's been hiding ever since.
It's time to create our lmenu.html page and put it to work.
Copy and paste the following code into a new page in the text editor and save it as lmenu.html in the htdocs folder
Windows users:Be sure when saving lmenu.html that you set the All files filter. If you don't, Notepad will likely save it as lmenu.html.txt and you'll get a File Not Found message when you try to view it.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Replacement menu lmenu.html for myfirstpage.html</title>
<meta name="description" content="Replacement Menu for myfirstpage.html">
<meta name="keywords" content="Replacement menu, myfirstpage.html">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body { color: #0e0e0e; background-color:#ffffff; font-family: arial , freesans, sans;}
div { background-color: #ffffff; ;padding: 2% 2%}
ul {list-style: none;}
ul li a {text-decoration: none; font-size: 20px;color: #0e0e0e; line-height: 100%}
ul li a { color: #0e0e0e}
ul li a:hover { color: #ff0000}
h1 , h2 {color: #99ccff; text-shadow: 0px 1px 1px #000}
</style>
</head>
<body>
<form>
<input type="button" value="Go back!" onclick="history.back()">
</form>
<form>
<input type="button" value="Go back!" onclick="history.back()">
</form>
</body>
</html>
Save lmenu.html
Now you're going to copy and paste the entire menu into lmenu.html
Copy and paste the code in dark red between the onclick buttons of lmenu.html
Where it's at:
<nav>
<ul class="hnavbar">
<li><a href="#heading">Home</a></li>
<li><a href="#heading">Media Queries</a></li>
<li><a href="#heading">Drop Down Menu</a></li>
<li><a href="#heading">Contact</a></li>
</ul>
</nav>
Where it's Going:
<form>
<input type="button" value="Go back!" onclick="history.back()">
</form>
Save it Here in lmenu.html
<form>
<input type="button" value="Go back!" onclick="history.back()">
</form>
Save lmenu.html
If you look at it with your browser, this is what you'll see.
All that's left to do now is hide the navbar and display lmenu.html in its place for smaller width devices.
We do that simply by adding a Media Query to the style sheet in myfirstpage.html
Copy and paste this media query code into the style sheet of myfirstpage.html below the last entry.
@media (max-width : 560px) {
header p {
float:none;
text-align: center
}
nav {display: none} /*Hide the navbar*/
.lmenu {display: block; margin:0 1%} /*Display lmenu*/
}
Save myfirstpage.html
The media query is activated at 560px width turns off the float: left property and centers the header text.
Flex the page in and out and you'll notice that the horizontal navbar disappears instead of wrapping as shown here and lmenu is displayed in its place..
This is what the web page looks like viewed in the emulator at 412 pixels.
If this is what you see, you're doing well and ready to move on to adding drop down menus and images.
What's Next?
The next Lesson add an image to myfirstpage.html and make it responsive.
You should begin to test the web page with the Emulator Tool.
At this point you should also be checking your code in the W3C Validator.
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.