Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted 9 months ago

QR-CODE component using html and css

Adhizah•50
@Adhizah
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?

What I’m Most Proud Of

  • Clean Layout and Design: I successfully implemented a visually appealing layout that closely matches the design provided by Frontend Mentor.

  • Improved CSS Skills: I gained confidence in using CSS properties like border-radius, padding, and layout techniques.

  • Project Completion: I’m proud to have completed the challenge and learned new techniques along the way.

What I Would Do Differently

Add Media Queries: I would enhance responsiveness by adding media queries to better adapt the design to different screen sizes.

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

Challenges I Encountered and How I Overcame Them

Challenge:

I initially wanted to use only the box model to structure the layout, avoiding modern layout techniques like Flexbox. However, aligning and centering the elements within the container using just the box model proved difficult. I found it challenging to achieve the desired vertical and horizontal alignment across different screen sizes.

How I Overcame It:

After experimenting with the box model, I decided to use Flexbox for centering the content within the container. Flexbox made it much easier to align elements both vertically and horizontally, while maintaining a clean and responsive layout. This switch helped me save time and produce a more consistent result, even though it meant stepping away from my original intent of using only the box model.

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

Specific Areas I’d Like Help With

I would really appreciate help with understanding Flexbox more deeply. While I used it for centering elements in my layout, I’m still not fully confident in how to apply its full range of capabilities. Specifically, I would love more clarity on:

  1. Flexbox Container Properties: How to effectively use properties like justify-content, align-items, and flex-direction to create flexible and responsive layouts.

  2. Flexbox Item Alignment: Understanding the different ways to align individual flex items within the container, particularly in more complex layouts.

  3. Flexbox vs Grid: When to use Flexbox vs CSS Grid, and how to determine which one is best suited for different layout scenarios.

Any guidance or resources that explain these concepts in detail would be greatly appreciated!

Code
Select a file

Please log in to post a comment

Log in with GitHub

Community feedback

  • Natali 👻 Grimm•1,190
    @Grimm-N
    Posted 9 months ago

    You're doing awesome! Your effort and attention to detail really shine through—keep it up! 🌟

    Here are a couple of tips to take your work to the next level:

    1️⃣ Instead of using pixels, consider using em, rem, or %. Why? They adapt better to different screen sizes, making your design more responsive and user-friendly across devices. 🚀

    2️⃣ Always assign classes to your elements! This makes your code easier to manage and avoids confusion. Following the BEM (Block-Element-Modifier) methodology can make it even better. For example:

    <div class="button button__icon button__icon--active"></div>
    

    With BEM, your code stays neat, scalable, and easy to update. Trust me, future-you will thank you! 💡

    Keep going—you’re making amazing progress! 🙌🎉

    Marked as helpful

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

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