Build a Tribute Page Challenge

Here is my tribute page to Percy Julian. Let me know if you have any feedback. Thanks for taking the time.

Percy Julian Tribute Page

Looks good.

When you have more experience with Bootstrap and Responsive design, just come back to this project and improve it before showcasing it in your portfolio.

Thank you, Owel. What, in your opinion, needs to be improved? Thanks for the feedback.

These are just my personal opinions as design is subjective.

The site isn’t really Responsive, though you earn points for it still being usable on a small screen. Right now, everything is just % scaled up or down.

I think the left and right column of B/W photos can be presented better as a gallery below your main copy. That layout would also work better on a small phone display as the photos can be stacked up as the display gets narrower.

Here’s a quick mockup.

Nowadays, all of the sites you design should work with mobile devices… at least get in the habit of thinking that if you want to be a good web developer.

1 Like

@owel

Thank you for your feedback and understanding that designs are subjective.
I am certainly a beginner and responsive design is something I haven’t completely figured out yet. I know that scaling (%) is responsive and so is the bootstrap framework. I am making the assumption, based on the design you linked to, that your definition of responsive is changing the layout when scaled to a smaller device.
I did find some css that was incorrect which was preventing the bootstrap grid from stacking as expected when scaling. I have made some minor changes to my tribute page while keeping with my original design idea. I hope this is what you meant by responsive although it may not be to your liking as an overall design. Again, any feedback is welcome and appreciated as I want to learn and learn correctly.

Yes, much better. More readable on a mobile device. Though the galleries disappeared. So next challenge: figure a way to still show the gallery on a mobile design. (imagine that’s what the client is asking, and you as the web dev need to figure that out.)

TIP: One way to do this is by using the classes visible-xs and hidden-xs. You can have certain divs show only on mobile. You can put your gallery below your main text for the visible-xs version. Don’t worry, since it uses the same image files in your desktop version, you won’t be downloading images twice.

Yes, responsive is just presenting the same desktop website so as to be still usable and easy to navigate for mobile device users.

Okay great. Thanks for the feedback.
Funny you mention the hidden class helper because that is what I used for hiding them on mobile. I plan on adding the galleries back in later, I just ran out of time today.

@owel

I updated the site again to include the image sidebars relocated when scaling. Hope this is okay. Your feedback is welcomed.

That’s good.

Next Challenge: If the user has a 2560px wide monitor, or 2 monitors side by side (3840px wide) and they maximize the browser, your whole tribute website also maximizes to the full width of the browser.

Can you design the site so that after a certain browser width, your content just stays at a certain width and just centers itself on the screen? The left and right extra spaces will just be white space.

** You don’t really have to do this ^^ for the challenge, you’ve already met the user stories of the challenge. But this is a common issue when designing sites. To see what I mean, widen the browser on this forum site. See how after a certain width, the left and right margin are just filled with empty space?

Thanks for the feedback and challenge. It is updated for you to look at. I have it set to change at 1500px instead of the 2560px for testing purposes only; just in case someone doesn’t have that large of a monitor or two monitors.