I need critics (Survey Form design)

Code Feedback
1

I finished making my survey form. But I need critics to improve on it

What do you think about my design? And the way the layouts are coded?

2

Hey, just a few things that jump right out at me:

  • I can’t really read your form. Some of the text is way too small and the text color does not have enough contrast with the background color. You can use the WebAIM Contrast Checker to make sure you have enough contrast.

  • Some of your <label>s aren’t working properly. Remember, the for attribute on the <label> points to the id attribute on the corresponding input.

  • The textarea is not working properly. I’m not sure I need to elaborate on this. I think it is pretty obvious that there are problems.

1 Like
3

I actually really like this Design Idea.

A few things, on top of what bbsmooth said:



FIRST:
In your body CSS, it looks like you have a locally hosted background image that is not appearing, and needs to be converted into a hosted image link. You can host images for projects at imgur.com

body {
    font-family: 'Courier New', Courier, monospace;
    background: url(black\ background.jpg)
}

FOR MORE PHOTO HOSTING IDEAS:
https://forum.freecodecamp.org/t/adding-an-image-in-codepen-w-a-relative-link/501263/6



SECOND:
The <h1> text is breaking out of it’s <div> at smaller widths:

Screenshot 2022-03-21 8.32.18 AM



THIRD:
Because Your design Idea has kind of a 3D vibe and is a very cool concept, I would suggest you learn some things about 3D Text styling, and try to use it here:

EXAMPLE:
Screenshot 2022-03-21 9.35.02 AM

<H1> TEXT CODE:

h1{
   font-family: 'Bebas Neue', cursive;
    background-color: #41382a;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: rgba(59 190 197 / 40%) -1px 2px 1px;
}
1 Like
4

Your page looks good @xynoan. In addition to the things @bbsmooth mentioned, here are 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.
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
    Reference MDN Docs
  • Make your page responsive. Remember, the R in RWD stands for Responsive
    On smaller screens the h1 element falls out of the container and the input elements are cut-off.

As also mentioned by @ALLESS, you’ll need to host your background image somewhere so that it will be displayed. You can search and find sites that will host your image for free but it’s best to not use imgur as doing so goes against their terms of service.
Briefly it says; “
don’t use Imgur to host image libraries you link to from elsewhere, content for your website, advertising, avatars, or anything else that turns us into your content delivery network.”

2 Likes
5

@Roma
Do you think that applies to temporary projects on CODEPEN? Specifically, if it’s only two or three images being hosted?..

Where would you suggest then?

6

@ALLESS, I’ve seen multiple times where images hosted on imgur do not display. Sometimes they do, a lot of times they do not.

Searching shows a lot of sites that will host images for free.
If familiar with GitHub, images can be hosted from there.

7

Maybe it’s just me, but I’m getting a bit of a tombstone vibe from that design.

@ALLESS It is against the Imgur TOS so they can block it whenever they want to.

It used to be the case that Imgur images were getting blocked more often than not when used on Codepen. Not sure if they have relaxed the blocking.

Anyway, it’s just not a good image host for Codepen project or for use as a CDN for site image assets.

8

Should I put a warning on this list then?

9

Yes, probably. Let’s take this to DM so we don’t detract from the OP’s topic.

10

The interpretation is in the mind of the beholder

You have a mind that sees tombstones
 Morbid. : )

( This is a joke, as denoted by my smiley face
 )

11

Sure, I might be projecting.

tombstone
tombstone980×660 19.9 KB

1 Like
12

I saw it after you said it
 And now it’s stuck in my mind. Thanks.

At least John lived to be 90 ( ± 11 months)

13

I used the link you provided, it was helpful. Thanks!

I see. I fixed those, as well. Thank you!

I fixed this one too. Thank you so much for the feedback! <3

Omg I’m glad you liked it! <3

With regards to that, I have a Github account and I think I can figure out how to host images from there if I will try to study deeper :smiley: , for now I honestly don’t think you guys mind not having my background image existing here

I’m honestly having a hard time studying media queries, but today, I fixed that part! I still have a few concerns, though, if you don’t mind helping :smiley:

  • I can’t figure out how to move “Form” to be read as “Survey Form” and not
    “Survey
    Form”
    In smaller widths.
  • With regards to my textarea, I can’t seem to figure out how to move down the line so it doesn’t look messed up. (in smaller widths, too.)

Wow. I appreciate your suggestion but I tried working it out with @bbsmooth’s provided contrast checker and it doesn’t seem to work well with the current background-color of my form. I would definitely use that 3D feature in the future, though! Once I made a website with a compatible background-color for it! <3

Thank you!

fixed! <3

I fixed everything here, as well! :smiley:

I fixed it by following the link you provided; I started using margins :slight_smile:

I fixed the h1 falling out of the container but I want to forward to you the same concern I replied to @ALLESS:

15

I think all you need to do is adjust the font size in #title.

#title{
 font-size: 3rem;
}

Screenshot 2022-03-24 9.39.26 AM

It’s still doubling at Very Small widths, but that can be Fixed with a media Query.

The reason it’s breaking into two lines, is because the font is too big for the space, or the padding is in too close.

1 Like
16

I’m glad that you experimented with the 3D Text, There is a lot of Cool CSS styling techniques available these days.

1 Like
17

Yes, my reply was outdated and I decided to go with your suggestion ^^

I just changed the color of the text to white.

1 Like
18

Cute background on the Final Project, Congratulations on finishing your Survey.

1 Like
19

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