Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Frontend Mentor - QR code component

@Ryn-Bghl

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

I am particularly proud of the responsive layout of my project. By using Flexbox and relative units, I was able to create a design that adapts seamlessly to different screen sizes. Additionally, leveraging CSS variables for managing colors and fonts made the code much cleaner and easier to maintain.

I learned the importance of good accessibility, particularly by using descriptive alt attributes for images, which enhances the experience for users with screen readers. I also deepened my understanding of font management and content fluidity with CSS properties like box-sizing and overflow-wrap.

Next time, I would focus more on improving accessibility and optimizing performance, such as reducing image sizes and avoiding the use of experimental CSS properties. I would also explore advanced techniques for text rendering to ensure an optimal user experience across all devices.

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

One of the main challenges I faced was ensuring the responsive design worked seamlessly across various devices. Initially, certain elements were misaligned or did not scale properly, leading to an inconsistent user experience.

To overcome this, I implemented CSS Flexbox for the layout, allowing for a more adaptable arrangement of elements. I also utilized relative units like percentages and rem for sizing, which helped maintain proportions across different screen sizes. By testing the design on multiple devices, I was able to make necessary adjustments to ensure a smooth and responsive layout.

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

I am interested in learning more about advanced CSS techniques, specifically CSS Grid and animations. I would appreciate guidance on how to effectively integrate these techniques into my current layout to enhance the visual appeal and user experience. Any resources or examples of best practices would be greatly helpful.

Community feedback

Jorge• 40

@Broderpixelv1

Posted

good job!!, I suggest you take it to another level by using flexbox to center and margin the boxes, for example, instead of using:

main { position: absolute;
  top: 50%;
  left: 50%; 
...

try to use in body

body { display:flex;
justify-content:center;
align-items:center;
...

this will center the main, I hope this is a useful tip to get more out of flexbox, keep going.

0

P
Zugim• 60

@Zugim

Posted

@Broderpixelv1

body {
    display: grid;
    place-items: center;   
    ...
} 

I learned this way to center to center both horizontally and vertically with grid recently. Super easy. Don't think support is quite as good but still like 94%.

1
Jorge• 40

@Broderpixelv1

Posted

hi @Zugim I think your solution is highly accurate, since CSS Grid is very flexible using grids, and is more efficient for complex designs, also I think that if you need to adjust alignment and size on a single axis, flexbox also works very well. Great response!

0
Minji Kim• 10

@minjikim19

Posted

I like how you set variables for each color. Great job!

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord