Tribute page 2.0 feedback and question on scaling

Hey guys,

Just finished the updated version of my tribute page: https://codepen.io/sammy-misbah/pen/oOErME
Feedbacks and comments are greatly appreciated.

I have one specific question: i was looking if it was possible to scale the whole page while the browser was changing size: as i reduce my browser size, i would like all the elements to adjust automaticly instead of entering multiple media queries. I found some comments on that issue saying that javascript was required. No way to do it with CSS only?

Thanks!

2 Likes

Hey !

I like your menu. Search up a few 2019 modern menu design thought and try to enhance it! :slight_smile: Also, #CR7 for the win :slight_smile: got out of the champions league thought but he only could do so much for Juventus! XD

Also, regarding your responsiveness related question. In CSS, media queries are used to make a webpage responsive. There are other ways to do but as a beginner I would suggest you to use media queries and get very familiar with them before trying other thing for responsiveness.

  • Tech

Hi, I found this article to be useful for your purpose.

Basically a primer on using the calc() function within css. So I am assuming the use of media queries isn’t needed for the adjustment of elements.

Credit: Chris Love

BTW - tribute page rocks! Go Juve!

1 Like

codepen provides you with validators for HTML, CSS and JS. Click on the arrow in upper right and then click on the respective ‘Analyze’ link. There are a few things you should look at cleaning up.

Red/green colorblindness is the one that most suffer from. Having the green background and then having headers only a slightly diff green means parts of your page will not be able to be read.
I’m not colorblind but there are some things on a smaller screen that I found difficult to read because they blend in together.

I’d suggest re-reading the accessibility lesson about giving your links descriptive meanings. ‘Wikipedia’ and ‘Official website’ do not convey much to a screen reader.
(https://learn.freecodecamp.org/responsive-web-design/applied-accessibility/give-links-meaning-by-using-descriptive-link-text)

1 Like