Feedback is welcome
Hey everyone i have made my first project on cat theme which includes HTML and CSS.
You can see it live here
The code is here
Hey everyone i have made my first project on cat theme which includes HTML and CSS.
You can see it live here
The code is here
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
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.