My First Website

Learning Objectives

• Create a well-designed web page using semantic HyperText Markup Language (HTML) and Cascading Style Sheets (CSS).
• Apply techniques for validating and debugging web pages.

Setup

• You can work on your html/css files locally and then upload to this team repository when you are done. There is an editor in GitHub, but it is pretty "laggy"
• To make your site available, go to "Settings->GitHub Pages" and change the source to "master branch".

HTML Requirements

You will start with HTML and add style with CSS after you have a valid, semantic HTML document. Create your page in a file called index.html. Your webpage must have the following elements.

• A title.
• A level one heading with your names.
• A horizontal rule.
• Summarize the roles HTML, CSS, and JavaScript play in web development. Write one paragraph for each.
• Links (aka. anchors) to 3 helpful html and css resources. Add a title attribute to each link giving a brief description of the resource.
• Images of your favorite animals that link to the wikipedia page for that animal. Don't forget your alt attributes for accessibility. Not everyone can see images.
• Emphasize some text somewhere.
• Make some text strong.
• Display the pre-formatted code for a Java "Hello World!" program.
• A table containing data of your choice.
• Copyright (©) your page.
• A bulleted list with answers to the following questions (hint: use the google chrome inspector) to find the answers.
  • Which elements are block elements and which elements are inline? How do you know?
  • What is the default margin of the body element?
  • What are the default font-size and font-weight of the h1 element?
  • How long does it take to load your page?
  • How can you view the response status of the requested resources (e.g. images in this case)?

Validating your HTML

Before you start adding CSS to your page, run your HTML through the W3C Markup Validation Service. Fix any errors.

CSS Requirements

Create your style sheet in a file called style.css and link the external style sheet in your HTML head section. Use the chrome inspector to view the style of the elements as you make changes. Your webpage must have the following style definitions.

• Change the background color of the entire page (body).
• Change the font of the entire page.
• Change the font of your headers to a different font than the page.
• Play with the font-size of your headers.
• Use group selectors to change the text color of all list items and paragraphs.
• Change emphasized text to a different color so it stands out more.
• Modify the alignment of your headers (e.g. center, left, justify, right).
• Change the list style type of your bulleted list.
• How can you change it for only the sublist items?
• Add more space between list items.
• Remove the underline from the links on your page. How can you still make them look like links without the underline?
• Round the edges of your images so they look cooler.
• Change the opacity of the images when you hover over them.
• Change the background color of your "Hello World!" code and add a border around it. Play with padding and margin to see how they affect the element.
• Add borders and padding to your table.
• How can you view the response status of the requested resource (e.g. style.css in this case)?

Validating your CSS

Run your CSS through the W3C CSS Validation Service. Fix any errors.

Extras (if time)

Add a favicon to your page.

Presentation and Submission

Be ready to give a quick, 2 minute overview of your webpage.