QR Code Responsive Design

What are you most proud of, and what would you do differently next time?

Reflection

• Proud of: Crafting a pixel-perfect card entirely with HTML & CSS—matching the Figma spacing, border-radii, and color palette exactly. Successfully navigating GitHub Pages deployment andRepo flattening for a full-stack workflow.
• Next time: Plan folder structure up front to avoid mid-project moves, use CSS custom properties for easier tweaks, and adopt a BEM naming convention for more maintainable CSS.

What challenges did you encounter, and how did you overcome them? 2. What challenges did you encounter, and how did you overcome them?

• Broken image & path issues: The QR asset wasn’t loading due to an incorrect <img> src. I fixed it by verifying my directory tree and using DevTools’ Network panel to spot the 404.
• Repo structure & GitHub Pages 404: Nesting files in qr-code-component-main/ caused Pages to 404. I flattened the repo to the root, reconfigured Pages settings, and resolved merge conflicts via Git.
• CSS fine-tuning: Matching exact padding, font sizes, and shadows took iterative rounds—each time overlaying the design in DevTools until it aligned perfectly.

What specific areas of your project would you like help with?

Accessibility enhancements: Adding ARIA labels, ensuring color-contrast ratios, and keyboard navigation for the card.

• Responsive refinements: Beyond the 375 px breakpoint—fine-tuning how the card behaves at intermediate widths (e.g. tablets).
• README polish & submission: Making the README more engaging (GIF demos, badges) and crafting targeted questions for Frontend Mentor feedback.