My first project - Catbook

Feedback is welcome

Hey everyone i have made my first project on cat :cat: theme which includes HTML and CSS.
You can see it live here
The code is here

3 Likes

HI @sneharatnani !

Welcome to the forum!

I think your page looks good.

The only thing I didn’t understand was the nav link for the Catbook.
Right now it is the same link for the home page.
So I wasn’t sure why that nav link was there.

Hope that helps!

Hi
Thank you so much for your feedback.
I have put the same links in catbook and home because i thought that if a non-technical person visits the site he can get to the home page without any effort.

I’m a huge cat person (I foster kittens for my local cat shelter, I have an eight week old Lilac Point Siamese right now) so I had no choice but to review your page :smiley:

The responsiveness is very good, I’m not getting any horizontal scroll bars and all content is visible at all times. The only thing I might suggest is that you have an intermediate transition on the four cat cards at the top. Currently it goes from one single row of 4 to one single column of 4. As I narrow my browser the cards get pretty skinny before they switch to the column. I think you should have an intermediate step where they make a 2x2 grid.

For your headings, it is considered best practice to have the h1 near the top of the page. Can you come up with some type of title and use that as the h1 heading above the cat cards? Then the h1 at the bottom would be an h2.

All of the cat images need to have alt text. This should be easy, just describe the cat to someone who has never seen it before (length of hair, coloring, etc…)

The hamburger button needs to actually be a <button> (for accessibility, otherwise you can’t activate it with the keyboard). I usually cut people slack on this because implementing a proper hamburger menu requires JS and a familiarity with how to handle the accessibility issues they cause. I just wanted to point this out so you would be aware of it.

The color contrast of the white “CATBOOK” on the light brown background in upper left corner link is not quite big enough to be accessible. You can use WebAIM’s color contrast checker to make sure your contrast ratio is big enough.

I would also suggest that you have this link come before the nav menu in the HTML. Generally you want the keyboard focus order to follow the visual order. So most people using a keyboard would expect to tab to the CATBOOK link first and then the nav items but right now you have it the other way around since the CATBOOK link comes after the nav items.

Also, don’t use px for width. On the CATBOOK link you have the width set to 83px. Even at the default font size the link text is barely breaking out of the right side of the box. Use em or rem units for width (in this case I’d use em since you want the width to be based on the font size used for this particular link). That way the width will grow as needed based on the font size. But to be honest, you don’t need a width on this link at all.

Hi @bbsmooth
Thank you for your deep observation.
I will try to implement the changes you have recommended.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.