You have learned how to implement media queries, max-widths and a handful of other responsive web design techniques, as well as opportune situations to use them. However, without some practice it may be difficult to plan a versatile page design. For this assignment, we'll use a blog post to try these techniques out since it'll let you concentrate on just one HTML page.
We won't put too many limitations on your page's content. For this project, the important part is having ample opportunity to accomplish the responsive design tasks required. For your topic, you may want to consider writing about something local--an historical park, an annual block party, or one of your favorite places to hang out. These are only suggestions. The final content topic is up to you. Choosing a local topic may make it easier for you to take pictures to use on the website--as always, make sure you have permission before using pictures that involve other people or a store or business.
Your blog post should include some imagery, a title, some font styling, and navigation links that would take the user to older posts (you don't have to make any other posts--these links will be placeholders). Make sure you have sufficient content so that you make some decisions on ways to alter it for different-sized displays.
For your completed blog post, you will need to have:
 |
|
Note that the use of responsive techniques in this project should be done thoughtfully and with purpose. You shouldn't apply a media query just to do it, but rather it should benefit the design. If you don't have mobile devices to test the appearance of your design, you can also adjust the size of your browser to test the effects, assuming you haven't used device-based media feature criteria.
When you're done, save your HTML file and upload it to your Neocities account. Then submit the assignment link to your teacher. You will be graded using the following rubric:
Blog Post |
1 point | You have written up content that reflects what would appear in an actual blog post or online journal entry. |
Responsive Imagery |
1 point | You have implemented responsive design with your images. |
Relocating |
1 point | A media query adjusts your page's layout with the float property. |
Hide or Show |
1 point | Some aspect of the page displays or hides when a media query's criteria is met. |
Print Version |
1 point | A media query calls on appropriate style changes for the print media type. |
Syntax |
1 point | HTML and CSS code is accurate, and uses proper syntax. |
