Product landing page. Feedback

Hello, campers!
I made the product landing page and I am wishing to get some feedback.
Last time I got comment that I need to be more original, so I did that. I learned a bit of Figma and created this very “profound” design: https://www.figma.com/file/rKeaEjZy8mfFNSOPZU02q1/Product-Landing-Page?node-id=0%3A1

During this exercise I believe I learned a lot. I dreamt about flexbox :smiley: .
I wrote code in VScode with vh and vw units and because in codepen the page is embedded, those units includes codepen menu - which distorts the design a little bit. Tried my best to translate :slight_smile:

Here’s the codepen: https://codepen.io/paulauskas-linas/full/RwVrGWo

Thanks in advance!

Hey! i just checked out your website and here are a few suggestions.

  1. Your navbar overflows on small screen sizes, i would recommend you to implement a simple css dropdown to solve this issue. here’s an awesome tutorial, if you want to learn how to do that.
  1. You do not need to add the body tag when working with codepen as it is added by default.

  2. Instead of adding a relative width on the input element, so it doesn’t become too big or too short at certain widths.

  3. I would also suggest you to try to adopt a code arrangement strategy so its easier for you as well as others to look through and debug your code.

Hope this helped! :slightly_smiling_face:

1 Like

Thank you for your feedback!
I updated the link to codepen.

  1. I tried that menu. It was very nice challenge. And I was successful in implementing it. It is sad that :focus pseudo class is not supported in Safari and Firefox. On chrome in works well.

  2. As mentioned in original post I am working in vscode, I am just copying to codepen to share. In addition this time my body has class, so I don’t know if it works in codepen without those tags. Next time I’ll keep in mind.

  3. I am sorry I couldn’t understand what you mean. I believe your sentence lacks some words.

  4. Can you give me tips or suggestions where to search for that? Especially for smaller code snippets. I coded the page as I went, so when something doesn’t work - you fix that, then another thing doesn’t work - you fix that. So back and forth and the code becomes spagetti :confused: I need to learn some code organisation.

Thanks again!

if you want to learn how to organize your css then this should help

Thank you for the resource. I have read it and try to use the main principles.

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