Survey and landing page feedback

Code Feedback
1

Hi, I just finished the survey page and the product landing page projects, would appreciate some feedback, please be as nit picky as possible thanks you.

Survey - https://codepen.io/win20/pen/jOWZgqz
Landing page - https://codepen.io/win20/pen/BajVwod

1 Like
2

Hi,

The design of your survey form is quite beautiful. The colors, the entire design, stunning.
The code is good. You keep it simple and get it all done. I can’t find any faults in it and I’m going to remember that asterisk selector in my own code and setting padding and margin to zero.
The page is not responsive though, I would add that to the code. A few more media queryies and you’re done.

The landing page doesn’t have that finished feel. The movie doesn’t play.
I wouldn’t put that on top, it just feels clumsy. Of course if I would see an image, I might react differently. The fender logo is really small and I would draw more attention to the navbar, I had not seen it until I realized there should be one. I would put more space between the different sections and somehow show that they are different. Maybe center the contact section, or use different background colors for each section, something like that.
The code is again very good, simple and correct and the page is nicely responsive.
There are a few little things though, when I click on an item in the navbar I go to the right section but the top is hidden. I can’t see the title and that’s annoying. I don’t know why this happens but I always put more space between sections and that somehow resolves it. You could also be more semantic and use section tags. Why do you use a block display for the anchor tags in your footer? What’s the added value?

But that’s nitpicking. Well done!

Greets,
Karin

3

Hello, thanks a lot for the feedback:

  1. the problem with the video is that i couldn’t find a good video hosting website(i use imgur for the pictures) and since this is supposed to be a “dummy project” I didn’t really want to waste too much time trying to make it work on codePen but it does work perfectly if i just test the website on my browser.
  2. tried to section the different sections using seperator lines
  3. fixed the scrolling, it now goes just above the title and seperator line, i just added top padding to the section divs.
  4. the block display for the anchor tags in the footer is because otherwise the “privacy” and “terms” words appear on the same line, using display block nicely and easily puts them on different lines.

https://codepen.io/win20/pen/BajVwod

I really appreciate the feedback, I guess it’s time for me to move on to the documentation project.

4

Can you not simply upload something to youtube and embed that? Provided you have a video of course. Youtube makes it really easy.
The separator lines improve the look of the page.
I meant use the ‘section’ tag, which makes it more semantic.

Good luck with the next project!

Greets,
Karin

5

Im getting vertically stretched images on my iPhone X (Safari and EDGE)

image
image1241×2153 248 KB