CSS Exercises: Personal Bio Site

Codepen Instructions

Create a new pen on Codepen.

Instructions

Create a site for your own personal branding.

This is a professional history page (basically an HTML version of your resume) with CSS:

• Each place you've worked must be contained in an article element.
• Each article element should have a header that contains the name of the company and the dates of your employment. BONUS: Ensure that the dates are semantically marked by being contained within the appropriate HTML element.
• Each article should have its own id.
• Each article should contain at least one section that describes your position there.
• No footer required for these articles.

Styling:

• Each article should use a different font family.
• All article headings should be the same font color (don't be boring).
• Site should have a background color or background image. Images google filtered for "Royalty Free"
• Each article should have a different border(weight,style,color).

NOTE: If you have less than two previous employers, either use your educational instituions as a substitute or make them up.

Final Product

CSS Exercise: Personal Bio Site with Styling

Codepen Instructions

Open up your personal bio site pen from the last exercise.

Instructions

Add the following to your personal bio site. Your site must contain at least the following (you are always welcome to do more):

• Add a contact me form with at least 3 fields(ex: name, email, message), validation for the fields and a button.
• A navigation bar with a header(text or logo) and at least 3 links(you can just have the links direct to other sites like Wikipedia)
• Show your top 5 favorite movies/books/tv shows using flex box. There should be an image and title for each one.