Skip to content

Latest commit

 

History

History
62 lines (46 loc) · 4.35 KB

README.md

File metadata and controls

62 lines (46 loc) · 4.35 KB
Raw

Assessing Your User Interface and Responsive Design Learning

  • The objective of this challenge is test your knowledge on all of the topics surrounding user interface and responsive web design you learned this week.
  • Answers to your written questions will be recorded in Answers.md
  • This is to be worked on alone but you can use outside resources. You can reference any old code you may have and the training kit content, however, please refrain from copying and pasting any of your answers. Try and understand the question and put your responses in your own words. Be as thorough as possible when explaining something.
  • Just a friendly Reminder Don't fret or get anxious about this, this is a no-pressure assessment that is only going to help guide you here in the near future. This is NOT a pass/fail situation.

Start by forking and cloning this repository.

  • Fork / Clone this project into a directory on your machine.
  • cd into your forked local copy.

Questions - Self Study - You can exercise your Google-Fu for this and any other Sprint Challenge in the future. Remember to record your answers in Answers.md

  1. If you saw this HTML: <div class="box box1 box2 box3"></div> which class has the most specificity weight?
  2. Describe the difference between display: block; and display: inline;.
  3. While using flexbox, what axis are you using when you use the property: align-items: center?
  4. What is the difference between fixed layout, adaptive layout, fluid layout, and responsive layout?
  5. Why do we need to use the CSS property max-width on the outter most container in a responsive website?

Lets get started on the project!

  • This project has many parts invovled in it. You will start with a half built website that isn't ready for responsiveness. You will need to complete the tasks below to successfully finish the website. For this project you have been provided design files which you must successfully match at the viewport sizes of 1000px, 768px, and 400px.

Complete the following tasks to set up a responsive website project

  • Correctly place a viewport meta tag in the head of your index.html file that contains these values: content="width=device-width, initial-scale=1.0"
  • In your CSS, Introduce font-size:62.5%; to the html element.
  • Convert all pixel font-sizes into rems and use rems for anything new you build.
  • Convert .container into a max-width responsive class based on it's fixed width's current size.
  • The header and jumbotron are missing from the code. Use the image named desktop-design.png to create a pixel perfect replacement. Please note, the desktop-design.png file is 1000px wide.

Complete the following tasks for desktop at a screen size of 1000px

  • Update the background colors on the following boxes:
    • box2: forestgreen
    • box4: darkorchid
    • box6: hotpink
    • box8: indigo
    • box10: lawngreen
  • Please reference the design file desktop-design.png and make sure your layout matches this design as close as you can.

Complete the following tasks for tablet at a screen size of 768px

  • Update the background colors on the following boxes:
    • box1: teal
    • box3: gold
    • box5: cadetblue
    • box7: coral
    • box9: crimson
  • Please reference the design file tablet-design.png and make sure your layout matches this design as close as you can. Make sure you look at the header

Complete the following tasks for phone at a screen size of 400px

  • Remove box 10 and reverse the order of the boxes.

  • Please reference the design file phone-design.png and make sure your layout matches this design as close as you can.

  • Once you're done with all the tasks, push your commits to your fork and submit a Pull-Request

Stretch Goal

  • Introduce your own content updates into a new section under <section class="bottom-content">. Try to use the same margin and padding to create a coherent addition to the design. Remember to make sure the new content is fully responsive and works well with the other requirements.

Note: The stretch goal is very open ended, there is no "right" thing to do here.

Remember you can use any resources you want to solve these problems, but avoid copying/pasting solutions you've previously written. Also if you don't finish all of the challenges, that's fine! Just do what you can and submit your challenges in the end! HAVE FUN!