Turn it in!
You have learned how to implement media queries, max-widths, and a handful of other responsive web design techniques, as well as situations in which to use them. However, without some practice, it may be difficult to plan a versatile page design. For this assignment, create a blog post to try out these techniques. This will let you concentrate on just one HTML page.
Blog: A simple website that contains a person's or group's observations, experiences, or opinions about a specific topic.
(Example: A cooking blog that shares thoughts, tricks, and instructions for preparing a specific recipe.)
Modern social media platforms use video content in this same manner, known as vlogging (video blogging). Content creators share their thoughts, opinions, and experiences with video content, instead of text and image-based content.
For this project, the important part is performing the responsive design tasks required, so you won't have too many limitations on your page's content.
Your blog post should include some imagery, a title, some font styling, and navigation links that take the user to older posts. (You don't have to make any other posts--these links will just 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 need to have:
- written blog content
- some form of responsive images
- a media query to relocate a section of your page
- a media query that hides/reveals something on the page
- a media query that makes the blog post more printer friendly
Make sure the responsive techniques in this project are done thoughtfully and with purpose. You shouldn't apply a media query just to do it, but rather it should benefit the design.
Tip: Consider writing about something local--a 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.
When you're done, save your HTML file and upload it to your GitHub repository. Then, submit the assignment link to your teacher. You will be graded using the following rubric:
| Blog Post |
|---|
| You have written content that reflects what would appear in an actual blog post or online journal entry. |
| Responsive Imagery |
| You have implemented responsive design with your images. |
| Relocating |
| A media query adjusts your page's layout to account for smaller viewports and mobile devices. |
| Hide or Show |
| Some aspect of the page displays or hides when a media query's criterion is met. |
| Print Version |
| A media query calls on appropriate style changes for the print media type. |
| Syntax |
| HTML and CSS code are accurate and use proper syntax. |
