Hi friends, I’ve finished my first project, a tribute page. Please give me some advices to make it cool.
https://codepen.io/elliotzengyi-the-designer/full/BgZLpw
8 Likes
It is actually pretty cool! I really like the text overlapping the image. Very nice page: simple, clean, readable and with consistent use of colors.
2 Likes
Hi @elliotzengyi!
Your tribute page looks awesome, I really like the way you display the photo!
Keep it up!
2 Likes
Hi @elliotzengyi, very nice job. My feedback;
- For anything you want to add to the
<head>click on the ‘Settings’ button and add it into the ‘Stuff for <head>’ box. So, the link to your font would go in the box labeled ‘Stuff for <head>’ - I like how the name displays over the photo on a large screen. On a smaller screen, it covers the picture. Perhaps make the font a tad smaller on smaller screens so the picture still displays.
- This is a nit but you copied/pasted your tribute info and it includes links to footnotes that you don’t have. Those links are the number in brackets (such as [1]). Just edit and remove them so your text flows better.
2 Likes
Hi Roma, Thanks a million for your kind feedback.
- wow. this is awesome new skill for me to manage all those links.
- I wrote a media query to re-position the GRRM name to stop overlapping when page width becomes smaller than 400, what is the key width do we usually take control for responsive web design?
- will do!
Thanks again mate.
2 Likes
When I’m setting media queries I just Google and see what is the size of most common desktop, then iPad, then a small screen.
1 Like
Guess I missed the medium size for iPad. Let me think about it and fix it. thanks mate.
====
I wrote 2 new media queries, one is for 480-, another is for 481 to 768. is it better?
Looks pretty good overall, nice clean design. My only suggestion is to improve the contrast of the currently yellow background/white text sections.
https://color.a11y.com/ContrastPair/?bgcolor=F3BA40&fgcolor=ffffff
1 Like
man! this tool is fantastic! Let me try to fix that.
is it better now? friend, thanks for all your great suggestions.
1 Like
Nice dude! Good job on that
1 Like
in my opinion, it will be perfect, if you make your text block set.
and plus i like your idea to combine picture and title together.
1 Like
I am not sure about “text block set” since english is not my primary language, would you mind to tell me more about it? Thanks a lot for leaving your kind suggestion here.
it’s actually my problem too!
i meant that you can justified your text.
“Paragraph or block of text in which all words in all lines are spaced-out such that the first word aligns with the left margin and last word with the right margin.”
i hope that you understand what i mean now!
Hi @elliotzengyi congrats on your page! I think the text would look a lot better if it was all justified since it’s a lot of text , but it is a really good looking page! I will be doing mine today 
Using the chrome devtools to emulate mobile will tell you the dimensions too 
Looks good to me. The only thing that I noticed was that the pic and the text below it are not centered evenly. You should get the picture to center over the text or the text to center under the pic. You can probably do that with margin or padding.