learn-co-curriculum / html-css-assessment Goto Github PK

Build a Responsive Website

Congratulations!!!

Congrats! You have completed all of the lessons for the HTML & CSS: Building Responsive Websites course. I know it was difficult, and I know you struggled but you made it through. Be proud of your accomplishment. Now it's time to show off what you know.

Below is the final assessment. Completing the assessment, and showing it off to a Learn Instructor is the last step to graduation. In this assessment you'll be finishing your personal website and making sure to make it responsive to many device sizes. The goal is to test everything you learned while attending this course. Below are a few complexity requirements. These are the minimum you need to do to show you've learned everything. Please do more! Have fun, build something you are supremely proud of and want to show off.

Once you complete the assessment, submit it on the right with a blog post explaining what you did and a video. You will receive a link to sign up for some one on one time with a learn instructor. The Instructor will ask you to walk through your code, and then do a bit live coding. Afterwards, you'll receive a final decision on if you passed or not. If you didn't pass, no worries! We'll give you some extra work to do to fill the gaps in your knowledge and then come on back for another assessment.

We're looking forward to seeing what you build!

Overview

In this lesson you're going to build a fully responsive website using HTML and CSS. Your site will render equally well on mobile and desktop browsers, hiding functionality gracefully as the width of the viewport changes.

You'll be building on top of the personal website that you've already put together and publishing your efforts on GitHub!

Requirements

1. Responsiveness should be achieved solely with HTML and CSS.
2. Your CSS should include no fewer than three @media queries.
3. You should use sprites for rendering icons.
4. Your website should have no fewer than five pages — unless:
   1. If you use advanced CSS techniques (transitions, scroll effects, etc.), your site can span fewer pages.
   2. A good rule of thumb is that 1 page = 1 fancy CSS effect.
   3. You could conceivably drop down to just one page — but it should be a very fancy page and navigating around your site should still be clean and easy to do!
5. Each page should include a navigation bar that's easy to use on small and large displays alike.
6. Your website should take advantage of additional screen real estate on larger displays. Don't cramp your users!
7. Your website should use tag, class, and id selectors appropriately. (Remember, be only as specific as necessary!)

Instructions

1. Use your existing personal website (which you've been working on throughout these lessons).
2. Be sure to save, commit, and push your changes to gh-pages.
3. Commit early, commit often!

Assessment

Be prepared to

1. Explain your CSS and HTML design choices. You might be asked why you chose a certain selector, or why you used an article instead of a div.
2. Refactor/reorganize your code.
3. Build a new page/section.
4. Change a section's style.

What to expect from the pairing session

• Try to talk through your process clearly, using technical terms you know as precisely as possible.
• If you make a mistake, correct yourself! We all mess up — shake yourself off and keep plugging.
• Trust your instincts.
• Trust us.
• Think on your feet. Feel free to look things up while you're pairing with us.
• Explain the details — we like details!
• You're going to learn a ton during the pairing session. We'll give you pointers and ways to improve your code. That doesn't mean that your code was wrong, just that (as with all of our code), it can be improved. Ask us questions if you don't understand (or even if you think you might not)!

What won't happen

• You won't be told you're ever wrong
• You won't be yelled at, belittled, or scolded
• You won't be put on the spot without support
• There's nothing you can do to instantly fail or blow it.