Design comparison
Solution retrospective
I tried to apply the advice I was given previously, use a modern-reset.css, start with the mobile approach, do not use px as a unit in my project. I liked this reminder about "grids" and I must say that I rediscovered some things, I also adjusted the cards to also adapt to tablets which was not requested. I tried to stick as much as possible to the design but I did not manage to reproduce the height of the cards.
What challenges did you encounter, and how did you overcome them?I think my class names could have been chosen more wisely, I might have adopted a different semantic structure, if I had thought a little more in advance about the organization of the cards, especially the white ones. I spent way too much time tinkering with the adjustments to make it match both designs, I think I got as close as I could.
What specific areas of your project would you like help with?Any advice is welcome especially on the html structure where I must say I am not always sure to use the right tags effectively. I would also be curious to know how other developers would judge my code, in terms of readability and if there was a method to make changing the number of columns smoother and less abrupt.
Community feedback
- @huyphan2210Posted about 2 months ago
Hi, @TomSif
You did a great job with the challenge! I do have a few thoughts for improvement:
- I noticed you applied
font-family: "Barlow Semi Condensed", sans-serif;to many classes with different font weights. Instead of repeating this, you could setfont-family: "Barlow Semi Condensed", sans-serif;andfont-weight: 400directly on thebodyand only adjust thefont-weightwhere needed. This would simplify your CSS. - I also saw that several of your class names follow the
.testimonial--[name-of-testimonial]pattern (e.g., .testimonial--Jeanette). While this works for the current challenge, think about a scenario where testimonials are loaded dynamically, and you don’t know the names in advance. If there were more than five testimonials, would they all have the same layout as the first five? How would you handle styling for additional testimonials? Is there a more scalable way to write the CSS to accommodate future testimonials?
I'd like to hear your thoughts on these questions.
Hope this helps!
Marked as helpful1@TomSifPosted about 2 months ago@huyphan2210
Hello, first of all thank you very much for taking the time to leave me such a detailed comment and for taking the time to read my code.
- For the fonts, you are absolutely right, I don't even know why I didn't think of it, but I will think about it next time for sure.
- Concerning the names of the css classes, I myself was not very satisfied with the names I had chosen, and you are absolutely right about the maintainability of the code if there were to be other subsequent testimonies. I should have thought in card style and assigned this style to the different testimonies so that they could be reusable. For example testimonial testimonial--primary or testimonial--blue ( dark or whatever ).
Thinking about this kind of detail in advance is exactly the kind of little things that will allow me to be more professional, I thank you again for raising this problem, It is wise and relevant comments like yours that allow me to improve.
1 - I noticed you applied
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