Basic Website Project

First, download your HTML and JavaScript files. You can also download the blank CSS document, or create your own.

HTML

1. Open the index.html file in your text editor and in your browser
2. Edit the text to be custom to you.
3. Add a list of some things about you under h2 tag and before your p tag.
4. Add a button. How do I add a button?

---

CSS

1. Open the style.css file in your text editor.
2. Change all font to arial. How do I change the font in CSS?
3. Add some formatting to your header. Give it a background color, a new font color, and add padding around your text to make it look centered within the box.
4. Move your button to the next line and add a margin to your button so that it is more centered. How do I move an element to the next line?

---

JavaScript

1. Open the script.js file in your text editor.
2. Look at the function in the JavaScript.
3. Add an id of “header” to h1 in your HTML. How do I add an ID to an HTML element?
4. Link your JavaScript function to your HTML button. How do I link a JavaScript function to an HTML button?
5. Save and refresh your page and test your button!

---

Extra Practice

• Change the pictures to your own favorite books (or whatever!)
• Change the color of your button.
• Add additional buttons to change header to additional colors.
• Add a new element to your page.