Skip to content
Submitted 12 months ago

QR Code Component using HTML, CSS, and Bootstrap

Kairung Vangmanaw•230
@VangmanawKairung
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’m proud of using Bootstrap for the first time, which improved my workflow and design responsiveness. SCSS also helped keep styles organized. Next time, I’ll focus on adding JavaScript interactivity, optimizing performance, and exploring deeper Bootstrap customization for a more unique design.

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

I faced challenges with responsive design in Bootstrap, needing to learn its grid system and utilities. Studying the docs and practicing helped me understand it better. I also struggled with SCSS syntax and nesting but improved by reviewing resources and experimenting. Persistence and continuous learning were key to overcoming these obstacles.

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

I’d like help understanding which semantic tags to use for different sections and guidance on selecting the right Bootstrap classes. This will improve my project's structure, accessibility, and effective use of Bootstrap.

Community feedback

  • Øystein Håberg•10,710
    @Islandstone89Posted 12 months ago

    HTML:

    • You need a <main>, this is important for accessibility. Change .container into a <main>. Remove all of the divs, they are not needed.

    • The image has meaningful content, so should not be a background image. Use the <img> tag and insert it into the HTML document. Also, don't forget the alt text!.This is essential for screen readers to understand the image. The alt text should be descriptive, and in this example, it also needs to say where it leads (frontendmentor.io).

    CSS:

    • Performance-wise, it's better to link fonts in the <head> of the HTML then using @import.

    • It's good practice to include a CSS Reset at the top.

    • Remove overflow: hidden.

    • font-family should be set on the body. You should not set 3 different ones, though - only one, the one at the bottom, will be used. Set the main font-family on the body, then override it on the parts that need another value.

    • Font-size must never be in px. Use rem instead.

    • You don't need to write body in front of the selectors.

    • Remove all of the properties on .container, except for background-color, border-radius and padding.

    • Remove all of the properties on the image, except for border-radius. Add display: block and max-width: 100%.

    • Remove the width and the height on the text. Use padding if needed.

    • Finally, since all of the text is centered, you only need to set text-align: center on the **body``. The centering will be inherited down through the body's descendants, so you can safely remove it elsewhere.

    Good luck :)

    Marked as helpful
    1

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