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

Submitted

2ns attempt QR Card component

mahmoud medhatโ€ข 180

@MahmoudKasrawy

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


All feedback is welcome

Community feedback

Chris Andrewsโ€ข 170

@ChrisAndrewsDev

Posted

Hi @MahmoudKasrawy!

It seems like your screenshot does not look the same as the deployed solution, I will just assume it's an error on this site, as the actual live solution looks much closer!

Very solid first effort ๐ŸŽ‰๐ŸŽ‰

You do have some HTML and accessibility issues that shouldn't be too hard to remedy.

Firstly, you should have meta attributes in your markup boilerplate, it would look something like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

If you are using vsCode as your text editor, I think you can use "! + tab" to generate the default boilerplate markup which contains most (if not all) of the things you would need to avoid those errors!

When using an image, it's best-practice to provide an "alt" tag, to help with screen-readers and web-crawlers:

<img src="../source/image" alt="a text description of the image">

A really solid effort so far though!

1

mahmoud medhatโ€ข 180

@MahmoudKasrawy

Posted

@ChrisAndrewsDev Sir, thank you for these points. I will do the treatment๐Ÿ‘Œ

1
Ogiji Maxโ€ข 140

@MaxiTeddy

Posted

Try making it with one div, so that you content can all be inside. Try decreasing the padding around the picture. Decrease your font-size a little bit for the h1, then increase your border radius a little bit

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