Design comparison
Community feedback
- @sivaprasath2004Posted 7 months ago
Hello again
@ruthraj001
, your project looks great, congratulations! It's very similar to the proposed design, my sincere congratulations.Regarding your question, yes, your CSS is very clean. I would only recommend one thing: instead of leaving the colors you have to use in a comment, try putting them inside a ::root. That way, you can use variables, which helps keep the code even cleaner.
Now, here are some recommendations to make your CSS cleaner: CSS Custom Properties, CSS Nesting, adding comments to separate sections of your code (just like you did), and removing comments from properties that are not being used.
With the Sass preprocessor, you can use variables, partial files, nesting, and mixins.
Now, some tips for your semantic HTML:
<figure class="main-image_container">:
The correct tag for this section should be<section>.
This is because the content has thematic relevance among the items (user profile). <figure> is usually used for a main figure or one that needs a caption (<figcaption>).<div class="main-buttons_container">:
It would be more appropriate here to use a<ul> and <li>
. This is because those buttons are identical items with similar purposes, so placing them as list items makes more sense.<p>GitHub</p>
and the others that simulate a button: Since they have the functionality of a link, it's more appropriate to use an <a> tag, even if the href is empty. Once again, congratulations! Your project looks great. Keep up the good work. If you have any questions about what I said, please comment below, and I'll try to help as best as I can.Marked as helpful0
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