Tribute Page - Feedback

Hello @ricardoantonio!

First of all, welcome to the forum community :slight_smile:

So, I have checked out your tribute page and will give you feedback based on both design and code.

Your Design

Your design is just beautiful! :heart: I love the overall style that you have constructed altogether. It is simple and clean, but it also speaks luxury too. That luxurious feel mostly comes from the colour scheme that you have put together (which I am loving), especially the gradient colours on the heading ‘Ken Follett’. This is the perfect example of colour harmony.

The font choices you have made just worked. Normally, it can be a concern when using both serif and san-serif typefaces, but the fonts you have used just work so well together.

One thing I have noticed from many developers is the lack of understanding of whitespace and how to implement it into the design layout. However, you have show how it should be done!

Overall, I cannot say there is anything that is needed to be changed, so well done! :smiley:

Your Code

Overall, your code is good, but there are some areas that can be improved.

Image Optimisation

The image of Ken Follett is large, which is absolutely fine for the desktop version. However, when it comes to tablet and mobile version, make sure the image is not "heavy" in file size. The larger the image file size, the slower the page load speed. Even if you resize the image through CSS, the file size will still be the same. To provide you with the solution, I have added this article on Responsive Images:

Responsive Units

Onto the CSS! I have noticed px is mostly being used. Try to avoid them at all cost. That is because it is not good for web accessibility. While your layout worked out well in different screen sizes (luckily), there could be some issues. I will give you one case; You have used px in media queries

@media (max-width: 430px)

It is very common for developers to do use px. But by doing this, it could prevent the web user to change sizes such as font (even though you did use the correct unit for them), and that is not great for someone with vision impairment. So, instead of using px in that case, use em. I have actually written a long post about this in another topic if you are interested to have a read.

The Case of @import

Unless there is a reason why this is needed, using `@import` in live production should be avoided and that is down to page load speed. Basically, when this is used, every time a user enters the page, it will have to send a request to the server to show this font and the browser have already got other tasks such as fetching images, and loading files, etc. Hence it will take longer to show the page overall.

Specificy

You didn't do anything wrong on this one, but I thought to let you know because you have asked for feedback on CSS and if you ever want to go advanced in HTML and CSS, this may also be a good opportunity to learn.

You have used a mixture of classes, ids, and element selectors. Fair enough, you do have to use ids to pass the FCC test. However, it is vital on which one of these should be used when creating a website. I have provided two articles on this topic and while I will not go into further details (since it is all in the articles), I will advise you to use classes (and use ids just for FCC test purpose). If you have trouble understanding the articles, let me know and I will try to explain. By the way, it involves other topics such as inheritance, which is super useful to know.

http://web.simmons.edu/~grabiner/comm244/weekfour/css-concepts.html

Sorry if this is long, but I hope this will help you on your journey to become a web developer. I wish you all the best! :slight_smile:

1 Like