Design comparison
Solution retrospective
Any code review would be appreciated! Improvement suggestions are always welcome.
Community feedback
- @correlucasPosted about 2 years ago
πΎHello @Zdravko93, congratulations on your new solution!
Great code and great solution! I did this challenge too and know how hard it is to set up this
grid layout
. I think you've done a really good job building everything! Here are some tips for you:Your html is working but you can improve it using meaningful tags and replace the divs, for example the main div that takes all the content can be wrapped with
<main>
or section, about the cards you can replace the<div>
that wraps each card with<article>
you can wrap the paragraph with the quote with the tag<blockquote>
this way you'll wrap each block of element with the best tag in this situation. Note that<div>
is only a block element without meaning, prefer to use it for small blocks of content.This article from Freecodecamp explains the main HTML semantic TAGS: https://www.freecodecamp.org/news/semantic-html5-elements/
βοΈ I hope this helps you and happy coding!
Marked as helpful0@Zdravko93Posted about 2 years ago@correlucas Hello, and first of all, thanks for spending time to review my code/solution to this project. I appreciate your feedback, and will take your suggestions into serious consideration and have that in mind while building my next project. I already dove into html semantics, right after reading your feedback, and I already learned a lot! I will continue improving. Thanks again!
0 - @VCaramesPosted about 2 years ago
Hey @Zdravko93, some suggestions to improve you code:
-
The headings are being use incorrectly. For this challenge, each heading is equally as important. So best option, is to use <h2> Heading, because it will give each card the same level of importance and it's reusable.
-
Add a third layout to make the transition from mobile π± -> desktop π₯ views smoother.
-
Using CSS Grid with Grid-Template-Areas will make things way easier when building the layout and give you full control of it.
Here is how it looks like fully implemented: EXAMPLE
Desktop View Code:
.testimonial-container { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); grid-template-areas: "daniel daniel jonathon kira" "jeanette patrick patrick kira"; gap: 30px; } .daniel-card { grid-area: daniel; } .jonathan-card { grid-area: jonathon; } .jeanette-card { grid-area: jeanette; } .patrick-card { grid-area: patrick; } .kira-card { grid-area: kira; }
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