COSC 171 Lab 4.3 | HTML+CSS Home Page

Steps

In this lab, you will work through a tutorial on web design with HTML and CSS, modifying the code according to your proposed website.

HTML: In the HTML, change the following parts to something appropriate for your site:

title
the page names in the Site navigation menu
the main content heading (the part inside of <h1> ... </h1>
the main content paragraphs (the example includes three; update yours to something appropriate for your main page)
in the <address> part, change the date to today's date, and 'myself' to your name.
when you save your file, use the name index.html

COLORS: Step 2 describes how to change the text color and the background color. Change your colors to match the theme you described for your website in lab 4.2.
FONTS: Step 3 describes how to set fonts. Visit www.typetester.org and compare several fonts. Choose from the "Safe List" at the top. Change the fonts in your page according to your preferences.
NAVIGATION: Step 4 describes how to build a navigation bar. Update yours accordingly.

If you want a right-side nav bar, change left and padding-left to right and padding-right.
If the names of your pages are wider than the example, increase padding-left and width to larger values.

STYLED LINKS: change the font colors and background colors used for your navigation links to match the color palate you've chosen.
FOOTER LINE: read about CSS Border Properties. Select a style appropriate for your site and customize the border. Options include thin, medium, or thick; and dotted, dashed, solid, or double...
SEPARATE STYLESHEET FILE: move your stylesheet into a separate file. Rather than the name myfile.css (as proposed in the tutorial), use your own name along with the word style, e.g., brians-style.css or jennifers-style.css

When you've finished this part, take a screenshot of the final product in a web browser and save it as a jpeg file named yourname-screenshot.jpg.

Prepare a single, virus-checked, zipped archive including three files: