Skip to content
Submitted about 2 years ago

Flexbox, CSS

PizzaNCoding88•80
@PizzaNCoding88
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

I am unsure of the media, can I please get some clarification if it has to be done the way I did?

I didn't know where to use some colors listed in the style-guide file.

Apart from the media query and colors, I believe and hope it's all fine

Community feedback

  • Melvin Aguilar 🧑🏻‍💻•61,140
    @MelvinAguilarPosted about 2 years ago

    Hi @PizzaNCoding88, good job for completing this challenge! 👋

    Here are some suggestions to improve your code:

    Without semantic tags:

    <body>
   <div class="ex-container">
   </div>
<body>

    With semantic tags:

    <body>
   <main class="ex-container">
   </main>
<body>

    The tag <div> is used to defines a section in an website. It is used to have a container styled with CSS, set special alignment or the content needs a special positioning.

    You could use more the <p> tag, the <p> element is paragraph level content, usually text

    <p class="text">Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
    • Add a <h1> tag in your solution, The <h1> element is the main heading in a web page. There should only be one <h1> tag per page, and always avoid skipping heading levels; always start from <h1>, followed by <h2> and so on up to <h6> (<h1>,<h2>,...,<h6>). The HTML Section Heading elements (Reference)

    Solution:

    <h1 class="bold-text">Improve your front-end skills by building projects</h1>

    Add background-color: hsl(212, 45%, 89%); to the body selector

    The ex-container is a bit unnecessary, if you delete it nothing will happen with the result

    For more information about variables: https://www.w3schools.com/css/css3_variables.asp

    I hope those tips will help you.

    Good Job !

    Marked as helpful
    1
  • PizzaNCoding88•80
    @PizzaNCoding88Posted about 2 years ago

    Thanks a lot Melvin Aguilar, I will definitely take a look at your suggestions up here, much appreciated. Is there anything that I had to add/change/remove from the media query? It's only one line, but I am not sure I understood what was required. Thanks.

    0
    Melvin Aguilar 🧑🏻‍💻•61,140
    @MelvinAguilarPosted about 2 years ago

    @PizzaNCoding88 Hi, I think you could remove it, if you apply the color to the body and remove the div with the ex-container class, the media query would be unnecessary.

    To avoid some strange behavior, update these properties:

    .external-container {
    /* . . . */
    max-width: 350px;
    min-height: 500px;
}

    I did not reply early, because you replied to your solution, not to my comment, in the upper right corner there is a button that says "reply", it is used to reply to a specific comment and notify the author of the comment

    Happy coding

    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