- 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.
- 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
- If you saw this HTML:
<div class="box box1 box2 box3"></div>
which class has the most specificity weight? - Describe the difference between
display: block;
anddisplay: inline;
. - While using flexbox, what axis are you using when you use the property:
align-items: center
? - What is the difference between fixed layout, adaptive layout, fluid layout, and responsive layout?
- Why do we need to use the CSS property max-width on the outer most container in a responsive website?
- This project has many parts involved 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.
- 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 thehtml
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, thedesktop-design.png
file is 1000px wide.
- 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.
- 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
-
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.