How to Create Responsive HTML5 Web Pages
This 7 Step tutorial will teach
you to create Responsive HTML5 web pages using a simple hands on approach.
You will copy and paste HTML5 code into NotePad or Linux based text editor, then enhance its appearance using CSS (cascading style sheets).
About the Web Page You'll Build
You might recognize it. It's from the responsive mobile ready #402 template kit we offer on our home page. If you complete the tutorial you'll have a better understanding of how HTML and CSS work together and the importance of Responsive Web Design.
Want it now? Download Template #402 - 6 Page Kit
Responsive Web Design? This web page when finished won't just be liquid. It will be mobile ready.
RWD means if some one pulls the page up on a desk top or laptop it will display like the picture above.
If some one accesses it with a cell phone it adapts its appearance to the picture on the left; complete with our recently added lmenu feature.
Static websites are DEAD!!!
You still want to build one? Get ready to join the ranks of the future internet 'Walking DEAD'
Getting Ready
If you know how to copy and paste, how to find and use the text editor provided with your system and how to find files on a hard drive using file:/// in a browser address bar, you should be able to complete the tutorial.
How to Use this Tutorial
Read ALL INFORMATION and then execute the Exercise at the bottom of each page. Don't Skip Anything!! Complete all 7 exercises.
Important
If you just run through the tutorial copying and pasting, you won't learn a thing.
Examine the HTML code, then 'copy & paste'.
Preview the page before you add the CSS.
Examine the CSS and try to see how it relates to the HTML code, then 'copy & paste'.
Preview the page again and notice the changes in appearance.
DO NOT USE WYSIWYG editors like Komposer, Seamonkey etc!!!
Get Organized!!!
Important: Create a special folder to store your HTML and CSS pages in.
Name it something like htdocs.
Make it easy to find. Create it right on your c drive as c:\htdocs
Create another folder INSIDE the c:/htdocs folder.
Name it images.
This will help you to start out in an organized fashion and find the page with your browser when previewing.
You will save pictures that we provide in Exercise 6 in the c:/htdocs/images folder.
HTML5 Code
The secret to learning HTML code is to USE AS LITTLE AS POSSIBLE!
You should spend as much time or more learning about CSS (cascading style sheets).
The Basic HTML5 Page
This is all the code you need to get started.
The code in red will provide the location for your embedded style sheet.
The viewport meta tag tells the browser, "Hey, you can send this page to a cell phone screen. We ready!"
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title is required</title>
<meta charset="utf-8"> <!--Required -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
</style>
</head>
<body>
</body>
</html>
Building Your Page Structure
Because so many people are viewing websites on cell phones these days, I've modified this tutorial to include an introduction to Responsive Web design.(Lesson 7)
Liquid pages expand and contract with the size of a visiting browser.
Responsive Web Design web pages conform to the different monitor resolutions used by devices like cell phones, tablets and small notebooks.
Note: It is a short step from liquid to mobile ready and Responsive Web Design.
Responsive Web Design or a website that can be viewed in any device is the future of web design. Complete this tutorial and you will be moving in the direction of the future. Static design is dead!!!
The entire structure of our HTML page, its rows and columns, will be defined using divisions and relative values (percentages).
What's that? For now, think of divisions as 4 sided empty boxes on your page that you are going to fill with pictures and text, even videos.
CSS (Cascading Style Sheets)
The more you learn about CSS, the more sophisticated a website you will be able to build.
You can, however, create a very impressive website by just learning the basics.
What the CSS Does
The best way to see what the CSS does is to preview the web page before and after you add the CSS.
We will provide an explanation of what each line of style text does for those that need it.
Head and Body
Every web page is divided into 2 sections. Head and Body.
The Head section is at the top of the page and contains data mostly for the browser. People won't see the stuff you add to your head section.
Information in the head section lives between these 2 tags: <head> </head>.
Our Stylesheet will live there.
So, when I say, 'Copy and Paste into the stylesheet', you'll be pasting into the head section between the style tags shown above in red.
The Body section is always under the Head section. The HTML Code for the body section lives between these 2 tags: <body> </body>
Summarize it: Paste CSS in the top - HTML code in the bottom.
Okay Already! A lot less talk and a lot more DO ahead.
Before You Start
We went a step beyond the call and made the tutorial liquid.
If you're working on a nice big desk top or lap top you can set the tutorial up just like this.
Open the tutor in your browser and place the tutor on the left. To make it easier, you'll need a second browser for viewing your web pages. You'll need more than 1 if your going into web development. I have 7. I recommend Microsoft Edge because of their superior Development Tools.
Notepad Set Up
Open
Notepad and place it on the right.
Paste your HTML code and CSS in the Notepad editor on the right. We'll use an embedded stylesheet to simplify the process.
Note: My setup is on Linux, so I use LeafPad.
See: How to Preview Your Pages in a Browser or you can skip it if you know how to use file:/// in the address bar.
Ready to work? Start the first Exercise!
First Exercise
You're going to create an html file in this exercise.
Saveit in your c:\htdocs folder.
HTML5 Design
Copy and Paste into NotePad
This is the HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>I Love Responsive Web Design</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
* {
margin:0 0 0 0;
padding:0 0 0 0}
body{
max-width:1440px;
margin:0 auto;
font-family: Arial, verdana, tahoma, sans-serif;
font-size:20px;
font-style:normal;
font-weight:normal;
color:#444;
background:#fff
}
</style>
</head>
<body>
</body>
</html>
Save the web page as template-402.html
The .html extension is crucial.
Once you save the HTML page you can look at the page with a browser. Right now you'll get a blank white page.
Style Sheet Design
We'll use an embedded stylesheet (located in head section of document) to simplify the process for now.
Explanation
The first block closes all gaps in your displayed code. It removes any default values for margins and padding for elements that you add to the code of the page.
The second block of CSS defines the body section of the web page.
Max-width: - sets the maximum width that the page will spread out.
I've set it to 1536 pixels because I prefer a compact design when the site is viewed on high res machines.
If you have the luxury of a high resolution monitor you can experiment with setting it narrower .
margin: 0 auto - centers the body within the viewing browser window.
If you are working on a low resolution machine say 800 or 1024 pixels the web page will adjust to your browser window.
The line, color: #444 defines the default color of text elements like paragraphs and header tags.
The background color is defined in hexidecimal code #fff and produces the white color you'll see when you preview the page.
We also
define the default font settings for the web page.
font-family: arial, tahoma, verdana, serif;
If we define the default font-family at the top of the style sheet we can experiment with the different font faces by simply changing their order.
Place your preferred choice first in the list.
We set font-size to 18 pixels, font style and weight to normal.
The Result
Future Web page builders will see an empty white colored browser window.
Were you successful? If you were, congratulations!!
If you see code in your browser, you probably saved your page with a txt extension.
If you typed the code instead of pasting you may have errors.
Check the extension of your saved file. It should be .html
Go back and read the information again. Don't skip any steps.
If you are using a WYSIWYG editor, GET RID OF IT!!
If you are using an HTML editor that doesn't support HTML5, get rid of it. It will probably trash your code.
For best results copy and paste the HTML code and CSS for now.
The HTML code and CSS must be exactly as shown.
Helps
If you missed the tutor on previewing HTML pages with a browser and are having problems, Visit that tutor now.
I don't see my pages!!!
If using Notepad to build your pages, you save them and come back later and they aren't there, click the All Files filter. Notepad only shows your txt files by default.
QuizTime
Test Your Comprehension
Take a quiz on the information presented so far.
Ready to Proceed
Are you comfortable with your tutor set up? Make adjustments now.
Want to speed things up with a free HTML editor? Get NoteTab Light for Windows users. I wish I could still use it on Linux. But Alas, we must pay for our sins. I'm stuck with BlueFish.
When you're comfortable and get everything working with the desired result in your browser, you are ready to proceed to the next exercise.
Don't go on unless you have a basic understanding of the copy, paste, save and preview procedures presented so far.
If you find any errors in this tutorial, please report them to Charles.
Free Tools and Resources We Recommend
- 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 Logo Generator Turbologo.com
- If you are building a website for business you need to begin thinking about creating a brand identity. An unforgettable logo could be just the start you need. You can create it free at Turbologo.com. They also provide generators for business cards and letterheads.
- 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 BlueFish HTML editor. You'll find it in your software repository. It does have some QUIRKS, but it's FREE.
- For image resizing we've found the easiest Linux tool to be Krita.