For this project, you'll be building a portfolio website. You will be provided a design mockup as image files, and you must replicate that design in HTML and CSS. You will develop a responsive website that will display images, descriptions and links to each of the portfolio projects you will complete through this course. Please note that while you should aim to recreate the mockup, you may also use your own custom images to personalize this project.

Once you've successfully replicated the design mockup, you are encouraged to continue tweaking and making customizations to the design to personalize it and make it your own! This is your living portfolio site, so make sure you're happy with it.

The first thing potential employers look for isn’t which school you attended or what your GPA was; they want to see what you’ve built! You need a professional portfolio to show off your skills.

In this project you’ll build a great looking portfolio where you can show off images, descriptions and links to all of your projects. You'll do so by writing code that conforms to the guidelines stated herein.

You will learn how HTML is used to define the content of a web page and start to think of every web page as a number of boxes on the screen. You’ll then learn how to position those boxes and make them beautiful using CSS.

• Without a portfolio, recruiters won’t even look at your resume much less interview you.
• At their very foundation, web applications are just content delivery mechanisms; HTML defines how that language is structured.
• Reading poorly designed content is never an enjoyable experience; CSS empowers you to create beautiful content regardless of your user’s device.

The design mockup for this project is located inside this repository.

Consider using Bootstrap components and grid system.

Instructions:

1. Clone this project and find the mockup in the folder.
2. Identify the various boxes you will need to build in order to recreate this design.
3. Write your HTML and CSS files, continue to iterate until your work is representative of the design mockup.
4. Take the time to personalize your portfolio with custom colors, additional content and your own images.
5. Validate your HTML and CSS against the W3C's Validators.

Here are some tools you will find useful in checking your work —

• HTML Validator
• CSS Validator

Please note the HTML and CSS style guidelines below - following these is necessary to make sure your code passes the Code Quality rubric point.

• CSS - Use consistent indentation (tabs or spaces). (See: CSS General Formatting Rules-Indentation)
• CSS - Selectors, properties and property values (with the exception of strings) should be lowercase, including letters in hexadecimal color values. For example #f06c13 instead of #F06C13 and #ccc rather than #CCC. (See: CSS-General Formatting Rules-Capitalization.)
• CSS - Use IDs and class names that are meaningful or generic. (See: CSS-ID and Class Naming.)
• CSS - Use ID and class names that are as short as possible but as long as necessary. (See: CSS-ID and Class Naming.)
• CSS - Use Shorthand properties in all possible places for margin, border, padding, background. Examples: https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties. (See: CSS Style Rules-Shorthand Properties.)
• CSS - Indent block content between curly braces. (See: CSS Formatting Rules-Block Content Indentation.)
• CSS - End all declarations with a semicolon. (See: CSS Formatting Rules-Declaration Stops.)
• CSS - Add single spaces after each property name’s colon (See: CSS Formatting Rules-Property Name Stops.)
• CSS - Remove trailing white spaces from code. (See: CSS General Formatting Rules-Trailing Whitespace)
• CSS - Include a single space before the opening curly brace. (See: CSS-Declaration Block Separation.)
• CSS - ID and class names should not be used with type selectors. (See Style Guide: CSS Style Rules-Type Selectors.)
• CSS - Separate style rules with a blank line. (See: CSS-Rule Separations.)
• CSS - Remove units of measure after 0 values. (See: CSS Style Rules-0 and Units.)
• CSS - Use leading zeros for values in the code. (See: CSS Style Rules-Leading 0s.)
• CSS - Use 3 character hexadecimal notation for color in all possible places. For example #ccc rather than #cccccc. (See: CSS Style Rules-Hexadecimal Notation.)
• CSS - Separate words in ID and class names with a hyphen. (See: CSS Style Rules-ID and Class Name Delimiters.)
• CSS - Remove CSS hacks or user detection from code. (See: CSS Style Rules-Hacks.)
• CSS - Separate selectors and declarations with new lines. (See: CSS-Selector and Declaration Separation.)
• CSS - Use double quotes for all attribute selectors and property values. (See: CSS Formatting Rules-CSS Quotation Marks.)
• CSS - Identify groups of related style rules with section comments. (See: CSS Meta Rules-Section Comments.)

• HTML - Element and attribute names should all be lowercase. (See: Capitalization.)
• HTML - Use HTML5. (See: HTML Style Rules-Document Type.)
• HTML - Use UTF-8 as character encoding. (See: General Meta Rules-Encoding.)
• HTML - Place all block/list/table elements on a separate line and indent child elements. (See: HTML-General Formatting.)
• HTML - Use semantic tags. (See: HTML Style Rules-Semantics.)
• HTML - Provide alternate content for multimedia. (See: HTML Style Rules-Multimedia Fallback.)
• HTML - Remove trailing white spaces from code. (See: HTML - General Formatting Rules - Trailing Whitespace.)
• HTML - Use consistent indentation (tabs or spaces) (See HTML - General Formatting Rules - Indentation)
• HTML - Use comments to explain the code. (See: General Meta Rules-Comments.)
• HTML - Mark action items with TODO. (See: General Meta Rules-Action Items.)
• HTML - Remove entity references. (See: HTML Style Rules-Entity References.)
• HTML - Remove type attribute from link and script elements. (See: HTML Style Rules-Type Attributes.)
• HTML - Use double rather than single quotation marks for attribute values. (See: HTML-HTML Quotation Marks.)

--GOOD LUCK--