Hi everyone, I just finished my tribute page project, and I decided to do something different with the coloring, header and footer your feedbacks would be appreciated. Please!!!
here’s the link:
https://codepen.io/tonymandated/full/qBaapaq
Hey Tony,
I think we can give you some feedback if you provide us a link to your project.
oh! my bad I’ve updated the post with link.
Hi @tonymandated !
Your page looks sooo good . Like this choice of colors and eye-catching header font.
Your tribute page looks great. I like you matched the color of your header, footer, and link to the color of the background of the picture.
Thank you so much!!!
Exactly what I did! thanks for the nice feedback
Looks good man! keep up the good work
Thanks very much !
Ahh I like it very nice efforts.
Thank you very much, I’m trying my best.
Wow - I LOVE the colors and layout you used!! And your code is so clean and well organized! You are a very thoughtful coder! You (and a few others who have shared their projects here on the forum) have inspired me to go back and work further on my first two projects instead of moving on after just satisfying the tests like I had originally planned on.
What I especially like about your tribute page layout: I like how you used the css sticky property to keep your header and footer in place, your use of flexbox to put the tribute image and bio into a row (I really like the border-left you used as a divider), and how there is more tribute info below the row. Small touches like putting the link in orange to match the theme color makes for an overall very aesthetically-pleasing page! I have learned a lot and gotten some really great ideas from your work, so thank you very much for posting!!!
The only feedback I can offer is regarding some content on the page (I am an EFL teacher). In your title caption I would change “literary characters” to “literary figures”. “Literary character” is usually used to refer to a fictional character whereas “literary figure” is more often used to refer to an actual writer.
Also, I would edit your figcaption: it is redundant to just say that the professor is wearing a black suit and beret - usually captions do not describe only what is visually represented in the photo. If you want people who are visually impaired to know what he is wearing, I would put it in the alt tag. You could give some other info in the fig caption, such as how old he was at the time pictured, or where he was photographed. However, if the professor was famous for always wearing the black suit and beret, you could indicate that in the figcaption by saying something like, “Professor Chinua Achebe in his signature black suit and beret.”
** Also, I forgot to add something regarding media queries: in an article here at freeCodeCamp, the author states, “Important: Always put your media queries at the end of your CSS file.” But I have also read that there are sometimes specific reasons to place them otherwise within a CSS file… I am finding all of the info regarding media queries a little overwhelming and wondered if there was a specific reason you placed yours where you did? I will include the link to the article, plus a couple more I found informative, if a little overwhelming
freeCodeCamp article
Mozilla guide to media queries
I will be posting my tribute page and survey form - both of which could use a lot of feedback, so if you happen to see them, and if you wouldn’t mind, I would really appreciate your input! Thank you in advance!
That looks really nice! Well laid-out and good choice of colors and fonts.
You should be proud of it!
Thank you very much, for this wonderful feedback.
- I have changed the ‘character’ to ‘figure’ and I now love it better
.
- I have also edited the figcaption, could you please check it out?
- Regarding media queries, I am really grateful for the article links you shared, I visited them, and they were educating
I think, the positioning of your media queries, depend very much on your approach to coding, keeping in mind that the browser interprets or rather ‘READS’ your CSS file from top to bottom and that when more than one rule exists for the same element , the rule that comes last overwrites all the previous ones.
I decided to place my media queries at the end of the CSS because it made my code shorter, and saved me from unnecessary repetitions (I try to embed minimal code inside queries). I set all the rules for my element outside the queries and then only overwrite the necessary ones inside the media query. For example:
#img-div {
text-align: center;
background-color: transparent;
color: var(--secondary);
width: 100%;
}
@media(min-width: 600px) {
#img-div {
width: 50%;
margin: 0;
}
}
I don’t know, I always have a hard time communicating ideas in the shortest possible way. I hope you get my explanation, feel free to ask more questions.
Lest I forget, once I see your project, I will definitely drop a feedback, thanks.
Very nice page Tony. Good use of space, fonts and color, flex box and media queries. The page is nicely responsive. I would get rid of the vertical border in the large screen views, or at least soften it.
This looks really good man!
Beautifully done …