From Webpage to Website

07.03.2016 |

Episode #9 of the course HTML and CSS Basics by Kim LaRocca Henry

 

Now that we’ve successfully created and styled our webpage, let’s turn the webpage into a website!

First, make a folder somewhere on your computer that will hold all of your website files. Inside that folder, make a copy of your basic HTML5 webpage from the previous lessons and name the file index.html.

Index.html is the filename you should use for your website’s home page. When you go to a website (e.g., www.YourDomainName.com), the web browser will do a lot of things in the background to figure out what to display. One of those things is looking for the index.html file, which is the default home page of a website. You can also name your home page default.html, but naming it index.html is more traditional and more widely used.

Now that we have our home page setup, let’s make a few changes to the code.

 

9_2_HTML and CSS BasicsView, copy, and play with this code on CodePen at http://codepen.io/kimlarocca/pen/JGqmzP

 

We need to update the navigation of our webpage so that all the pages go to the correct file. The code for our navigation is on lines 12-20. Change the link on line 15 from <a href=”#”> to <a href=”index.html”>. This code will send the user to your home page when they click on the “Home” link in the navigation.

Go ahead and update lines 16, 17, and 18 as well. We will be naming the “About Us” page about.html, the “Our Services” page services.html, and the “Contact Us” page contact.html. Open up each of these files and change the H1 header text to reflect the title of the page; for example, on the “About Us” page, the H1 code should be <h1>About Us</h1>:.

 

9_3_HTML and CSS Basics

 

View Your Website

Select your favorite web browser (Chrome, FireFox, Safari, Internet Explorer, etc.) and open up the index.html file. You should see your home page displayed on your web browser. Navigate to the other pages to be sure all the links in your navigation code are correct!

 

Export Webpages from CodePen

You can save any of the pages we have worked on during this course. All samples can be found at http://codepen.io/collection/ABaWre/. For this particular lesson, you can find the code samples here:

Home Page: http://codepen.io/kimlarocca/pen/JGqmzP

About Us: http://codepen.io/kimlarocca/pen/QyRZom

Our Services: http://codepen.io/kimlarocca/pen/pgmxYZ

Contact Us: http://codepen.io/kimlarocca/pen/MKdPxz

On the bottom right of the page, click on the “Export” button and then on “Export .zip” to save the files to your computer.

 

9_4_HTML and CSS Basics

 

Recommended book

“Universal Principles of Design: 125 Ways to Enhance Usability, Influence Perception, Increase Appeal, Make Better Design Decisions, and Teach through Design” by William Lidwell

 

Share with friends