Personal Profile Page Remake

In this exercise, we will be continuing the ProfileProject exercise from the HTML module. You will take the simple website you’ve created and add CSS to give your page some style.

Purpose

The purpose of this exercise is to take an existing HTML file and link an external CSS sheet as well as give you a first-time experience styling a webpage in a project.

Sample

Getting Started

1. Create a new project directory called ProfileRemake.
2. In your new project directory, add a css directory.
3. In the css directory, create a styles.css file.
4. Locate your ProfileProject from the HTML module.
5. Copy the index.html file from ProfileProject to ProfileRemake.

Requirements

• Must have already completed the ProfileProject exercise from the HTML module.
• Must have a background color.
• Must have a different color for the text.
• Must include a image formatted using css. No inline styles.
• Content must be centered in the middle of the page.
• Must be similar in style to above image.
• All code must be indented properly and contain no syntax errors.

Instructions

1. Open the index.html file in Sublime Text and the browser.
2. Link your CSS file to the page.
3. Add in a profile picture at the top of the page.
4. Open your styles.css file.
5. Target the body and add color, background-color, and text-align properties.
6. Target the image tag and set the height and width to a desired size.
7. Target the paragraph tag and set the width to 3 quarters of the page.
8. Recenter the paragraph tag by setting margin to 0 auto.
9. Target the unordered list and remove the padding.
10. Target the li tags and remove the bullets for the list items.