Skip to content
Submitted over 1 year ago

QR Code Component using Flexbox

Alfian Akmal Hanantio•90
@amalhanaja
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

Process Log

  1. Create CSS File
  2. Define styleguide sama import font-family
  3. Slicing UI
  • Card (<main>)
  • QR Code (<figure>)
  • QR Image (<img>)
  • Content (<section>)
  • Title (<h1>)
  • Description (<p>)
  1. Implement UI Structure in HTML
  2. Styling using CSS

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox
  • CSS Grid

Lesson Learned

  • Box shadow
  • Margin shorthand

Community feedback

  • Nazar Holubovskyy•190
    @HA3IKPosted over 1 year ago

    Also, SECTION is tag of "Sectioning Content" category - creates a section that defines the scope of the heading (H1-6) content. That is, semantically, MAIN data (with FIGURE) is outside the context of H1.

    Marked as helpful
    0
  • Nazar Holubovskyy•190
    @HA3IKPosted over 1 year ago

    Hello. Instead of creating a new separate SECTION for the title and description, you can use FIGCAPTION, which is specifically intended to add text to the FIGURE content.

    MAIN > FIGURE > IMG + FIGCAPTION > H1 + P

    This will allow you to keep your HTML structure cleaner and more logical.

    Marked as helpful
    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