How to Create a Web Page with HTML5 and CSS
📖 How to Make a Top Button
You should complete these lessons in order. If you haven't completed the first 6 exercises, go back and start at the beginning. Exercise #1
With mobile devices cornering about 60% of web traffic these days, it's a good idea when building long scrolling pages(seems to be the trend) to provide an easy means to get back to the top of the page without those 3 or 4 swipes.
Adding a Button that's fixed to the viewport and always visible is a must.
Seventh Exercise
Copy and paste this code above the closing tag of the main element.
<p><a class ="top-button" href="#">Top</a></p>
</main>
🔴 Save myfirstpage.html
Copy and paste this CSS above the media query in the style sheet.
p a.top-button {
/*Button*/
display : flex;
justify-content : center;
align-items: center;
position: fixed; /*Make it Sticky*/
bottom: 2rem;
left: 1.5rem;
width: 3rem;
height: 3rem;
background: dodgerblue;
border: solid 4px #ffff00;
border-radius: 50%;
box-shadow: 1px 1px 4px #000;
/*Button Text*/
font-family: Helvetica , arial, serif;
color: #fff !important ;
font-size: 1.125rem;
font-weight: bolder;
text-decoration: none;
text-indent:0;
text-shadow : 1px 1px 2px #000;
}
p a:hover.top-button {
color: #000 !important ;
background-color: whitesmoke ;
box-shadow: 1px 1px 4px #000 inset ;
text-shadow:none;
border: solid 1px #000;
}
🔴 Save myfirstpage.html
👀 Preview the web page and see how it works.
How to Use the Web Developers Emulator Tool
The Web Developers Emulator tool allows you to simulate viewing your finished web pages in different sized devices. Cell phones, tablet, laptops, desk tops and anything in between. Check out our new Emulator Tutorial.
What's Next
I highly recommend that you delete all your work and start through the tutorial again.
Try to develop your own system for copying and pasting code and previewing in a browser.
Run through the tutor as many times as you can until you're comfortable with the process.
View your web page in the browser before and after you add the changes to your style sheet.
If you've found one, complete the exercises using your HTML editor.
Advancing with Flexbox
If you've completed this tutorial, you may want to go right into the Flexbox tutor and learn the easy way to create multiple column web pages.
We've also upgraded our free templates to flexbox. Try one.
Single Column Design
Multi Column Design
Multi Page Multi Column Design
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.