Ashton Taelman | Electronics & IT Student

Lab 4 - Responsive Webdesign

Goals Of The Exercise

  • Responsive Web Design: Make a web page responsive so it adapts smoothly to different screen sizes.
  • Media Queries: Apply media queries to change styles based on device characteristics like width, height, and resolution.
  • Responsive Images: Use techniques such as srcset and sizes to deliver images optimized for different screen sizes and resolutions.
  • Scalable Elements: Allow elements to scale dynamically with the viewport size for flexible layouts.
  • Text Styling: Format and style text effectively for readability and visual hierarchy.
  • Button Styling & Contrast: Style buttons with appropriate colors and ensure sufficient contrast for accessibility and user interaction.
Official CSS logo

Description

Lab 4 focused on building responsive web designs that adapt smoothly across devices. Key skills included applying media queries, using responsive images, and making elements scale with the viewport.

The lab also emphasized clear text styling and designing buttons with accessible colors and contrast. Together, these techniques create flexible, user-friendly websites that look great and work well on any screen.

Related Links

In this lab, I emphasized not only responsive styling but also accessibility and code quality. Tools like axe DevTools and the W3C Markup Validation Service helped me catch issues such as color contrast and semantic structure to ensure the design works well for all users.

Integrating these checks early supports writing clean, accessible, and maintainable code as I create flexible, user-friendly layouts.

Reflection

This lab challenged me to balance responsive design with accessibility and clean coding practices. At times, ensuring all elements scaled well across different devices while keeping semantic structure intact was tricky.

I learned the importance of validating both HTML and CSS early to catch issues that could affect usability. Overall, the experience strengthened my understanding of how to create flexible layouts that work smoothly and remain accessible, even as complexity grows.