I would really appreciate any feedback on my Product Landing Page submission: https://codepen.io/alocasia/pen/XWgJXQG
I struggled a bit with the getting the navigation bar and the video sections to work well and I’m not sure I coded those in the most straightforward/useful way. Feedback on any portion would be welcome though. Thanks in advance!
(As an aside. the goofy name of the company is just a stand-in for a random community mental health center, which is the field I’m actually in).
I think it’s good with a clean & elegant design. Well done.
Only very small things that I might change to improve it. I would give the links and the submit button a hover effect so it’s obvious when hovering over them. I might even style the submit button to match the links and make it a touch bigger also.
Lastly you start to lose your main h1 at about 370px width & below as the nav gets bigger. These are all little things that you seem capable of doing from what I can see
Thank you so much for taking a look and for the feedback! Those are really helpful suggestions and I’m going to try and make those changes. I didn’t realize I was losing the main h1 either; thanks for spotting that!
Welcome to the forums @alocasia. Your page looks good. Some things to revisit;
- Codepen provides the boilerplate for you. It only expects the code you’d put within the
body element in the HTML editor. (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.
- For instance, links to fonts go in the box labeled ‘Stuff for <head>’
- Run your HTML code through the W3C validator.
- There are HTML syntax/coding errors you should be aware of and address.
- Since copy/paste from codepen you can ignore the first warning and first two errors.
- 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
- Do not use view port units for font sizes. The user should always be in control of the text size on the page (that is, they should be able to manually increase the text size). Using view port units prevents them from doing this. Your job as a developer is to make sure your page is responsive to text size increases. If you don’t know how to manually increase the text size, using Firefox, go to the ‘View->Zoom’ menu and activate ‘Zoom Text Only’. Then while holding down the Ctrl key scroll your middle mouse button to increase the text size. If font-sizes are defined with vw units the only way a user can increase the text size is to widen the browser window. What if the user has really bad eyesight and can’t make the browser window wide enough?
Thank you so much for the feedback! I’m glad to know about the W3C validator and the notes about accessible font sizing especially.
I’ve worked on it and believe I’ve incorporated all your suggestions. Thanks again!
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.