In lab today you will be building a single responsive webpage based off of the provided design comp assets. This assignment is a lot of HTML and CSS, but no JS or jQuery.
Your document must be designed in a mobile-first approach and must be responsive when the screen size changes. The details of the media query specifications are up to you, but your breakpoint must be at 800 pixels, because that is what our imaginary client wants.
This is an independent project, but your are free to collaborate with your classmates.
GitHub Repository & Project Setup
- Create a repository called ui-challenge-1 for your work.
- Submit a link to this repository in the corresponding Canvas assignment when you are finished.
- Be sure to do your work in a non-master branch.
PLAN YOUR WORK AND WORK YOUR PLAN
Assignment Overview
The design comps can be found in the adjacent comps folder in this repo. These contain images of what you are striving to build in HTML and CSS, so be sure to open them up and keep them handy... but note that they are not for actual use on the page. You can also print out these comps and use them to mark up and sketch out page structure.
Requirements
- Use good HTML structure to scaffold this site, of course, using semantic elements where possible.
- Reminder: Container elements (a box outside of your content box that might contain multiple content boxes) are very useful in managing layout. You will need to think about the relationship between parent and child / descendant elements as well as the order in which you place them in the HTML. Be thoughtful about your CSS layout strategy.
- If you want, use SMACSS-style modularity to organize your CSS; there are no specific requirements. Feel free to try an alternate system for organizing your CSS.
- Style the page to reflect the comp images provided as closely as possible... the only text you should have in each box is the identifying letter, which should be centered horizontally and vertically.
- For the desktop view, the content should be inside of a channel that is 960 pixels wide and is centered on wider screen sizes.
- You will probably find it helpful to give each of the boxes a different background color.
- There are no right or wrong answers... just do your best.