Practice Assignment: HTML5 for Responsive Designs
Objective: The goal of this assignment is to assess your understanding of HTML5 and its use in
creating responsive designs for websites. You will be required to implement various HTML5
features to ensure that a web page adapts effectively to different screen sizes.
Instructions:
1. Basic Structure:
o Create an HTML5 document with the basic structure, including the <!DOCTYPE
html> declaration, <html>, <head>, and <body> tags.
o Set the document title to "Responsive Design Practice."
2. Viewport Meta Tag:
o Include the viewport meta tag in the <head> section to make the page responsive.
Ensure that it scales properly on different devices.
3. Semantic HTML5 Elements:
o Utilize at least three semantic HTML5 elements (e.g., <header>, <nav>,
<article>, <section>, <footer>) to structure your content logically.
4. Media Queries:
o Implement media queries in the <head> section to create breakpoints for different
screen sizes.
o Adjust the layout and styling of your page for the following breakpoints:
Small screens (max-width: 767px)
Medium screens (min-width: 768px and max-width: 991px)
Large screens (min-width: 992px)
5. Responsive Images:
o Include at least two images on your page, and make them responsive using the
appropriate attributes or CSS techniques to ensure they scale appropriately on
different devices.
6. Flexible Grid Layout:
o Create a flexible grid layout using either Flexbox or CSS Grid to organize content
on your page. Ensure that the layout adjusts smoothly on various screen sizes.
7. Navigation Menu:
o Implement a responsive navigation menu that collapses into a hamburger menu
for small screens.
o Ensure that the navigation menu adapts its layout for medium and large screens.
8. Testing:
o Test your responsive design on different devices and browsers to ensure
compatibility.
o Use browser developer tools to simulate different screen sizes and verify that your
media queries are working as expected.
