Product Landing Page - Boomerbuggy X

Code Feedback
1

My product landing page for a mobility scooter: https://codepen.io/timothy_chan/full/vYxXyNM

Thanks for taking the time to give me feedback!

2

hey @timothy_chan. i like your page. the only thing i noticed (other than the space under the footer which idk how to fix) is that it lacks a little bit of contrast. i saw another project page by @ccblair on here that i really like and i think it’s a great example of a contrasting yet complementary color palette. here’s the link to christian’s post Product Landing Page - Feedback Requested
i hope this helps. great job on your page : )

2 Likes
3

Thanks ecouch23! I did use a contrast checker and it meets the requirements so I left it like that. I’m going more for softer colors than in Christian’s page.

1 Like
4

Pretty good I can’t really seem to find any real big issues with it.
Maybe as something extra make something happen when you press the select button in the pricing section?

1 Like
5

Honestly, I think everything is great, the colors fit well with the webpage. The only things that caught my attention are the position of nav-btns, I think moving them to the right would be good since the right side of the navbar has nothing. Then again you can use whichever fits you.

And I also found noticed you used padding for all directions (padding-top, padding-bottom, etc)
Try using Clockwise Notation to padding.

1 Like
6

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

  • Check that the user has entered a valid email addr. Throw an HTML5 validation error if not.
    • You learned to do this when coding the survey form

Add the following line to your #pricing selector
border: solid 1px red;
It will help you see how you have it styled.

On a side note, you can add that line to a universal selector and see how you have all of your elements styled.

1 Like
7

Thanks SarahYT! When you click the select button it would bring you to a new page where you enter your information to buy the scooter which is outside the scope of this project :sweat_smile:

8

Thanks for the suggestions MAZ1211! Definitely moving the nav buttons to the right is an option but I think it looks ok as is so I’ll leave it like that. I used the clockwise notation for the padding to cut down on the lines of code :grinning:

1 Like
9

Thanks Roma! I figured out what was causing the space under the footer with your trick. I didn’t know that pushing main too far down would push it lower than the footer.

As for the email, it does show a validation error when you click the submit button. Are there other validation errors it’s supposed to show?

image

image

10

What you have now will only show an error if the user has partially typed something in. What if it’s blank and they hit the submit button? There should be an HTML5 error. This is what you did in the survey form. There was an attribute added to the input to ensure that the user filled in the field.

1 Like
11

ohhh, that makes sense. it looks great as is (and i’m not a web dev so my word isn’t as hefty as an experienced person’s would be lol). have a good day/night : )

1 Like
12

Thanks Roma! I fixed it now. The part where it said

id="email" where I can enter an email address

made me think that I didn’t have to put that in the code.

13

Glad to help @timothy_chan. Good job!

1 Like
14

@timothy_chan Good job. Your page is nice and clean. One thing that concerned me though was your use of the html accesskey attribute, so here’s a bit of reading on the element:
MDN Global accesskey element

Nice work though :slight_smile:

1 Like
15

Thanks LoonyToon for the information about accesskey! After reading the link, it says generally to avoid accesskeys:

it is generally advised not to use accesskey s for most general-purpose websites and web apps.

Would you say that I should remove all the accesskeys from my page? What would be an example where it would be appropriate to use accesskey? :thinking:

16

I think it would be sound advice to avoid the use of the accesskey attribute generally.

As for an appropriate situation where it might be used appropriately …perhaps if you were designing a system for a specific browser, OS, assistive technology combination then it may be used successfully, after careful assessment of all keyboard shortcuts of the tech you are building on of course :wink:

1 Like
17

Thanks LoonyToon! I already removed all the accesskeys from my product landing page a few days ago. I also removed them from my tribute and survey page. I guess basically one less thing I need to do to make my web page accessible. :upside_down_face:

18

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