Skip to content
Submitted about 1 year ago

My Very First Flexbox Mini-Challange EVER

NBD•240
@bdal90
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

Dear All,

Here is my very first project EVER, I'm an BASOLUTE newbie, I am insanely glad I could get this far with my very first project. Looking forward to getting better and better, step by step. I am so new I don't even know what questions to ask. :D Unfortunately the QR-code image doesn't show on the GitHub URL, I am trying very hard to fix it, but also try to add a print screen version.... I am open to any suggestions, feedback, criticism (though I know it is highlighted to be more specific than this, but maybe in my later projects. :) )

Wishing us all great practice,

Dalma

Community feedback

  • Rebecca Padgett•1,840
    @bccpadgePosted about 1 year ago

    Hello @bdal90. Congratulations on completing this challenge!!!🎉

    I have a few tips you might be interested in to improve your solution.

    HTML 📃:

    • Every website should have at least one landmark like a main

    HEADING TAGS

    • Heading tags must be used in chronological order. Its not best practice to skip heading tags due to SEO and accessibility reasons.

    More info📚:

    Example:

    <body>
 <main class="container">
  <img>
  <div class="content__group">
   <h1>Improve your front-end skills by building projects</h1>
  <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
 </div>
</main>
 <footer>
  /* attribution info goes here*/
 </footer>
</body>

    CSS 🎨:

    • Font size shouldn't be in pixels because they are absolute unit and doesn't scale when users want to change their font size in their web browser setting.
    • To write better CSS you can implement the DRY principle (Don't Repeat Yourself)
    • I would look at using CSS shorthand properties when using padding and margin

    You can use CSS Grid on the body and saves you few lines in CSS

    • Add font-family on the body instead of the container

    • All the commented code below is unnecessary and add max-width to make the component responsive without media queries and adding padding for spacing.

    .container {
    /* font-family: Outfit, sans-serif; */
    /* font-size: 15px; */
    background-color: hsl(0, 0%, 100%);
    /* display: flex; */
    /* flex-direction: column; */
    /* align-items: center; */
    /* justify-content: space-between; */
    /* height: 430px; */
    /* width: 270px; */
    border-radius: 20px;
    box-shadow: 0 0 10px 10px hsl(210, 30%, 83%);
    padding-top: 10px;
    padding-bottom: 30px;
    max-width: 380px;
    padding: 1rem;
}

/*Max-width: 100%; makes image responsive and display: block removes white space*/
.container__qr-code{
   max-width: 100%;
   display: block;
}

    Example:

    • Wrap your h1 and p using a div and put a class on that div and apply text-align:center;

    More info📚:

    Here is my solution to this challenge: QR Code component

    Hope you find this useful and don't hesitate to reach out to me if you have any questions

    Marked as helpful
    1
    NBD•240
    @bdal90Posted about 1 year ago

    Thank you very much for your insightful comment @bccpadge! I will keep these in mind.

    1
  • Nathan Ray•230
    @NathanRayMPosted about 1 year ago

    Hello! Great job on your first challenge. It looks like the QR code may not be showing due to the way you have it in your html. In your github you don't have an images folder but have your html pointing to an images folder.

    Here is what you currently have.

    <img class="container__qr-code" src="images/image-qr-code.png" alt="QR-code">

    You can change it to this and it should resolve the issue.

    <img class="container__qr-code" src="image-qr-code.png" alt="QR-code">

    Another option would be to add an images folder to the main root in github and place the QR code picture in the folder.

    I hope this helps.

    2
  • NBD•240
    @bdal90Posted about 1 year ago

    @NathanRayM and @SaeedAlsayed Thank you guys for your help, I truly appreciate it! I'm trying, God knows I'm trying, but I'm having the hardest time figuring out what I'm doing wrong on GitHub (it just seems a whole new universe for me). I've tried both suggestions, but it throws some kind of error saying "pages build and deployment / build (dynamic)". What am I doing?

    0
    Saeed Mohamed Alsayed•170
    @SaeedAlsayedPosted about 1 year ago

    at first you need to know how to upload your files to github in correct way second how to appear your page but in the image path you need to put / before the pass only like this way:<img src="/image-qr-code.png" alt="title"> @bdal90

    1
    Saeed Mohamed Alsayed•170
    @SaeedAlsayedPosted about 1 year ago

    if you have any question you can ask and i will answer you @bdal90

    1
  • Saeed Mohamed Alsayed•170
    @SaeedAlsayedPosted about 1 year ago

    just do the image source like this: /image-qr-code.png

    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