FCC: Tribute Page: Your feedback is highly appreciated

Code Feedback
1

I have finished my tribute page. Most of my code was hit or miss, so I would like to know what I can improve or change.

Here are things I’ve had difficulty with:

I decided to not use bootstrap so I could practice basic CSS a bit more and flexbox, grids were too confusing for the kind of layout I was going for.
I cant add margins to my “tr” for some reason.
My margins are all over the place and it was only through tweaking, using something like the code below that I could get my page as responsive as it is now.

#tribute-info div {
width: 70%;}

#tribute-info{
margin-left: 10%;
}
and
@media only screen and (max-width: 900px)

Thank you for your patience :slight_smile:

1 Like
2

It’s great. Very simple and beautiful. :slight_smile:

1 Like
3

Thank you Prasad :slight_smile:

4

Your is cool:sunglasses:

1 Like
5

Hi, I really like your site :slight_smile:

Some feedback for you:

  1. A lot people think that because the user stories request you to use id you have to style your page in base of id. That is false, the id’s are for the unit testing and you can use normal classes that is pretty helpful if you want to make changes so you don’t have to battle with css specificity.

  2. You have two rellaway font definitions one in the #main and other in #tribute_info div you can move it to the body because that will be the defacto font for your site.

  3. Main content will be your main content so why not put a main tag on it :wink: *

  4. In a single stylesheet/html it will be easier if your css is on order of appereance. *

  5. Didn’t notice a difference with/without background none of #titlebox.

  6. In img-div there is a closing figure but not an opining tag.

  7. Remove the titlebox and just use the heading with a class instead #titlebox #title.

  8. You dont need a table you can do that more easly with flexbox.

1 Like
6

Apologies for the messy css code, my work is mostly throwing things at a wall and seeing what works, hence, the redundant leftover bits of code :sweat_smile: I will definitely plan it out more carefully for my next project.

Applying all of your feedback, arranging css according to appearance, fixed errors. I am reading more about flexbox and have attempted to transfer my table into a flexbox layout but it was really messy. Will be trying again soon. Thank you for being so thorough!

7

Hi, you don’t have to apolagize, your method is really good, you can’t trive for perfect in this world so you make it and then improve it :slight_smile:

If you have doubts about how create the flexbox layout let me know, I’m not a guru but will like to help :slight_smile:

1 Like