Design comparison
Solution retrospective
First I wanted to the project with bootstrap then I decided to do it with plane CSS. Your feedback will be very much appreciated.
Community feedback
- @ChrisAndrewsDevPosted over 2 years ago
Hey @isayaexavery, nice work on your first challenge!
There's a few small HTML warnings that are easy to remedy:
- Using semantic landmark HTML tags
<main> <section>
in place of standard<div>
tags to divide sections is best practice and helps with accessibility for screen-readers. - You typically want to start with an
<h1>
on a page and work your way down to smaller headings for less vital content:<h1> to <h2> to <h3>
and so on.
One small thing I noticed when compared to the design brief is that your paragraph should be
text-align: center
You should definitely look into custom CSS variables if you're working with vanilla CSS, especially when doing the challenges here, they make life so much easier when working from a design brief!
Other than that, your CSS was solid, I could see you experimented with some styles and methods to get a preferred outcome, there are a couple of smaller tweaks I would have made, but you're on the right track for sure!
Nice one!
Marked as helpful0@isayaexaveryPosted over 2 years ago@ChrisAndrewsDev This is very very helpful comment, thank you so much
1 - Using semantic landmark HTML tags
- @correlucasPosted over 2 years ago
๐พHello Isayaexavery, congratulations for you challenge solution!
I just saw your live site and I've some tips for you about the design and the elements.
1.The container text should be aligned to center not to left, use
text-align: center;
. 2.The H1font-size
is a little bit bigger, you can also switch fromh3
toh1
. 3.Theborder-radius
for the qrcode image is a little bit different for the containerborder-radius
due some design proportions the inner border-radius should be ever a little bit smaller from the outer content.I wrote you the code fixes below:
text-align: center; width: 32rem; margin: 10rem auto; padding: 2.4rem 0; display: flex; /* justify-content: center; */ /* align-items: center; */ flex-direction: column; gap: 2rem; background-color: hsl(0, 0%, 100%); border-radius: 12px; } .card-content h3 { font-size: 2.25rem; color: hsl(218, 44%, 22%); } .card-img { border-radius: 10px; }
Hope it helps you, happy coding bro!
Marked as helpful0@isayaexaveryPosted over 2 years ago@correlucas
Thank you for the helpful comment and I will take it to my knowledge in the next project
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