Design comparison
Solution retrospective
i had difficulty aligning the paragraph tag, i had to use the <br>, so how do you align the paragraph tag without using the break tag tag
Community feedback
- @EDDuardOo-CodePosted about 2 years ago
Congratulations in completing your challenge Benedicta
Somehting that you can try it is to use your body for aling your card ,that would make you reduce the mayority of the css code and simplify your code,
body{ display:flex; justify-content:center; align-items:center; min-height:100vh; }
also something that you cand do, it is to use the padding to make the text wrap, usually we use padding or maring to make the text wrap or create spaces
there is a video in which Kevin Powell talks about that topic, or you coul also see this sort video
hope to se more of your work and good luck in your journey ๐
Marked as helpful0@symplybenniePosted about 2 years ago@EDDuardOo-Code thank you, noted, i appreciate
1 - @vanzasetiaPosted about 2 years ago
Hi, Benedicta Nwachukwu! ๐
Congratulations on completing your first Frontend Mentor challenge! ๐
Regarding the
br
elements, I would recommend removing all of them. I would suggest letting lines wrap where they need to. Screen readers will read outbr
elements. You can't accommodate every screen size, so it's rare you'll ever need to use them.Also, I would suggest simplifying the HTML markup and using
main
element to wrap all the card content.Hope this helps! ๐
Marked as helpful0@symplybenniePosted about 2 years ago@vanzasetia noted, thank you, i appreciate
0 - @correlucasPosted about 2 years ago
๐พHello Benedicta, congratulations for your new solution!
๐จโ๐ป Hereโs some tips to improve your solution code:
1.Your solution is great and the code is working, but the html structure can be reduced by removing unnecessary divs, all you need is a single
<main>
or<div>
to keep all the content inside, and nothing more. The ideal structure is thediv
and only the image, heading and paragraph.YOUR CURRENT CODE:
<div class="container"> <div class="section"> <div class="innerDiv"> <div class="image"> <div class="qrCode"> <img src="images/image-qr-code.png" alt="qr-code"> </div> </div> <div class="text"> <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> </div> </div> </div>
Hereโs a minimal html structure for this challenge:
<body> <main> <img> <h1></h1> <p></p> </main> </body>
2.For future projects think about using relative units as
rem
orem
instead ofpx
to improve your performance by resizing fonts between different screens and devices.3.When you download the project files thereโs a file called
style-guide.md
where you can find information such ashsl color codes
and thefont-size
for the headings. The background-color in this case isbackground-color: #D5E1EF
.The correct value for this shadow isbox-shadow: 5px 5px 15px 5px rgb(0 0 0 / 3%);
โ๏ธ I hope this helps you and happy coding!
0
Please log in to post a comment
Log in with GitHubJoin 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