Tribute Page: Beef

Project Feedback
#1

https://codepen.io/dallasviars/full/vYXvNbm

Will you all check out my Tribute page and let me know what you think, please? Also, FWIW, I was stumped on a subject to do it on so I fell back onto beef since I used to be a meat cutter.

Anywho, thank you, I truly appreciate any feedback!

#2

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

  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in HTML. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
    • Mentioning because you have some boilerplate elements and skipping others so it’s not clear if you know which are needed and where. You can review this for an understanding of the HTML boilerplate tags.
  • Run your HTML code through the W3C validator.
    • There are HTML coding errors you should be aware of and address.
  • Accessibility is about being accessible to all users. Review the lesson about giving meaningful text to links. For a more thorough explanation read Web Accessibility in Mind.
    • “here” is not accessible

I don’t often comment on someone’s styling but;

  • the figcaptions seems more like alt text rather than something that flows with the image
  • maybe do away with the bullet points since each list item is clearly delimited
  • what about the smaller screens that don’t have hover?
#3

Thank you! I started a new Pen to work on those things.

I’d run my HTML through the W3C validator and saw the errors about image tags with ul tags but was stuck on it, but I’m not sure why I got stuck on having a list format when it wasn’t in the project details. But since lists aren’t part of it I’ll investigate other formats.

For the hover I’d tried it on my phone (Samsung Galaxy S9) and touching those elements displayed the image and touching again hid them.

Thanks again! :slight_smile:

#4

I’m going to through another monkey wrench at you here. What about people who use the keyboard only?

#5

Here is a link to a new pen for my project:

https://codepen.io/dallasviars/pen/zYKbbVy?editors=1100

I gave up on the idea of having the images show up on hover, I wasn’t super happy with its interaction with the text alignment so I just have the images displayed by default. I changed the selected words for my link at the bottom and made the text larger so it’s easier to hit. I had toyed with having its size changed on hover to make it larger for someone using a mouse who may have trouble with finely controlling the mouse, but ultimately decided to simply increase the text size.

I had trouble with resizing on a desktop when I click the Restore Down button, it pushed the text out in all sorts of ways. To fix this I added “resize: both;” and “overflow: auto;”. I believe I could use another @media query that isn’t specifically looking for mobile to do it. I’ll be looking into that tomorrow, probably.

@bbsmooth - I’m not particularly familiar with using solely a keyboard for navigation and I couldn’t find a whole lot of information about it when I searched. I added some tabindexes to elements with text and it seems to work alright for me, even when the screen isn’t maximized you can tab to a section and use the arrow keys to scroll through the text. Does doing it this way work for you? Would you make any changes to how I implemented that?

Thank you!

#6

Pretty sure I’ve fixed the sizing issues when changing the screen size directly by clicking the corner and dragging the edges of the browser, I missed that there is a min-height option so instead of shoehorning the div size to 13vw I made that the minimum. Also eliminated the resize option since I no longer needed it.

#7

I apologize, I may not have been clear enough in my last comment. What I meant was that your flipable image was working for people who clicked on it with a mouse or touched it on a touch screen, but there was no way to flip the image using the keyboard only.

First things first, get rid of all those tabindexes you added manually. In general, only elements that can perform some sort of action (like an <a> or any of the various <input>s) should receive keyboard focus. There are exceptions but I won’t go into that now.

Now that you have altered your design and the images are always showing this isn’t an issue anymore. That was probably the best way to solve this problem in the first place.

#8

So, I’ve reworked this project and run it through the HTML and CSS validators that don’t give any errors, however when shrinking the viewing area I have alignment troubles with a couple items on my list (The Short Loin and the Sirloin items jut out to the right) but it only occurs when shrinking it from 800 pixels to 700 pixels. Can you all point me to why this is happening? Thank you!

Updated project pen:
https://codepen.io/dallasviars/pen/gOwVRqq