Check my Tribute Page (by Porphyrogennitos)

Project Feedback
#1

CodePen.

So I finished my first challenge for the “Responsive Web Design Principles”.

I would like to read your thoughts.

How can I make it better? Does it need refactoring? Etc.

#2

Your page looks good @Porphyrogennitos.

Regarding your media query question,
background will supercede all previous background-color , background-image , etc. specifications. It’s basically a shorthand, but a reset as well.

1 Like
#3

Could this page be done with grid? If so, should I do it with grid so I practice?

#4

Flexbox makes more sense for this. As a general rule of thumb, Flexbox for single axis (either X or Y) layout, CSS Grid for 2-axis layout.

1 Like
#5

you might wanna add some extra content/utilize more element options like lists, span, bold text, just to taste how it works and the experience in coding it.
I also would suggest you use less bright color for the background, because it can be unpleasing for the eyes.

#6

The page looks good overall, but a lot of improvement can be done.

Warnings

  • Avoid using pure or bright colors in general especially for backgrounds.
  • The page feels empty, try to add more content, check Wikipedia for content, or add some lorem ipsum.
  • Add margin-bottom to the footer element
  • making a website responsive isn’t about colors it’s mostly about layout, We don’t want this half screen long paragraph while we have empty space beneath the image.
  • I recommend changing the layout to single column and moving the image to the top of the page at the mobile breakpoint

Recommendations

  • Don’t just try to pass the FCC test, try to be more creative and give a personal vibe to every project you make
  • Finally just try to put more effort, and make each project a masterpiece :smiley:
1 Like
#7

Other quick notes

  • max/min-width shouldn’t be a relative size it doesn’t make sense if you think about it. The correct use of it is
width: 100%;
max-width: 620px; /* 620px sis just an example */

This will make your image scale with the viewport, and when the viewport is > 620px the image will remain 620px.

  • btw make sure you restore the normal flow of the page ( flex-direction ) if you’re gonna use that.
  • also add margin auto to center the image
1 Like
#8

Check this:

It has the max-width with a relative size and the width with an absolute.

1 Like
#9

For responsiveness you’re correct in using relative units.

1 Like
#10

This is not correct. There are use cases for using relative max-width values. Say for example that you have an image set for 600px width inside a responsive container. Now that container reduces in width to 500px due to a smaller browser window. In that case setting a relative max-width of 100% makes sense. It ensures that the image is set to 600px width. But if the container becomes smaller than that, it makes sure the image resizes with it.

Edit: I stand corrected. You’d get the same effect by setting a width to 100% and a max width to 600px. I suppose it’s a matter of preference to how you approach it.

1 Like
#11

yeah, I guess I missed this one, Thank you.