Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Log in with GitHub

Submitted

QR Code Component Page made with pure classic CSS

#styled-components
Little-Koder• 30

@Little-Koder

Preview siteView code
Desktop design screenshot for the QR code component coding challenge

This is a solution for...

QR code component
  • HTML
  • CSS
1newbie
View challenge

Design comparison

SolutionDesign

Solution retrospective

I don't think my HTML markup was well-thought-out, especially on naming IDs and classes. How do you... 1. Layout and plan your HTML markup? 2. Name your classes and ids? 3. Layout and plan your CSS styles? READ: For some reason, the screenshot isn't working properly, I also haven't learned how to make the site look good on all devices. Sorry!

Community feedback

Lucas 👾• 104,580

@correlucas

Posted

Hello Little-Koder! Congratulations for your first challenge solution, well done!

I've looked your live site and you replicated really good the qr code card elements! I've some tips that you can consider applying to your solution, in case you're interest I'll let a list:

1.To keep simple the challenge I would say you to try to use the attribution tag only when you'll have a concrete knowledge of centering elements. This can make a little bit harder your first challenge.

2.You can wrap all the content inside the <main> that's semantically fine, no need for the extra element <article> and <figure> in this case. The structure can be only <body><main><img><h1></h1><p></p></main></body>. I wrote the structure here, fixing your html

<body cz-shortcut-listen="true"> <main class="card"><img src="/img/image-qr-code.png" alt="The qr code image" class="qr-img"><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></main></body>

3.No need to add <br> to the paragraphy, the line will break automatically when your set the card max-width.

4.Classes, you don't need many classes in this challenge since you've only one h1, img and p. Work their properties in the CSS just using an img {} for example.

5.Consider using flex instead of position: relative; to align the card center. Info about flexbox here: ://www.w3schools.com/css/css3_flexbox.asp

6.You can separate the elements using padding-top, for example a padding-top: 12px; in the h1 and p.

I hope it helps you bro, keep coding!

Marked as helpful

2
Vanza Setia• 27,855

@vanzasetia

Posted

@correlucas

Hey there! I would like to add some more suggestions.

For the alternative text of the QR code,

  • There's no need for the word "image". The img itself is already enough to make the screenreader pronounce it as an image.
  • You can give more additional information about the QR code. In this case, the QR code will redirect the users to https://www.frontendmentor.io/. So, the alternative text for the QR code should be "QR code to frontendmentor.io". By doing this, it will allow the users to know what the image is (QR code) and what the QR code is about (redirecting the users to the Frontend Mentor website).

Marked as helpful

2
Little-Koder• 30

@Little-Koder

Posted

@correlucas I don't know why I didn't use an h1! I am still getting used to card layouts so these tips are very much appreciated. I will also look at the w3schools guide on Flexbox.

I have a hard time with text wrapping and things like that so I will look into max-width, min-width, etc.

Thanks for the classes tip as well. Keep coding as well!

0
Vanza Setia• 27,855

@vanzasetia

Posted

Hi, Little-Koder! 👋

Congratulations on completing your first Frontend Mentor challenge! 🎉

Regarding your questions,

  • For the HTML markup, I would keep it as simple as possible. Also, the card layout is straightforward. But, to answer your question about planning, I would plan the HTML markup for the desktop. After that, I would style the site from mobile view then to larger screen sizes. (This should answer your first and your last question)
<main>
  <img>
  <h1></h1>
  <p></p>
</main>
  • For naming things, is one of the hardest things that we have to do as a developer in every project. 😅 So, for this skill, you have to keep practicing to get better at it. 😉

Regarding the screenshot, the card element is also not in the middle of the page in my view as well. You need to use flexbox or grid to make the card always in the middle of the page regardless of the user's screen size.

If you follow my HTML markup, then you need to make the body element as a flex container and set min-height: 100vh to the body element. By doing this, the card should be horizontally and vertically centered.

Lastly, figure element doesn't need to wrap the img element. The only reason to use figure is if you need to include a figcaption. Otherwise img tag is fine.

That's it! I hope this helps. Happy coding! 😄

Marked as helpful

1
Little-Koder• 30

@Little-Koder

Posted

@vanzasetia This was very helpful! On my screen, it is centered so I guess that's something I might learn to fix later in my web dev journey.

Flexbox is something I still have to practice and learn, so I will keep Flexbox tips in mind for future card layouts!

I didn't know that about the figure element, thanks!

0
Vanza Setia• 27,855

@vanzasetia

Posted

@Little-Koder Happy to hear that was helpful! 😊

Keep in mind that you need to make sure every website that you create is looking good on all screen sizes. If it's only looking good on your device then it's not a responsive website. 🙂

1
Little-Koder• 30

@Little-Koder

Posted

@vanzasetia At this moment I haven't fully learned responsive design, but after learning some CSS Grid, that will be my biggest priority! Thanks for responding again and happy coding!

0
Vanza Setia• 27,855

@vanzasetia

Posted

@Little-Koder Good luck on learning CSS Grid and happy coding too! 😉

1
Fat• 850

@Fahatmah

Posted

Hello there!

Atleast you completed the design. Here are some of my tips to layout or do a markup in your code:

  • Visualize the design and then make section and dividers on it. For example, the whole body is the screen and the section is the card which will contain many div element or container for the texts or images. I usually make the main tag as the body and then section tag as the container of the design and inside of the section are div elements. Just like this:

<main><section><div></div><div></div><div></div></section ></main>

  • And that is where you are going to base your css code. Inside of the first tag for example, <section class="card_container"><section>

Lastly, your card is not in the center of the screen. You can use these following but the body should have a min-height: 100vh;

  1. display: flex; align-items: center; justify-content: center;

  2. display: grid; place-items: center;

  3. position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); this last number, you can use it in the card container.

Hope this helps you!

Marked as helpful

0
Vanza Setia• 27,855

@vanzasetia

Posted

@Fahatmah

For your first suggestion, I would not recommend wrapping each element with a div. I would suggest keeping it as simple as possible.

It's not a necessary thing to wrap the card with section element. section element would work like a div (has no meaning) unless it gets labeled properly.

For your last suggestion, I recommend choosing either flexbox or grid to make the card in the middle of the page. Using both of them would be overkill. Also, there's no need to use absolute positioning especially when you are already using flexbox or grid.

1
Fat• 850

@Fahatmah

Posted

@vanzasetia Thank you! That is what I am used to and it just works haha.

I would really like to ask like when will you need to use section tag or other semantic HTML or know what is the really use of a section tag and others. Thank You! I appreciate your reply! I learned again haha

0

Please log in to post a comment

Log in with GitHub
Discord logo

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