Design comparison
Solution retrospective
i need some feed back to improve my self. thanks!!!
Community feedback
- @VFGarciaDevPosted 8 months ago
- General suggestion (HTML & CSS):
- don't skip lines or leave it blank, it gives a bad visual feedback for other coders. Search for semantic/clean code/organization. For example:
<div class="container-2"> <p class="content">Puslished 21 Dec 2023</p> <h1>HTML & CSS foundations</h1> <p>These languages are the backbone of every website, defining structure, content, and presentation.</p> </div>
2 . HTML suggestions:
- the "active-states challenge" is supposed to be a link that you can click, so you should add the tag <a> within the <h1>, like that:
<h1><a href="#">HTML & CSS foundations</a></h1>
- never forget to add a text in the 'alt' from every 'img' for accessibility (text that shows if the image doesn't load) 3 . CSS suggestions:
- (this one is personal, but a lot of coders use) you can create another ".css" file specific for reset styles for better semantic, but remember to put above the main style.css (You can also create a folder just to css files)
// HTML // <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/style.css"> // CSS reset.css// *{ margin: 0; padding: 0; box-sizing: border-box; }
- card/container sizing: You should use, for example, "max-height" or "min-height" instead of just "height" for better responsivity. Furthermore, you should also use (%, rem) instead of px [otherwise, it can be a big problem por small screens]
- try to get more used with (%, rem) with almost everything(font-size, height/width, margin/padding), it's much better for responsivity.
- the attribute ":hover", you should use "color" instead of "background-color" to look like the challenge
I hope I can help you with any of that suggestions. I'm open to clarify any doubt and you are welcome to text me
Marked as helpful0 - @Harsh-Kumar-DwivediPosted 8 months ago
Hi @HansKevin,
Nice Work !
I would suggest following:-
1.Prefer replacing
<section>
with<main>
element and<div class="attribution">
with<footer>
element.2.Try giving classes more descriptive and meaningful names.
3.Understanding of flexbox would be highly useful.
4.Consider adjusting margin between the paragraph and the author.
5.Consider modifying following:-
Now:-
h1:hover { background-color: hsl(47, 88%, 63%); }
After Change:-
.container:hover h1 { color: hsl(47, 88%, 63%); }
6.Check font-face rules, They need to be corrected.
7.Box shadow of the card is not growing on the active states, try adding it too.
Hope these suggestions are helpful !
Happy Coding !
1
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