Do you have any questions about best practices? Feedbacks are most welcome.
Daniel Enagu
@DannyEnaguAll comments
- @sujit-devfsSubmitted 9 months ago@DannyEnaguPosted 9 months ago
Hi @SUJIT-DEVFS,
Nice job. But your code can still be improved.
1 Avoid inline styles.
<h3 style="color: hsl(332, 51%, 32%);font-size:16px;margin-top:0">Preparation time</h3>
2 Your img alt attribute should contain a short description of the image itself. Also, note that the alt attribute is what screen readers will voice. it will be displayed on the screen when your image is broken.
3 The <div> with the class of container should be a <main> tag. Good practices and accessibility.
4 ul>li>span Use single selectors whenever possible. Always strive for the lowest specificity.
5 Create 3 utility classes for the following:
ul>li>span, ol>li>span{ color: hsl(30, 10%, 34%); } ul>li>b, ol>li>b{ color: hsl(30, 10%, 34%); } ul>h3, ol>h3, h3{ color: hsl(14, 45%, 36%); font-family: 'Young Serif', serif; font-size: 30px; margin-top: 20px; }
That's all from me. Hope you find the above suggestions helpful.
Marked as helpful0 - @ChaosBlitz404Submitted 9 months ago
Another one done, Feedbacks are welcome!
@DannyEnaguPosted 9 months agoHi,
Good job on the design interpretation. But your code can be improved.
The following is how you can improve your code:
-
Always use semantic HTML tags when possible. For example,
- Use heading (h1 - h6) tags for the texts Jessica Randall and London, United Kingdom.
- Use anchor <a> tags for the social links not <button> tags.
-
Add an alt attribute to your <img /> tag to describe your image for accessibility.
-
Separation of concern: Although, there is nothing wrong with using the ** tag.
-
Always use CSS reset to avoid some unwanted browser behaviors. Check out Andy Bell's Modern CSS Reset.
-
Find and remove unused selectors. I could not find a reference as to where .attribution selector was used.
-
Use relative units like rem for font sizes. You can convert pixel to rem by dividing the pixel value by 16 (that is, 20px ==> 20 / 16 = 1.25rem).
-
Fix your class names. class names like first, second, semiFirst, bolded, etc. do not describe what the selector is doing. Possible suggestions are names like:
- bolded = text-bold
- yellow = text-yellow, location
- semiFirst = semi-first or user-role
- first = first-section or top-section, header
- second = second-section or second-section
I hope you find this helpful.
Marked as helpful0 -
- @grace-snowSubmitted about 4 years ago
This is designed to be a guide for one way to do this challenge mobile-first, using scss variables and some more advanced css techniques like nth-child.
I used a VS Code extension to compile the scss.
Note: In a real project I would work with the designer to fix the accessibility issues or color contrast and font sizes.
Any questions or suggestions are welcome.
- @DannyEnaguSubmitted over 3 years ago
Hi everyone. I just completed the Four Card Feature Section challenge.
Feel free to check it out. And don't forget to leave me feedback on what I should have added or removed to make it better.
Thanks in advance...
@DannyEnaguPosted over 3 years agoIt sure does....
Thank you Snow for your response I'm really grateful..
0 - @AnywtfSubmitted over 3 years ago
Continued development
- I used flexbox, but in the future I will redo it with GRID
Feedback are always welcome :)
@DannyEnaguPosted over 3 years agonicely done. I'm also a newbie and have learnt alot from your solution
0