Portfolio: Build a Survey Form

Instructions on how to Build a Survey Form is currently in progress. I would like to know if I need to follow all the user stories given in the portfolio instructions on FCC? I also would like to know if there is something I could improve on. I am having difficulty to find where the test suites are and how to get that up and running, so if someone can explain that to me - would be helpful!

Your code so far

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36.

Link to the challenge:

1 Like

I like the light colour scheme you selected, very good.

For desktop, it looks good. I think if you could work more on styling some solid shaped elements like textfield could be great, but that’s not critical.

but about your mobile, check how does it look:


Oh! Yes I believe you admit the layout is broken for mobile too.

I suggest you keep the current design and pink colour.

I’m not sure if the font you choose comes with correct and good glyph advances, but it seems some chars like (lower y) has some notable negative through from baseline. I suggest bring some more line-height to cover that small issue.

Same try to override the text field fonts too, let them inherit the font you applied too.

For now I would like to ask you fix the layout.

One best practice is doing the layout first, let each container(like div tag) has one different background colour. Do not add any page content. Instead make sure layout is functional at first step. Then add contents one by one. And each time you add one element, check the layout again to make sure the added element own’t make layout broken.

I suggest you have read on this survey form challenge walkthrough article comes with some notes, code samples and tips could help you.

No rush, be patient. Start a great clean responsive layout for now. Once it’s great add page contents and inform us to recheck. We will go for more in detail review indeed.

Keep goin on greta work, happy programming.

1 Like

Well I look at your work and it looks good but not great.
I have some few suggestions for you as you improve the design.

  • Don’t use the asterisk symbol to set your design because it slow it down, I would preferred you use HTML tag to set your design.
  • You should have set the initial scale to 1.0 instead of 3 and the max-width of the body to 100% instead of 60em.
  • The class .container you set to flex but you aren’t using the correct flex properties.
  • The font-size should have been set to 2.5em instead of 4em.
    I like and admire your courage to do something meaningful using css that’s why i recommend you to study css grid and the good thing is fcc YouTube channels have it in the easy steps.
    Click here!

You can explain better here what you’d like to see on that.

1 Like

Hey! That ra9 name is from detroit become human game :D?

1 Like