Submitted 11 months ago

My Very First Flexbox Mini-Challange EVER

NBD• 240

@bdal90

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

QR code component

HTML
CSS

1newbie

View challenge

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,760

@bccpadge

Posted 11 months 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📚:

Heading Tags

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

NBD• 240

@bdal90

Posted 11 months ago

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

Nathan Ray• 230

@NathanRayM

Posted 11 months 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.

NBD• 240

@bdal90

Posted 11 months 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?

Saeed Mohamed Alsayed• 170

@SaeedAlsayed

Posted 11 months 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

Saeed Mohamed Alsayed• 170

@SaeedAlsayed

Posted 11 months ago

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

Saeed Mohamed Alsayed• 170

@SaeedAlsayed

Posted 11 months ago

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

Please log in to post a comment

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