Tribute Page - Feedback

Code Feedback
1

Hey everyone! This is my Tribute Page Project.

I hope you can have time to review my code and tell me if there is anything I can improve on especially in the ccs part.

2 Likes
2

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
3

@Madalena.design Tank you! :smiley:

I have no words to express my gratitude for your help. I have a lot to study. Now it’s a little late but tomorrow I will read the articles you have suggested.

I am sure that I will have many doubts, but the first one I have is on the subject of @import. How can I use a font without having to resort to @import? Is it better to host them on the server?

1 Like
4

I am more than happy to help out :slight_smile:

Okay, so I am not exactly sure how you found the font and applied to your CSS.

But, in the Google Font site, it shows two options to add the font. use the ‘Standard’ method, which is the <link> tag. Add that into your <head> section in your HTML file. In CodePen, you can just apply the <link> right at the top of your HTML section. I have tried it and it works just fine without the <head>.

31
312874×1286 570 KB

I hope this helps :slight_smile:

1 Like
5

By the way, I used Google Fonts :slight_smile:

It works! Tkanks!

Why is a better option the <link> tag over css @import?

Edit:
I found the answer to my question :sweat_smile:

http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

1 Like
6

I am happy to hear this. You are welcome :slight_smile:

I had a quick skimmed at both links you have provided, and I like how the guy explained it with examples in the last article. I am glad that you have found the answer to your question. :slight_smile:

1 Like
7

Hello! Welcome to forum. Your tribute page looks good! Great job.

1 Like
8

Hi :wave:

Welcome to the forum and great job on the tribute page :+1:

Looking forward to seeing your next project :slightly_smiling_face:

1 Like
9

Hi, everybody!!
I made some changes in the code. I’d tried to apply the tips @Madalena.design gave me.

I hope my code has improve. :grin:

Can you see my Tribute Page Project again? Tanks!