My first project - Tribute page. Please review it and leave some feebacks

Hey, I am Alex from Russia and I am totally new here. I have just completed my first project Tribute Page and I really want to hear your critics, because I really want to improve. Please say everything and advice me what is better. Thank you!

All the best for you!

3 Likes

Привет!

Wow, this looks really good. I love the way you got the main photo fade right into the style. I also like the column layout. I could see this printed on a poster somewhere.

A good next challenge would be to think about how to make this tribute page responsive.

Best of luck to you.

Hello, Lev! Thank you for your feedback. Really appreciated!

It’s pretty descriptive and well designed too. Nice job , fellow project completer!

Hello, Marco! Thank you for your feedback. Really appreciated!

it looks great. Can you please tell me where can find some free html projects questions for me to practice ?

Hello, thank you! Do you mean some exercises to practice?

sorry i should have been more clear . The tribute page what you did , where can
find similar sort of projects to do for practice?

Looks really good! I think Steve himself would appreciate the clean easthetics. Very creative for first project :+1:

I only completed my first tribute page recently and much the same as this, the challenge afterwards was screen size responsiveness!

Try using the responsive design mode in your browser (I believe it’s Ctrl+shift+M in Firefox / Ctrl+shift+I in Chrome). You can then choose to view your page as how it would look in different phones/tablets.

This page helped me getting to grips with basic media queries :slight_smile:

Looks great man! The projects are challenging, but they will teach you so much, even if you’ve dabbled in HTML and CSS before. One small criticism, which I think the test will detect, is that the picture should be responsive and resize with the window - if I remember correctly. I found it helpful to put the list of criteria into html comments () and check them off as I went along, and by the third project, I was purposely creating them at mobile phone size and using media queries for desktop, etc, so as to follow the ‘mobile first’ principle. Again, looks great man, keep going, good luck, and I’m super jealous that you know at least one more language than I do!

2 Likes

Great job man! Keep that good work up! One thing though, can you try changing the font family of the text on the bottom half of the website, because it starts to get hard to read. But Overall it is a great job man
Keep it up!

2 Likes

Looks great for sure! Much neater than my challenge 1. One thing I found out a couple of challenges later is that using position: absolute a lot makes it hard to keep the elements organized. display: flex; works better for text elements for me.

However, as I also only started a month ago don’t take it too seriously. Whatever works better for you;)

You can find a lot of them right here in forum. Search for Tribute Page and look at other’s examples. Or to get a new idea, you can look for something in Google. I am sure it will help you!

Thank you very much for your advice. I do appreciate it and I will definetely check the link! Thanks agian!

Jeffrey, thank you for your advice. Really appreciated. I will start using media queries for sure

1 Like

Thank you! I really appreciate your words

1 Like

Your advice it really helpful. I will consider using flex more next time. Thank you!

Welcome to the forums @AlexMaksimov. Your page looks good. Some things to revisit;

  • Keep the test script when forking the pen (<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>).

    • Your page passes 2/10 user stories.
    • The test script should be included, with all tests passing, when you submit your projects.
  • The page needs to be responsive.

  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in HTML. (No need to include the body tags). For anything you want to add to <head> click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.

    • The link to your font would go in the box labeled ‘Stuff for <head>’
  • Run your HTML code through the W3C validator.

    • Since copy/paste from codepen you can ignore the first warning and first two errors.
    • There are coding errors you need to address.
  • Review the lesson about giving meaningful text to links.

  • I know Ashton Kutcher played Steve Jobs in a movie but since this is a tribute to Jobs, wouldn’t be better to have his picture instead of an actor?

Hi Alex,
I agree with levlaz regarding the photo being in harmony with the body background and regarding reponsiveness. I’m really not a web design expert, but overall the page looks good. Couple of questions/remarks.

What’s the use of the border-radius in #img-div? It doesn’t seem to make any difference when it’s commented or put to e.g. 50%

Same question regarding ‘display: block;’ in the div for the text columns. Div is already block level, so I think it has no added value.

Why are you using different widths for your four text columns? Isn’t it better practice to make them all the same width for such kind of page? You also can have less coding by grouping the properties with the same values for the four id’s into a fifth one. That way you don’t have to repeat them.

Keep going!

Regards,
Luc