HTML5, CSS, Flexbox, Google Fonts, CSS Box Shadow, Media Queries

What are you most proud of, and what would you do differently next time? What I Am Most Proud Of

I am proud of successfully replicating the design with clean, structured HTML & CSS while ensuring responsiveness across different screen sizes. I focused on using semantic HTML, proper CSS box model properties, and Google Fonts for better typography.

Additionally, applying box shadows and Flexbox helped me build an aesthetically pleasing UI that closely matches the given design.

What I Would Do Differently Next Time

Next time, I would:

• Improve accessibility by adding alt attributes with descriptive text for images and enhancing text contrast for better readability.
• Experiment with animations to add smooth hover effects and transitions for a more interactive experience.
• Optimize the code structure by using reusable CSS classes and reducing unnecessary styles.
• Try adding JavaScript to make the QR code interactive (e.g., allowing users to copy the link when clicking the image).

What challenges did you encounter, and how did you overcome them? Challenges Encountered

1. Understanding Design Specs from Figma

   • Using the Figma file helped get accurate measurements, but interpreting padding, margins, and font sizes required attention to detail.
   • Solution: Used Figma’s inspector to extract exact values instead of estimating, ensuring pixel-perfect accuracy.

2. Implementing the Exact Layout

   • Translating Figma’s design into HTML & CSS required careful structuring.
   • Solution: Followed a mobile-first approach, using Flexbox to align elements seamlessly.

3. Ensuring Box Shadows & Effects Matched

   • Replicating Figma’s shadows, spacing, and radius in CSS was challenging, as different browsers render shadows differently.
   • Solution: Experimented with box-shadow settings and cross-checked against Figma values.

4. Making the Design Fully Responsive

   • While the Figma file showed desktop and mobile versions, adapting the design dynamically required extra work.
   • Solution: Used media queries to ensure smooth scaling on different devices.

How I Overcame Them

• Utilized Figma's measurement tools to match exact spacing and font details.
• Applied CSS techniques like box-sizing: border-box and px units for consistency.
• Constantly checked browser previews to fine-tune responsiveness.

What specific areas of your project would you like help with? Specific Areas Where I’d Like Help

1. Enhancing Accessibility

   • While I followed the design closely, I’d love feedback on improving accessibility, like adding better alt descriptions for images and ensuring proper color contrast.

2. Improving Responsiveness Across Devices

   • I used media queries, but I’d like suggestions on how to better optimize layouts for smaller screens beyond just adjusting padding and font sizes.

3. Refining Box Shadows & Effects

   • Achieving the exact shadow and spacing effect from Figma was tricky. Any tips on perfecting CSS box-shadow values for consistency across browsers would be helpful.

4. Code Structure & Best Practices

   • I want to ensure my CSS is clean, efficient, and follows best practices. Would appreciate feedback on whether I could simplify styling or improve maintainability.

5. Potential JavaScript Enhancements

   • Right now, the project is static, but I’m curious if adding a small interactive feature (like a hover effect on the QR code) would enhance the experience.

---