CreateaFreeWebsite
with HTML and CSS
This 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.
Complete all lessons.
You'll need a few basic skills to finish the tutor.
Check the list in the red box and if you aren't ready to start visit the help page provided.
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.
First Get Organized👉
①Important!!!! Create a special folder to store your HTML and CSS pages in.
Name it htdocs.
Windows Users: Learn to use File Explorer. Find your personal folder. In Windows 11 it's Name-Personal. Create htdocs there. See: Create New Folder
Linux Users: Create it right on your Parent drive on home/parent/htdocs See: Create New Folder
②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.
①Open 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!
You're going to create a Semantic html document in this exercise and Save it in your \htdocs folder.
Semantic just means you'll be using block elements designed for a specific purpose namely: header, nav, main and footer.
You'll also be introduced to some of the more modern techniques of web development among them the use of the Clamp Function.
NOTE: CSS and especially the Clamp Function should be your focus in this tutorial. If you don't get anything else from it, LEARN to USE the CLAMP FUNCTION.
Copy and Paste the entire block of code into your Text Editor
This is the HTML code:
See Explanation Below
<!DOCTYPE html>
<html lang="en">
<head>
<title>My First Web Page</title>
<meta name="description" content="My first web page">
<meta name="keywords" content="first web page">
<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: 100dvw; /* 100% of viewport */
min-width: 22rem; /* 352px */
min-height : 100dvh; /* Use entire viewport height */
font-family: Helvetica , Arial, verdana , sans-serif;
font-size: clamp(1.25rem , 1.25rem + .25dvw , 1.375rem); /* flexes from 20px to 22px */
line-height : clamp(1.5rem , 1.5rem + .25dvw , 1.65rem); /* 1.2 to 1.5 X size of text */
font-style:normal;
font-weight: normal;
color: #444;
background-color: whitesmoke
}
</style>
</head>
<body>
</body>
</html>
🔴 Save the web page as myfirstpage.html in the htdocs folder.
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.
We used an embedded stylesheet (located in head section of document) to simplify the process for now.
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.
💡Take a quiz on the information presented so far.
If the information on the Clamp Function is confusing, you might want to take a time out and study the simple Tutorial we provide. Clamp Tutor
If you missed the tutor on previewing HTML pages with a browser and are having problems, Visit that tutor now.
WinTips demonstrates another and much simpler method of adding popups to your web pages. Uses Simple HTML and CSS with no iframes and a lot less code. It even provides an easier way to hide the scrollbars. The actual code for the demo in our button gallery.
📦Think you can use the Explanation Button Tool on your site. Download the Explanation Kit and try it for yourself. It's plug in ready.
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.
Are you comfortable with your tutor set up? Make adjustments now.
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.
7 easy copy and paste lessons. You'll also learn how to use the clamp function and the art of nesting in style sheets for more manageable CSS.
Start Lesson #1
Note: Nesting in style sheets is new and a lot of HTML editors don't support it yet. One that does: Geany (cross platform).
They're copy and paste. Flexbox can be as confusing as you want to make it. Start simple with these working examples.
We're in the process of converting all our Free Templates to Flexbox. The single page single column designs are ready. They are complete with plugin navigation devices from our Navbar Collection.
Click Me to Take one for a Spin