JayapreethiN• 40
@JayapreethiN
Submitted
Maksym Perekhodko
@kinqbert
All comments
@kinqbert
Posted
Your overall solution looks goof! But I'd also like to markup some points, you may try to improve.
- Try building design on Figma file. It is vital for front-end developer to know basic usage of Figma.
- I believe you shouldn't make QR-code stretched vertically.. It'll be best to keep it as a square
- Try using of
paddingandmarginproperties instead of separatemargin-top,margin-bottom,margin-rightetc. - Avoid using too many
divtags. In your code it wasn't necessary to add additonal wraps forimage,nextandpara. - [Non critical] Use more specific class names. For me, it was kinda tough to understand what
nextandparawere, but it could happen because it is written in you language I don't understand :D
That's all issues I could find looking at your code and site. Good job! Love your solution!
Marked as helpful
0- like they do• 80
@murdock33
Submitted
What are you most proud of, and what would you do differently next time?
What challenges did you encounter, and how did you overcome them?
What specific areas of your project would you like help with?
@kinqbert
Posted
Great job! Your code looks mostly fine to me, but personally I'd suggest some fixes:
- Always consult with Figma file, if it is available (in this task it is available for free). It is so useful during front-end development process, as it allows you to see precise pixel sizes of different element, how they should be placed, etc. In your case, sizes seem a bit off, like overall card width and card paddings, for example. Figma's interface may look a bit confusing, but trust be, it is really easy to learn and even easier if everything you need Figma to is checking the design. It is widely used in this industry, so I definetely would recomend learning some basics.
- You shouldn't use <br> tags in your card description, as they are not really necessary there. Text will be placed properly without them with proper card width.
- I don't really see much profit into your usage of @media queries. If they are used to add some distance between card and page edges on screens with small widths, you should probably add paddings for the whole page.
Overall, I really like your solution! Code looks pretty clean and good. Great job!
0 - P
@kunwar91
Submitted
What are you most proud of, and what would you do differently next time?
this was a quick one, but I am proud that I did not have to google for syntax or css props
What challenges did you encounter, and how did you overcome them?
Understanding the Figma images was new to me
What specific areas of your project would you like help with?
NA
@kinqbert
Posted
Looks fine to me! However, personally, I'd recommend some improvements:
- You can set
text-align: center;for the whole card, not to each element of the card (like title, description, etc.), every text inside of it will be alligned to the center. - [Not critical] Don't forget about paddings, don't use margins only. It would be more convenient to set padding of 16 pixels for the every card side.
- [Not critical] You can use
padding-inline: 16px;instead ofpadding: 0 16px; - [Not critical] You should use class names instead of just tags as CSS selectors (e.g:
.card-title, not.card h1). It doesn't makes any weather in such project, but I believe it would make code more readable in bigger project.
Great work! Love your solution!
0 - You can set
