Submitted almost 2 years ago

Mobile-first QR Code Webpage

Farhan Navas• 60

@wakandakingz

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

Please do provide any feedback for any parts of my code that could be improved or any parts that could be redundant!

Community feedback

Kartar Developer• 360

@kartardeveloper

Posted almost 2 years ago

Hey Farhan, You did Great. If you need some improvements I will help you with this. Here are some suggestions -- 1). First of all what catches my eye is your card shadow. Great, you can try different from the challenge. But I say you use but use lighter shadow now its too hard. You can take shadow codes from there https://getcssscan.com/css-box-shadow-examples 2). Next, You can increase your heading size and make the description text a little bit lighter as in the reference. 3). Always wrap your images in a figure HTML element. Add image widths there and use height, and width 100% on your images. And object-fit property if you want to use it. Object fit CSS property is very helpful when er dealing with images. This is the same as we add background size to our background images. If you want more on object-fit and object position then you can comment to me I will definitely tell you. 4). Last but not least as @MelvinAguilar said. Use semantic tags in your code. It will help you and other developers to see and find something in your code easily. Everything else is looking good. I hope this will help you. If you find this comment helpful for you, then you can mark this as a helpful comment. It will increase my confidence. 😊 And If you need any help then I'm always there.👍

Marked as helpful

Melvin Aguilar 🧑🏻‍💻• 61,200

@MelvinAguilar

Posted almost 2 years ago

Hi @wakandakingz 👋, good job for completing this challenge and welcome to the Frontend Mentor Community! 🎉

Here are some suggestions to improve your code:

1.Try to use semantic tags in your code. More information here:

With semantic tags:

<body>
   <main class="container">
      . . .
   </main>
   <footer class="attribution">
      . . .
   </footer>
<body>

2.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="footing">Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>

3.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="heading">Improve your front-end skills by building projects</h1>

4.You could use a CSS Reset to remove browser built-in styles and reduce browser inconsistencies

Your body's default margin causes the vertical scrollbar to appear, add margin: 0; to body selector

Popular reset style sheets:

5.Tips:

Use max-width: 260px to .container selector instead of width.
Use margin: 0.625rem or margin: 10px in the container selector so that it has some space when viewed on mobile devices.
The shadow of the card is too strong, I recommend using a color with transparency or use these styles based on Freebie: Google Material Design Shadow Helper

I hope those tips will help you.

Good Job and happy coding !

Marked as helpful

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