Mobile-first Responsive Layout

The Front End Web Development Techdegree is meant to train you in HTML, CSS, and JavaScript, and let you practice and show your mastery of these fundamental building blocks of the web. Because of that, please avoid using frameworks like Bootstrap, Foundation, Skeleton, and so on for this project. Even though you may end up using frameworks like these professionally, you still need to know and be able to implement designs with your own knowledge of HTML, CSS, and JavaScript.

Project # 2

This is the responsive layout project on Team Treehouse. Live link can be found here

Student Project Checklist

Screenshot

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 video on 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.

• 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.