Build a Survey Form Project Questions, Discussions, and Resources (January 2018 Cohort)

@camper, @mohamedeliwa, @Fixy250185, @firuzshoev, @mberkland, @Wahe3bru, @TammyKnox, @slamoureux, @zaynaib, @angelinalblyth, @facundocorradini, @debu2code, @sasikumar07, @johnhannahdev, @nasef123

@ConnectExtend, @callumshaw, @PerkyPrince, @catherinewoodward, @Gildara, @dmac0505, @corneerasmus, @LawGaming, @lbeth, @DGC75, @Vanic6, @asmarino, @HaiCia, @arhillis, @pavankrcr

@stufinn, @5Lions, @Jinxlaw, @yoizfefisch, @weindor, @shivendraDave, @deedee, @TiwaunP, @npalopoli, @kindaintellectual, @nicandromts, @MMahendra001, @basantos, @bobbyc, @bdfoz

@zeinab88, @aimeejulia, @Krate2016, @Codewife101, @ahmedosman, @codenoob, @fancyaction, @Alemrv, @swestphal, @gilvarry, @Miyazakid, @silentgamelan, @priscilla-littlecat

https://codepen.io/jinxlaw/full/dJjQod/

^^

For handy access, I also pasted the CDN link at the top of each page.

3 Likes

Missed on submitting and reviewing stuff yesterday because of the forum being down when I had time. Hopefully i get to review a few for this one if grad school allows!

1 Like

Same happened to me. It was a 500 error code most of the day.
Good luck with your grad classes!
– Janice

@gilvarry The forum was down because a server ran out of space. One can choose to follow the deadlines or not follow them. They’re not mandatory. Also, one can submit one’s project for review and review other projects at any time, before or after the deadlines. :smile:

1 Like

Added my survey to the list. Very basic and I still need to work on making it look better but if anyone has any suggestions for me then please let me know.

1 Like

this is mine form I have tried to keep it as similar as possible to example :slight_smile:

1 Like

I just finished the beta of my survey form, but when I edited the post to add my link I accidentally deleted the last link posted. I can’t remember whose page it was, sorry!!!

@slamoureux I added it back to the post. In the future, you can see the revision history of the first post by clicking the top right of the post where it has a number and an edit icon:

1 Like

awesome thanks!!!

@gilvarry
Your survey form is failing one objective if you check it with the test suite. I would also recommend looking at other’s forms to get idea’s for a better visual layout and color scheme.

1 Like

I added my project to the list in the first post.

Now that I’m a little behind, I finally finished this project. I’ll make some minor tweaks here and there but it felt like putting band-aids on when I was creating the mobile versions after doing the desktop layout.

Check out my Star Wars themed survey here:
https://slamoureux.github.io/survey-form/

2 Likes

Survey Form - finally!

Some features of the project:

  • All native CSS, with media queries – no Bootstrap
  • Responsive & mobile-first design
  • No inline styles
  • No ID selectors for styling
  • Uses semantic HTML5
  • Uses Normalize
  • Accessibility supports
  • Passes color contrast test: 7.10:1
  • Hosted on CodePen
  • Uses Google Fonts: Barlow Semi Condensed
  • Linear gradients on page background and button
  • Link to animate.css CDN: bounceInLeft

Things I’m not satisfied with:

  • I was unable to figure out how to make the checkbox section required. Currently, a survey-taker can submit the form without answering Which Meals on the Move have you tried?
  • I don’t like the look of the dropdown (Which store do you shop at?) Any suggestions?
  • I believe it’s acceptable for the logo to be ignored by screen readers. However, I don’t seem to be doing it correctly. The deque aXe accessibility checker doesn’t seem to like what I have currently.
  • Truth be told, I understood very little of the results from the aXe accessibility checker. Any suggestions?

Notes:

  • After reviewing and implementing all of your wonderful feedback and suggestions, I will refactor the CSS so that it is DRYer. :slightly_smiling_face:
  • I feel that I’ve made noticeable growth since the Tribute Page project. Thank you to everyone in the cohort who has offered feedback, suggestions, and resources! :heart_decoration:

Question:

  • Does it make sense to put a minimum width on the contents? I’m thinking of what happens when the screen is dragged to a tighter and tighter width and the contents get super narrow. Mostly I’m thinking aloud here, hopefully this line of thought makes a wee bit of sense.

link to Survey Form - Meals on the Move

All feedback and comments welcome. Thanks!

– Janice

3 Likes

Please review my survey form for the beta curriculum’s Survey Form Project. It passes the FCC beta tests, no inline styling used, no ID selectors in CSS, no validation errors in HTML and CSS. I am still working on centering all HTML form elements using CSS. Thank you in advance for all your feedback!

Here is the codepen link: