Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted about 1 year ago

HTML Markup with CSS Flexbox and variables for colours

Lawrence Lee•70
@LawrenceLCodes
A solution to the QR code component challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


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

I am proud of the fact that I was able to complete this challenge within a day. I had to take a break from web development for personal reasons. Jumping back into the workflow, I am somewhat "rusty"; however, there were many HTML and CSS practices that I was familiar with and recognized immediately.

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

I am proud of the fact that I was able to overcome the image exploding from the container roadblock. In addition, I was able to reduce the qr code component to a reasonable size relative to the entire entir viewport.

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

Any suggestions for general HTML and CSS improvements are welcome. I am always looking to make my markup more efficient.

I am seeking feedback on how I can make further improvements to refine the design, styling and possibly adding features in the future to make the component more useful.

I am also open to adding animations and states to make the component more dynamic.

Code
Loading...

Please log in to post a comment

Log in with GitHub

Community feedback

  • EFEELE•400
    @EFEELE
    Posted about 1 year ago

    I'm very glad to see you back in web development!! One never stops learning, congratulations!!

    In terms of styles, at first glance, I would recommend reducing the opacity of your box-shadow and perhaps setting it to something like 1px 1px 15px hsl(220deg 15% 55% / 20%), i would also slightly decrease the border-radius.

    In terms of HTML, I would recommend changing your h2 to h1, remembering that this helps with SEO.

    And as extras, try this to add a special touch to your project:

    Remember, you can add active states to your elements using the pseudo-selector :hover

    main.qr-container:hover {   /* These styles will only be displayed when hovering */
        transform: scale(1.02);   /* We change the size to make the element a little bigger */
        transition: .3s ease; /* we added a transition so that the changes are not so abrupt */
        cursor: pointer; /* This will change the cursor type */
        box-shadow: 1px 1px 15px hsl(220deg 15% 55% / 50%); /*I would recommend making the shadow darker when in hover. */
    }
    

    I hope this is very helpful for you, friend!! Lastly, since you're returning to this, I recommend studying flexbox. It will allow you to create almost any interface with CSS.

    Marked as helpful
  • xNyfPtx•1,260
    @xNyfPtx
    Posted about 1 year ago

    Your HTML is filled with div tags to contain an element which doesn't even need it. Every img, h1, p element has a div tag and it doesn't really have any use. Just apply the CSS directly to that element, not on a parent.

    Also, change that h2 tag into an h1. SEO-wise and accesibility-wise. You would usually just use an h2 tag for a subheading.

    For box shadow, I'd reccomend using https://cssmatic.com/box-shadow. It is much easier than doing it manually and you can see it live.

    "I am also open to adding animations and states to make the component more dynamic." Use the hover: pseudo selector in CSS if you want to do so

  • Saiful Islam•540
    @saifuldt
    Posted about 1 year ago

    your design is good but heading color is not macth . fix it to locking very beautiful

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
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

How does the accessibility report work?

When a solution is submitted, we use axe-core to run an automated audit of your code.

This picks out common accessibility issues like not using semantic HTML and not having proper heading hierarchies, among others.

This automated audit is fairly surface level, so we encourage to you review the project and code in more detail with accessibility best practices in mind.

How does the CSS report work?

When a solution is submitted, we use stylelint to run an automated check on the CSS code.

We've added some of our own linting rules based on recommended best practices. These rules are prefixed with frontend-mentor/ which you'll see at the top of each issue in the report.

The report will audit all CSS, SCSS and Less files in your repository.

How does the HTML validation report work?

When a solution is submitted, we use html-validate to run an automated check on the HTML code.

The report picks out common HTML issues such as not using headings within section elements and incorrect nesting of elements, among others.

Note that the report can pick up “invalid” attributes, which some frameworks automatically add to the HTML. These attributes are crucial for how the frameworks function, although they’re technically not valid HTML. As such, some projects can show up with many HTML validation errors, which are benign and are a necessary part of the framework.

How does the JavaScript validation report work?

When a solution is submitted, we use eslint to run an automated check on the JavaScript code.

The report picks out common JavaScript issues such as not using semicolons and using var instead of let or const, among others.

The report will audit all JS and JSX files in your repository. We currently do not support Typescript or other frontend frameworks.

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub