CreateaFreeWebsite  with Responsive Design Tutorials

General

 

9 Step Tutor

How to Create a Web Page with HTML5 and CSS

Then Make it Responsive

This 9 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).

You'll actually see how HTML and CSS work together and the importance of Responsive Web Design.

Responsive Web Design?

This web page when finished won't just be liquid. It will be mobile ready.

Responsive Web Design means if some one pulls the page up on any size device will display like one of the two pictures shown here.

 

On a Tablet
@ 912 pixels

The website you will create.

On a SmartPhone
@ 412 pixels

It's mobile ready.

 

FIRST TIMERS!!

Things you'll need to know:
How to create new folders
How to Copy and Paste
How to find and use your Text Editor
How to use a browser offline
If you don't know how to do any of these things, start with How to Use This Tutorial.

All GOOD? You should be able to complete the tutorial in about an hour.

Get Organized!!!

Important!!!! Create a special folder to store your HTML and CSS pages in.

Name it htdocs.

Make it easy to find.

Create it right on your c drive as c:\htdocs (Windows Users) or your Parent drive on Linux home/parent/htdocs

Create another folder INSIDE the /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 /htdocs/images/ folder.

Getting Ready

 

Tutorial Set Up

Tutor and Text EditorOpen your text editor and place it on the right.

Open the tutor in your browser and place the tutor on the left. Open 2 tabs in the browser one for the tutor and one to view the saved changes to myfirstpage.html. Or you can use a second browser for viewing your web pages.

Paste your HTML code and CSS in the Text editor on the right. We'll use an embedded stylesheet to simplify the process.(That just means it's all one page)

 

Ready to work? Start the first Exercise!

First Exercise

You're going to create an html file in this exercise.

Save it in your c:\htdocs folder(Windows)
home/parent/htdocs (Linux)

Copy and Paste the entire block of code into your Text Editor

This is the HTML code:


<!DOCTYPE html>
<html lang="en">
<head>
<title>I Love Responsive Web Design</title>
<meta name="description" content="">
<meta name="keywords" content="">
<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:768px;
margin:0 auto;
font-family: Arial, verdana, tahoma, sans-serif;
font-size:20px;
font-style:normal;
font-weight:100;
color: #444444;
background-color: #ffffff
}

</style>
</head>
<body>

</body>
</html>

Save the web page as myfirstpage.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.

The 6 page #402 Kit uses a linked style sheet.

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 768 pixels to make it easier for those not working on desk tops.

If you are working on a smaller device than an Ipad mini(768 pixels) you can experiment with setting it narrower.

margin: 0 auto - centers the body within the viewing browser window.

The line, color: #444444 defines the default color of text elements like paragraphs and header tags.

The background color is defined in hexidecimal code #ffffff and produces the white color you'll see when you preview the page.

Recommended FontsWe 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 20 pixels, font style and weight to 100.

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 may have errors or you saved your page with a txt extension.

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 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.

W3C Validator

Using W3C Validator: It isn't that hard to create error free code if you start out right. Get into the habit of using the W3C Validator to check your web pages before uploading them. We prefer the Direct Input option. If you need a quick tutorial get it here.

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 on Linux.

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.

Top

 

 

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 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.