Form Survey - Welcome to Hogwarts!

Project Feedback
#1

Spent considerable amount of time making this and learned good stuff. I would appreciate your comments and suggestions.

Note that I tried to only use the Float layout and not the Flexbox or Grid layouts.
I’m using chrome browser and I guess that there’ll be some problems on other browsers.

2 Likes
#2

Wow @Pejman! This is so cool. The font and the background matches the topic very well. Is that logo real???
Yet, you can improve a few things:

  • Change the background color of the submit button in the form. It does’nt match the background image. Try dark blue.
  • Do not use @import rules in CSS to import google fonts. Using @import will reduce the load time of your page drastically. Instead, do the following:
    • Remove the @import rules.
    • Go to google fonts and pick your fonts. Now click on “Embed” at the right menu.
    • You will now see a code. Copy it.
    • Now go to CodePen and click on the settings icon at the top of the HTML box.
    • Now paste the code you copied in the "Stuff for <head>".

Anyway, your form has high quality and looks so “witchery” :smile:

1 Like
#3

Your form looks good @Pejman. Some things to revisit;

  • There’s a typo on line 60 so the for attribute doesn’t match the id.
  • Make the page responsive. There’s a horizontal scrollbar on smaller screens. Remember, the R in RWD stands for Responsive.
    • In your body declaration this line (min-width: 650px;) causes the scrollbar. For responsiveness it’s better to use a percentage on widths rather than hard-coding pixel values.
#4

Thank you so much @paulsonstech ;). I just googled the logo , but there are other variations.

  • You’re absolutely right. Changed the button to a dark slate blue and it’s much better now.
  • removed the import rules and now it's faster :).

    Thank you again. I kind of like it myself. :wink:

    • 1 Like
    #5

    Hi! I just wanted to say that your survey form looks pretty amazing. I don’t really like using float layout that much (just in small parts, but i’m more interested in flex and grid) but your page is impressive!

    1 Like
    #6

    Hi @ortegalaura180999. Your comment is really encouraging :).
    I intentionally limited myself to float layout so I can learn how it works. The other layouts are more robust, it seems. I’ll probably use them in next projects.