FRONT END Project 2- Mobile-first Responsive Layout Solution

Before you start:
1. As with the previous projects, you'll submit your finished working using GitHub.

2. Download the project files. We've supplied three files for you to use:
• responsive-website_mobile.png is an example of how the layout should look on a mobile phone that’s 320 pixels wide.
• responsive-website_tablet.png is an example of how the layout should look on a tablet device that's at least 768 pixels wide.
• responsive-website_desktop.png is an example of how the layout should look on a screen that's at least 1024 pixels wide.

3. Explore the Chrome DevTools.
• Follow the guides in the three DevTool links provided in the Project Resources to learn how to use Chrome DevTools.
• Chrome DevTools is a powerful tool for understanding how the HTML and CSS you write is being displayed on the page. You can use the DevTools to find issues and diagnose problems you might find when building this project and future projects.

4. Project 2 Study Guide: https://drive.google.com/file/d/1PI-
2WNFoF3du5qe81cUmrjmq9FZd3yad/view

Instructions:
1. Create your file structure:
• Create an index.html and styles.css file.
• Create a folder called css and put your styles.css file inside of it. The name of the folder should not be capitalized.
• Link the styles.css file to index.html

2. Build the layout using a mobile first design:
• Make sure the HTML file includes the viewport meta tag in the head of the document. See Configuring the Viewport to understand why and how to add this tag.
• Look at the provided mockup for the mobile device and add the same header, titles, content and footer information into your index.html file.
• Use the provided images for the portfolio gallery images shown in the mockups.
• Use a font from Google Fonts for the text.
• Use CSS to style your layout to match the provided mobile mockup. Make sure your mobile design matches the mockup at 320px screen size.

3. Once you have everything in place for the mobile layout, use media queries to add breakpoints to adjust the layout for wider tablet and desktop screens.
• Match the design as it should look on a tablet device that is 768px wide and a desktop screen size that is 1024px wide.
• Use a mobile-first approach by writing your media queries using the min-width property in your CSS.

4. Once all your breakpoints are in place, double check your layout matches the three mockups.
• The design does not need to be exact, but the general spacing and arrangement of the elements should match the design of the mockups for mobile, tablet and desktop.
• Feel free to replace the profile image and customize the text, but the layouts should match the mockups.

5. Link your navigation menu to the correct sections of the page using IDs to link to anchor tags. See this: https://teamtreehouse.com/library/linking-to-sections-of-a-web-page

6. Make sure to check your code is valid by running it through an HTML and CSS validator.
• Links to the validators can be found in the Project Resources. This will help you spot any errors that might be in your code.
• 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.

7. Before you submit your project for review, make sure you can check off all of the items on the Student Project Submission Checklist. The checklist is designed to help you make sure you’ve met the grading requirements and that your project is complete and ready to be submitted!

8. If you're having trouble with this project, make sure you take a look at this great study guide: https://drive.google.com/file/d/1PI-2WNFoF3du5qe81cUmrjmq9FZd3yad/view

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 is an important part of being a top-notch developer. 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.
• Some browser options:
• Google Chrome
• Mozilla Firefox
• Internet Explorer/Edge
• Safari
EXTRA CREDIT
1. Add an additional section to the page, such as a skills section. Don’t forget to create a working link to your new section in the navigation menu.

2. Add at least TWO additional items to to further style and enhance the portfolio:
• A new background color for the navigation and/or main sections of the site.
• Change the color of at least one piece of text.
• Add one additional google font that is being used on the page.
• Any additional styling for links (ie, borders, hover states).

3. When creating your navigation bar, use the HTML5 <nav> element for extra structure and semantic markup.