QR-Code

For my first Frontend Mentor project, I had to design a static web page with a QR-code.

The task

I was provided the design, a Figma file and the content. I was required to write the HTML and style the CSS, as well as optimise for mobile, too.

Approach

To start, I wrote down every HTML element I could see in the design and pre-empted the rough structure in my mind before I begun. Then, I wrote up the HTML.

Then, I began to style piece by piece.

I designed with a Desktop-First Workflow which I learnt is atypical compared to Mobile-First.

Outcome

I came up with a design that was just like the one provided, which I was satisfied with. I enjoyed finding ways to code design aspects like a border-radius and other small details that catch my eye quickly as a designer.

🧩 Live Site - https://i000o.github.io/fem-qr-challenge/
✏️ Frontend Mentor Solution - https://www.frontendmentor.io/solutions/responsive-qr-code-for-desktop-and-mobile-PELngEEDvJ
👾 GitHub Repository - https://github.com/i000o/fem-qr-challenge.git

Feedback

I got positive and really helpful feedback on this project which I integrated on reflection after sharing. This included how to center content in Flexbox and style font-sizes with relative units. See below:

Source: https://www.frontendmentor.io/solutions/responsive-qr-code-for-desktop-and-mobile-PELngEEDvJ

Lessons

1. I designed with Grid instead of Flex due to not understanding layouts well yet

2. I wrote up media queries when I didn’t need to

Extra to be aware of

3. Accessibility Law requires that every page must have a h1 on it somewhere. What do we do when there isn’t an obvious one?

Take forward…

❕Do the simplest thing. Don’t overdo things and give yourself unnecessary, time-consuming work.

❕Your design-eye comes in handy here… You notice things that others don’t.