Design comparison
Solution retrospective
Hello! I am new here, and would like from you: What are the best practices I should have put in this project? Is it possible to build a website for multiple platforms (Desktop, and Mobile) using only CSS and HTML? Thank you!
Community feedback
- @Kyr27Posted almost 2 years ago
Best practices:
- Always use indentation, some of your divs are not indented and that makes it harder to review code.
- Use a more descriptive alt attribute for your image.
- Don't use whitespace in your code:
<p> <span class="perfume">P E R F U M E</span></p>
Instead use letter-spacing in your styles.css for that element:
.perfume { letter-spacing: 0.1875rem; }
- Avoid using pixels as they're non-responsive, use rem or em instead.
- Instead of using:
text-decoration: line-through;
Use the
<s>
element in your index.html instead which is part of semantic HTML:<p><span class="discount-price">$149.99</span><s><span class="before-price">$169.99</span></s></p>
- Whenever linking to another website, use the
rel="noopener"
attribute(for security reasons)
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank" rel="noopener">Frontend Mentor</a>.
- Avoid using
<span>
to make a new line, it would be a nightmare to maintain. - If you're using Visual Studio Code, i would recommend you get the prettier extension and format your code using it.
Regarding your question of whether it's possible to build sites using only HTML and CSS for multiple platforms, the answer is yes, and that is the point of this challenge. To build for multiple platforms you should learn Flexbox and/or CSS Grid.
Marked as helpful1@HenriqueCosta05Posted almost 2 years ago@Kyr27 Thank you for your reply, it is really helpful to me.
1@Kyr27Posted almost 2 years ago@HenriqueCosta05 If you're new to Web dev i recommend you see Kevin's video on this exact same challenge, he will explain it better than i can: https://www.youtube.com/watch?v=B2WL6KkqhLQ
Marked as helpful1 - @MerMory-AllocPosted almost 2 years ago
it is a good try i know you can do it just dont stop working on it . i recommend you learning about CSS flexbox and grid it will help you a lot in this challenge . there are also things needs attention of course like working with borders and images just be patient and you ll get better results . wish you all the best .
Marked as helpful1@HenriqueCosta05Posted almost 2 years ago@MerMory-Alloc Thank you for your reply! I will learn more about it.
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