Web Dev 4 Assignment
This week we are going to be working with Responsive Web Design. In Responsive Web Design we can program our websites to have a different look and feel at different resolutions (just as the image above illustrates) where a desktop can receive one layout, a tablet can receive another layout, and a cellphone could get another layout.
We are going to specifically work with CSS Breakpoints. This project will be a practice project where we will create 7 different breakpoints. You will create your own resolution breakpoints, but let’s say that the largest is going to 1900 pixels in width (or more), and the smallest will be 600 pixels in width (or less). The others will be ranges in the middle – that you define.
I want you to follow the following rainbow image as a guide. Go from one side to another, where as the screen gets smaller or larger the background color of the website changes to the hexadecimal colors below. It should follow the order below (only 1 color will be on screen at a given time):
In addition I want you practicing with display property. I want you to have a single paragraph tells me the min and max of the breakpoint. When we are inside that resolution size, the paragraph will have a display of block (display:block) – default display. When we are outside that resolution size I want that paragraph hidden with display:none.
You are going to have 7 paragraphs (with a unique ID for each). Only 1 will be visible on the screen at a given time.
If the CSS was turned off or not uploaded, we would see all 7 paragraphs as the CSS rules that hide 6 of the 7 at any 1 time would not load. (This should not happen, but as proof as concept you could always change your .css filename as a test and see if it behaves this way.)
- 7 paragraphs stating the min and max of the breakpoints.
- 6 of the 7 hidden at any one time, with only the paragraph of the active breakpoint visible at that breakpoint.
- Valid html
- Continued practice using the DOM.
- Practice and demonstrate understanding of Responsive Web Design by using CSS Media Queries.
- Use breakpoints correctly.
- Use the display property successfully.
What to turn in:
Upload your completed, valid project to a “week_04” folder. This will include:
- valid html document called “index.html” so it auto loads
- any other supporting assets (you will have them…what will they be? Hmmm.)
Test Test Test. Once you upload, test again.
Questions always ask, and ask them early!
- Assigned Wednesday, March 11th (11AM)
- Due Wednesday, March 25th (11AM)