Skip to content
Submitted 3 months ago

QR code component using CSS Flexbox

Cosmin•210
@cosminbordianu
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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

I tried my best to apply everything I knew about HTML and CSS, including CSS variables, Flexbox, and unit measurements like REM. This is what I’m most proud of in the project. However, if I were to do anything differently, I would focus more on learning Git. I got stuck a couple of times and found myself searching for errors.

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

During the project, I encountered several challenges, including errors with Git, such as pushing commits to GitHub, and struggling with some CSS Flexbox concepts that I did not fully understand. However, by referring to documentation, researching solutions, and learning along the way, I was able to overcome these challenges and successfully complete the project.

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

I would greatly appreciate help with a few aspects of my project:

  1. When to use CSS Grid vs. Flexbox? How do you decide which one to use in a specific situation? I’ve only used Flexbox so far, but I’ve seen some solutions that combine both layouts, and it seemed easier to read.
  2. Should you avoid using too many elements? Are semantic elements better suited for this project? For instance, would it be better to use instead of a with the class "attribution"?

Community feedback

  • P
    Boris•3,970
    @makogeborisPosted 3 months ago

    Great job completing your first challenge

    • Use Grid for two-dimensional layouts and Flexbox for one-dimensional layouts but there are some cases where it really comes down with your personal preference
    • In all projects it's best to keep the layout as simple as possible and opt for semantic HTML elements for better structure and accessibility. For the .attribution it should be wrapped in a footer and the .container in a main.
    • It's best practice linking Google fonts directly in the HTML head section rather than directly in your CSS file as it enables asynchronous downloading, improving page load times.
    • Consider using a modern CSS reset at the start of the styles in every project. Like this one Modern CSS Reset. This will help reset a list of default browser styles.

    Hope this helps, Good luck!

    Marked as helpful
    0
    Cosmin•210
    @cosminbordianuPosted 3 months ago

    @mkboris Thank you so much for taking the time to leave some feedback and answer all of the questions I had. I wish you the best of luck in all your future projects! Also: love the Chainsaw Man pfp.

    0
    P
    Boris•3,970
    @makogeborisPosted 3 months ago

    @cosminbordianu You’re welcome, keep going! and thank you😉

    0
  • WasiunAlam•160
    @WasiunAlamPosted 3 months ago

    @cosminbordianu you have done a good job and I have read your challenges. I think you have done this project using raw css. As you said that you have used REM. But the measurement of each element along with its font-size and color is given in the figma file.

    Overall you have done a pretty good job.If you want to know the answer of your question then feel free to contact me in email.

    --Kazi Wasiun Alam-- Email:alphawasiun@gmail.com

    Marked as helpful
    0
    Cosmin•210
    @cosminbordianuPosted 3 months ago

    @WasiunAlam Thank you for taking your time to give some feedback. I hadn’t noticed the Figma file, so I really appreciate you pointing that out. Best of luck!

    0

Please log in to post a comment

Log in with GitHub

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