Tribute Page Project - Chicago

Hi friends!

I would really love it if you had a few minutes to take a look at my tribute page and let me know your thoughts.

Many thanks! :slight_smile:

1 Like

Being from NY I can only wonder why someone would tribute Shy-town :sunglasses:

Okay, onto the real stuff.

Nice layout but when resizing the page to a smaller viewport, the Chicago overlay becomes “Chi” and barely the “I” shows.
For the image, you’ve got your CSS for it. Take the width out of the HTML

Personally, I’d remove the bullet points. Your dates are highlighted and show so the bullets, to me, are not needed and they’re distracting.
Also, when resizing to a smaller screen the points do not size correctly. Maybe think about a min and max width for that section.

Rather than doing a header for your quote and then a sub element maybe think about doing a blockquote.

For accessibility rethink your link to ‘Wikipedia’. If your link was to ‘more information on the city of Chicago’ it would be easier for anyone with accessibility issues to understand what they were linking to.

As a side note, codepen has all the header info. When creating a pen what you’re adding is basically everything between the <body> tags. If there’s something additional you want to add click on ‘Settings’ button and do the changes there.

Haha! NY has a special place in my heart too because my mom is from NY.

And Wow! I was not expecting to get that much info. I have a ton to look into. Thank you!

Stupid question…How did you test the different sizes?

1 Like

@heatherconard I’m glad you took it the way it was meant. My dad is from Chicago and I’ve spent time in that beautiful city too.

The easiest way to check the sizes is to resize your browser. Make it smaller than whatever width you normally view.
You can also right click on the page and click on ‘inspect’. This will allow you to see the elements, console, etc. (You’ll want to see the console when you do JavaScript) In elements there’s a little tab that let’s you toggle to see a couple of different devices. (I know I’m not explaining that well, it’s late and I’m tired. If no one else appends I’ll update in the morning)

No worries! You’ve given me enough to figure it out. And I want to smack myself for not even thinking of adjusting the web browser…duh!

Thanks again! :slight_smile:

GREAT looking page, love the iconic skyline and the faded text overlay. Interesting content, love the Twain quote, overall very well done.

Me being me, I’ve got to pick a nit or two. Nothing really wrong, but some things to consider as you move forward.

First, a personal thing (and as I’ve been told it isn’t a fair criticism to expect this at this point in your HTML development), use semantic web tags. I find that I have cut my div usage to less than ten percent of what it has been. I very rarely use them anymore, as we have things like main, or (in this case) article and section tags. The container for the tribute can be easily changed to a main or an article tag, which makes sense, and each section within that can be… a section. One of the primary advantages to semantic markup is, when viewing the actual HTML, one can see quickly how the various parts interconnect.

I wouldn’t make a big thing of it, except that you do use semantic tags. So I want to encourage you to continue, you’re really on the right track with that.

One semantic tag you’re using is the figcaption. It’s a handy tag, and yes, it’s intended to be a sibling of the img that it captions – but the two of them should be nested in a figure tag. The figure is a complete entity in itself, made of both an image and its caption.

And on an aesthetic note, I might switch the quote, as was suggested, to a blockquote tag, and give it a bit of padding. In my browser, it’s crashing into both left and right edges of the grey box.

Great feedback! Thanks so much.

In response to the comment about fair criticisms at this point, if I don’t know about it, I can’t learn it. I want to become better, so bring on the higher level stuff! :slight_smile:

Again, the fact that you threw a figcaption in there with its image shows you are ready for that next step, and I think you’re gonna ROCK it! You’re doing great so far, keep it up. I’ll be watching. :wink:

1 Like