Front End Web Development Project 1: Personal Profile Page

Project Instructions

Create or find an image file to represent yourself and a new image for the background. Be aware of file size: keep the profile image under 400 KB and the background image under 1 MB. http://picresize.com/

Using a text editor, modify the HTML of the index.html file:

• Add the images you collected in step 1 to the page. Please leave the class "profile-image" intact on your profile image.
• Don't forget to update the text for your new profile image's alt attribute!

Personalize all the text on the page by changing the name, background and goals. Feel free to make up the information if you do not wish to share anything personal.

Add links to your GitHub, Twitter and LinkedIn accounts. If you don't have a Twitter or LinkedIn account, or don't want to share those, then you need to delete those links.

Edit the href value of the Home link so it navigates to index.html. Note: do not use root relative links, or links that begin with a leading forward slash, /.

Feel free to expand on this project, by adding an additional page or two, adding more images and customizing the CSS.

If you do not want to add an additional page then delete the experience link in the HTML.

Put your project files in a new GitHub repository on your GitHub account:

• Make sure that you're only putting the files for this project in that repository.
• Please do not create any new folders for this project.

Make sure to check your code is valid by running it through an HTML and CSS validator.

• There are a few exceptions that you don’t need to fix:
  • Don’t worry about any warnings, we just need you to check any errors that might be there.
  • If CSS validator flags use of calc, vendor prefixes or pseudo-elements/pseudo-classes these errors should be ignored.
  • If HTML validator flags use of pipe (|) in Google font links/URLs this error can also be ignored.

NOTE: A good practice is to check your project for cross browser compatibility. Making sure that it looks and functions correctly in multiple (at least three) browsers. If you want, leave a comment to the project reviewer about which browser(s) the project was checked to ensure they are seeing things as you have designed them.

Extra Credit

Create additional pages to expand on this online profile.

Edit the styling of the profile photo’s CSS properties. Pick at least one of the following properties to change:

• border
• border-radius
• transition

Add more photos and imagery to the page

Add more text to the page, such as a list of your hobbies.