Product Landing Page Katy

Code Feedback
1

Hey! I’ve just finished my product landing page project and would love it if someone could give some feedback if you’ve got the time :slight_smile:

Here’s the link:

https://codepen.io/KatyV/pen/jOPzYNv

Anything at all would be greatly appreciated!

3 Likes
2

As a high class of the upper feline order. I can tell you the next things.
Your site doesn’t look tasty at all? Looks pretty much the same kind of food i would give to that hyper energetic creature around me. The DOG.
We are cats and expect some classe use some of your imagination homan.
Also if i want my owner to buy me threats where do they go?
My thummy is rumbeling and it wants it’s snacks :cat:

2 Likes
3

Katy I’ve move your post to a more appropriate sub forum, Project Feedback since that’s what you’re asking for.

4

Oooops! Sorry! Thank you.

5

Haha thank you! I’m sure my Mr Pibbs feels the same :stuck_out_tongue:

1 Like
6

You are most welcome homan slave. :3

Miauw meo meow miauw
Translation: salute to you my fellow cat in arms Mr Pibbs. Remeber tail up and head straight and treath your human slave right.

7

248366_270000349811195_38818796_n
248366_270000349811195_38818796_n686×960 56 KB

This is him incase you wondered :rofl:

3 Likes
8

The page is nicely responsive.

  • I’m not crazy about the border around the product images.

  • See if you can’t fix the navigation so the links jump more precisely (help).

  • The design is a little dull, but I will take that over a non-responsive flashy site any time.

  • Placeholder text is not a replacement for labels.

  • Run the HTML through a validator.

Good job, keep it up!

1 Like
9

What a great photo! I love it.

1 Like
10

Thank you for the review!

I’ve added the label tag but hid it from view - will that still have the same effect? The accessibility is what I’m finding hardest to keep in mind at the moment.
I ran the validator and there are quite a few points i need to look at so will get right on that.

I will have a go at the nav bar too.

I really wanted to make the design a bit prettier with some doodle cats instead of the gray background but couldnt find an image without having to pay :sob: haha

Thank you again and will update once I’ve fixed everything mentioned :heart:

11

Do not use display: none, read this.

Design is hard and needs to be learned just like coding does. Look around for inspiration, like on Dribbble and so on, read some UX/UI articles, look on YouTube (here is a short scrimba course).

For images, you can use unsplash. For graphic elements I usually just search and make sure it is under a license I can use (you have to be a little careful with some sites), here is something I found from a quick search, see if there is something you can use.

12

Okay so here’s an update - https://codepen.io/KatyV/full/eYNjgXV

I took care of most of the html issues but i struggled with the iframe allowfullscreen im not sure what the error is exactly so have no idea how to make it better.

I had a go at making the design a bit more fun with the link you gave me for images too (Thank You!!) but I know i have a long way to go with that.

Also I really failed at the nav-bar… im just not getting how to use the :before tag

I await futher instrutions haha :slight_smile:

13

I love cats (I’m fostering six kittens right now for my local cat shelter) so I had to comment. This looks very nice and is pretty solid, but there are a few minor issues:

  • Your headers should not skip numbers. At the top you went from an h1 directly to an h3. You need an h2 in between. My suggestion is to make the current h1 at the top an h2 and then add a better h1 (such as the name of your product). The h2 for ‘Cat Nutrition Information’ can stay but I think you need another h2 above the prices (something like ‘Our Prices’). The h1 at the bottom definitely needs to go (there should only be one h1). Can probably be replaced with an h2 (maybe something like (‘Get Started’). Basically, you should be able to look at an outline of the headers on your page to get a good idea of the overall structure. This is especially helpful for people who can’t see your page.
  • Why not make ‘Enter your e-mail address to get started’ the label for the input box?
  • As I increase the font size I lose the links at the right of header (they fall off the page and there is no horizontal scroll bar). Personally, I would add a query break point based on 'em’s so that the links drop down underneath the logo and are flush left. Just in case you don’t know, using FF, go to the View -> Zoom menu and activate ‘Zoom text only’. Then you can hold down your Ctrl key and scroll the middle mouse button to increase the text size. You just need to experiment a little to figure out where the breakpoint should be.
  • When you increase the text size you’ll also see you’ve got some styling/responsiveness issue when as you narrow the browser window. Nothing major mind you, just some little annoyances that cause that darn horizontal scroll bar to show up.
2 Likes
15

Hi thank you very much for your advice and I hope you and the kittens are very happy together!

I’ve worked on all the points you’ve mentioned and managed to get the nav-bar working when re-sizing the text (I wouldn’t have even though of that if not for your advice!). I wasn’t able to get the e-mail address field and get started button to re-size when the font size is increased so there is still the sideways scroll at a very large font size. I will keep this in mind and try to get my head around it.

I also added some span tags to try to make the nav bar work a bit better but please ignore that bit for now because I think I have a lot to learn before I can make that happen properly :sweat_smile:

Thank you for taking the time to reply I’ve learned a lot!