Design comparison
Solution retrospective
All feedback is welcome
Community feedback
- @ChrisAndrewsDevPosted over 2 years ago
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@MahmoudKasrawyPosted over 2 years ago@ChrisAndrewsDev Sir, thank you for these points. I will do the treatment👌
1 - @MaxiTeddyPosted over 2 years ago
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
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