Jeff Astle Tribute Page, Feedback on My project so far.. WIP!

[cwoodcock1989]

Here’s My Project

please give feedback on what you think so far, any particluar font/background colors you think may work well(WBA wear blue and white)… i’m passing all tests i just need to add more info and give it some color.

[AndyG]

Hello @cwoodcock1989 , your page looks good. However there are some things that could be improved:

1. Be careful with text alignment.Your page will look more organized, especially on small screens.
2. There is a small issue in responsibility,
   
   
   
   As you see, for mobile devices, text alignment is even more important.
3. Regarding the colors, I think they are ok, is up to you after all. For example, You can use a blue-green, or a dark-aqua but is your creativity.
   Congratulations for your project.
   Hope this helps.

[michaelnicol]

This is a great start to your tribute page project and I have a few design and responsive tips for you to work on.

The first thing I would work on is making your items centered and not stretched. Your sections take up 95% of the page, requiring the user to read across the entire page in one long sentence

Here is a example of a responsive image overlay I was working on: https://codepen.io/michaelnicol/full/mdmWVwQ

You can see that all of my text is in one 500 pixel width area that does not require the user to look across the entire page. All my content, including the image, is in the middle 25% of the page. This grabs the users attention and focuses it on a smaller part of the page at a time.

I made a quick example page layout on canva that can show roughly where some elements should be. I put your stats in two containers that are flexed next to each other (remember to add flex-wrap: wrap). This entire area should only take up 30% to 50% of the page width to prevent everything from being stretched.

I also added a footer where credit can go, along with links to your codepen and FCC.

Here is a example of a footer from my tribute page (link)

Keep in mind my footer is 100% the width of the page, I just centered the content so it doesn’t take up all of it. That line I used is just a hr with a gray background, gray border, and a box shadow.

If you do take up this layout, then you need to use media rules to make sure your content takes up 100% of the width on mobile screen sizes (Press F12 → resize developer tools to change viewport width).

Pro tip: You can center any item in CSS using margin: 0 auto. It will center the item within the container.

I would also add box-shadow: 2px 2px 5px black; to all of the white div's that contain your information to make it pop. I would also remove the bullet points from each of the stat boxes.

You could decide to put everything inside one main container with a background image or color (such as in the example project in the challange), but I would advise you to research and make your own design choices you like.

You are off to a good start and I wish you the best on your projects.

[cwoodcock1989]

Thank you soo much…
Your tips really helped…
Though I will be adding more stat containers and info to the page.

Media queries confuse me a little I must admit… can I target everything on the page or would I need to add a seperate query for each element.

Your help so far has been invaluable…

As stated I’m passing all tests but I would like to fine tune this project and make a finished article in order to give myself the most amount of practice I possibly can

[Roma]

Your page looks good @cwoodcock1989. Some things to revisit;

• The code in the HTML editor is written in HTML. Is there a reason you’ve chosen Markdown in codepen’s HTML preprocessor? You don’t need a preprocessor here. Markdown is a different markup language.
• Run your HTML code through the W3C validator.
  • There are HTML syntax errors you should be aware of and address. (Invalid html elements, unclosed elements, attributes set incorrectly)
  • Since copy/paste from codepen you can ignore the first warning and first two errors.
• In codepen’s CSS editor you’ve selected the SCSS preprocessor even though your code contains no SCSS.
• Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
  • Reference MDN Docs
• Click on the chevron in the upper right of each editor and select “Format”. It will make your code easier to read.
• Blue text on a blue background is very hard to read. Use a contrast checker to make your site accessible.

The following is a suggestion. You do not have to incorporate any suggestions in your project.

• You have a media query to have text centered on a smaller screen. Why only on a smaller screen?

[michaelnicol]

First of all… Amazing progress. I like how you implemented the new ideas and made your page more fine tuned.

Roma in the comment above has good advice on the colors and page structure. I suggest look at some better color schemes for more contrast between the text and background colors. I suggest keeping the text black with a white background in each text section, and simply changing the main background colors.

The paragraph below the image should go on its own white container with its own title (just like the career section).

All of your white containers need some padding (space between content edge and container edge). The text is pressing up against the walls of the container.

Make on your titles bold. Reading larger bold text is not user friendly.

The Wikipedia link should be a different color rather then bright blue on a blue background. Its possible to still keep it bright blue, but you shouldn’t leave in on a blue background.

Hide the scroll bar on smaller screens while still keeping the page scrollable (research challenge). The scroll bar seems to cut off some of the text when viewport gets smaller.