Hello everyone, here’s my first project. Any feedback is welcomed 
Link:
Hi Alessio,
I think the page looks clean and I also like that the link opens in a new tab. The only thing that I would probably change is adding a bit more padding on the right and left so that it is not to close to the edge.
2 Likes
Looks very good, neat and simple. This is great.
This could be awesome if you use relative units(like em, vw,…) over absolute units like pixel.
Also have some review about typography. For instance if the author description(your first paragraph p tag) could be in more than paragraph tags, so some spacing between related sentences make the reading much easier. Just like printed books. (not critical)
keep going on great work, happy programming.
1 Like
Thanks for the feedback! I’ve tried to apply your suggestions: https://codepen.io/Alessio95/pen/vrEaym?editors=0100
I got one question though: what are the relative advantages of using relative units like em over absolute units?
1 Like
Update looks much much better now as you applied some good typography best practice! very good now.
About the absolute units like pixel. Let say we have a 32" 1080p screen, and one 6" 1080p phone (e.g. iPhone, I love iPhone too much, everyone does). So simple! 1 pixel in a 32" screen looks much bigger than 6" one.
For instance you set 1px solid border for an element. Surely this border could be not very clearly visible in a small screen when DPI is so much (like iPhone X), same it’s super clear for a retro VGA screen.
The solution is relative units. Example when you start coding for iOS, Beside a iPhone device could have 1080 pixel in width, but users work with points which based on the device a point could be 3 pixel, or 2 or 4!
When you set a border of 1em for example, you kind of sure you will have the same relative size for most of the devices.
Sorry if I could not explain it clear, but w3 school has many articles about it.
Keep going on great work! Happy coding.
1 Like
Understood, thank you very much again for your feedback!
The page is minimalist but nice and clean. When you are using in html class="padding" as an utility class i was expecting to see in css something like:
.padding{
padding: 0 22px;
}
instead i saw
.padding{
margin-right: 22px;
margin-left: 22px;
}
Try to be consistent in your naming an utility class and its functionality. For the future projects if you want to use such utility classes just take a look at tailwincss framework for your inspiration.
Good job and happy further coding.
1 Like
me too please. please check my tribute page and rate it. A beginner can always appreciate your feedback.
here is my pen:
First , you may start new topic about it, so we would reach you more better.
Well the layout looks very good for non-small screens. It’s responsive in heart! very good.
First issue is about when screen is so narrow(small), so the icon at the top(totoro) stays at the top with some waste space at the left, and then the highlighted title div. something like following
Find a great idea and solution about it, and it will be super awesome!!!
Another minor issue is about absolute units. You may use relative units like em over absolute one like pixel(px).
About the image you used for background, I’m not saying it’s bad, but if you could use another image to bring more contrast between foreground color scheme and background.
Overall looks very great! really good.
Keep going on great work, happy programming.