Black Coffee Tribute Page

Code Feedback
1

Can I please feedback on my tribute page, any criticism is welcome.

link to codepen: /unluckiejunkie/full/oRLxyO

1 Like
2

If you “break” the link you can post it, codepen .io /youname/pen/blablabla or just add the end of it /youname/pen/blablabla

3

Thank for the response, I have updated my post and will welcome any feedback.

4

Looks pretty good.

  1. The font-family should be 'Roboto Slab' (with the quotes) not Roboto-Slab

  2. I’d increase the font-size and line-height on the body.

  3. I would break up the Upbringing text into three paragraphs.

  4. I would move the control of width to containers whenever possible.

  5. I’d use flexbox and CSS grid more and let them control the layout instead of using padding, margin, and width on individual elements.

  6. Using CSS grid and img elements for the media cards will make the layout easier and give you better control.

  7. When increasing the size of elements on hover I would use transform: scale();. I’d also include the color and background-color in the transition and probably use some different colors.

I refactored the CSS. There are not too many changes visually. Hopefully, you can glean something from the changes.
https://codepen.io/anon/pen/GaNvYQ

Anyway, good job on the page.

1 Like
5

Looks great, only suggestion would be to add a box around the links (upbringing and music career)

1 Like
6

I have noted down what your suggestions and the on hover looks better with a dark background. Also, thanks taking the time look at my pen and taking the time to show me how it could have been better with a little more loving
.

7

Thanks for the feedback, I will consider it.

8

This is very nice. I like the layout and cool transitions.

Keep in mind, your page is really nice. These are just small things to improve.

However, it isn’t responsive enough. For instance, the orange is the margin on smaller screens:

image
image1680Ă—1010 238 KB

Use something called Media Queries to change the margin on smaller screens to prevent this from happening and expand the text area just a little bit.

–> https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Also, remove the blue outlined on smaller screens. Keep it on the top and bottom, but not on the sides.

Then, the same thing applies to your Music Career Section:

image
image1680Ă—1010 173 KB

Text is cut off and the image is not viewable.

I would suggest using Flexbox to put the image and text in a row inside each card

–> https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Then on smaller screens use those Media queries, flex the image and text into a column instead of a row.

Also, make the cards bigger/ have a relative height so the text won’t get cut off.

image

Your text gets messed up on the bottom. Your main container (white one) seems like it does not have a relative height to account for moving items across different sizes of viewports.

Notes

Please hit the reply button or I do not get notified.

Helpful tools–> https://codepen.io/Mike-was-here123/post/check-out-these-sites

9

Thanks for the feedback. I have looked at the links you have provided, and am working on a way to better my code.

1 Like