Design comparison
Solution retrospective
Literally, i dont know how i complete this challenge. Can anyone review it and suggest me some tips to improve my css???
Community feedback
- @VCaramesPosted almost 2 years ago
Hey there! 👋 Here are some suggestions to help improve your code:
- Do not forget ⚠️ to check your FEM report, to see what is incorrect and update your code with it. **This should be done immediately ** after submitting your challenge.
- The profile images are not decorative ❌. Their
alt tag
should not be blank. It should state the following; “Headshot of -person’s full name-“
More Info:📚
- For the testimonials, it is best ✅ to to wrap each individual testimonial component in a
figure
element, the individuals information should be wrapped in afigcaption
element and lastly, the testimonial itself should be wrapped in ablockquote
element.
Code:
<figure> <figcaption></figcaption> <blockquote></blockquote> </figure>
More Info:📚
- Your
CSS Reset
is being underutilized. 😢 To fully maximize 💯 it, you will want to add more to it. Here are some examples that you can freely use 😁: Josh Comeau Reset Eric Meyer Reset
- Change ⚠️ the
height
tomin-height
in yourbody
element, to improve your component's responsiveness.
- For improved accessibility 📈 for your content, it is best practice ✅ to use
em
formedia-queries
. Using this unit gives users the ability to scale elements up and down, relative to a set value.
If you have any questions or need further clarification, feel free to reach out to me.
Happy Coding! 🎆🎊🪅
Marked as helpful1@vishanthan8055Posted almost 2 years ago@vcarames Hey thanks!!!! I will learn all these and try again this challenge. And how to reach you? can you share me the Id's to reach you out?
0@VCaramesPosted almost 2 years ago@vishanthan8055
Glad I could help! 😁
You can just tag me when you have a question.
Marked as helpful1 - @EileenpkPosted almost 2 years ago
Hi Vishanthan, your project looks good. These might be helpful tips to improve your CSS.
-
Use more semantic names for classes. When we are writing code it's good practice to use names so that someone reading the code will know what the class is for. I find it helpful to use BEM (Block, Element, Modifier) as a naming convention.
-
Separate your typography from the rest of the CSS. Do all of the type styling in one area, if an element needs something like margin or padding retarget it in another area.
-
Put comments to mark all the different sections of the stylesheet.
Hope you found this helpful!
- Let's connect on LinkedIn! - @Eileenpk
Marked as helpful1 -
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