Skip to content
Submitted about 2 months ago

CSS Flexbox, Box model and HTML Container Class

Aynul Islam•80
@nayan041
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?

CSS proper spacing and HTML nested structure limiting techniques.

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

Spacing is very much complicated to me. It is important to maintain proper spacing using CSS. Card text warping is not working for me using flex box wrap property. Then line break are found helpful to slice down the text content into pieces.

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

Figma design related guide and Git related learning is very much helpful. Thanks to Frontend Mentor for written guidance.

Community feedback

  • Steven Stroud•11,870
    @StroudyPosted about 2 months ago

    Amazing job with this! You’re making fantastic progress. Here are some small tweaks that might take your solution to the next level…

    • Using a <main> tag inside the <body> of your HTML is a best practice because it clearly identifies the main content of your page. This helps with accessibility and improves how search engines understand your content.

    • I think you could benefit from a plugin on VS code called Prettier, It will format your code make it more easily readable.

    • These <div> should really have semantic tags like headings (<h1> to <h6>) and paragraphs (<p>) convey structure and meaning to content, improving accessibility, SEO, and readability by helping search engines and screen readers interpret the content.

    <div class="heading">
	Improve your front-end<br />skills by building projects
</div>
<div class="text">
	Scan the QR code to visit Frontend<br />Mentor and take your
	coding skills to<br />the next level
</div>

    • Setting font-size: 62.5% can affect accessibility by reducing the default browser font size, potentially making text harder to read for users with visual impairments. This does make it easier to work out the relative units but at what cost?

    • For future project, You could download and host your own fonts using @font-face improves website performance by reducing external requests, provides more control over font usage, ensures consistency across browsers, enhances offline availability, and avoids potential issues if third-party font services become unavailable. Place to get .woff2 fonts

    You’re doing fantastic! I hope these tips help you as you continue your coding journey. Stay curious and keep experimenting—every challenge is an opportunity to learn. Have fun, and keep coding with confidence! 🌟

    Marked as helpful
    1
    Aynul Islam•80
    @nayan041Posted about 2 months ago

    Hello @Stroudy! Your suggested tweaks are cordially noted with thanks. I will try to follow your instructions in the future projects.

    1
    Steven Stroud•11,870
    @StroudyPosted about 1 month ago

    Hey @nayan041, No doubt you got this! 💪

    0
  • MikDra1•6,920
    @MikDra1Posted about 2 months ago

    If you want to make your card responsive with ease you can use this technique:

    .card {
width: 90%;
max-width: 37.5rem;
}

    On the smaller screens card will be 90% of the parent (here body), but as soon as the card will be 37.5rem (600px) it will lock with this size.

    Also to put the card in the center I advise you to use this code snippet:

    .container {
display: grid;
place-items: center;
}

    Hope you found this comment helpful 💗💗💗

    Good job and keep going 😁😊😉

    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