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

1

INFO

Here’s the January 2018 fCC cohort information and schedule.

This topic is for members of the January 2018 fCC cohort to share information, review, and give feedback for the beta curriculum survey form project. Click on the cohort link if you’d like to join.

Reply below with your questions, comments, and additional resources regarding the Survey Form Project.

DEADLINE: 2018-02-18 23:59 PST

2018-02-19 04:59 UTC

RESOURCES

MEMBERS

  • Please plan to complete your project before the deadline so there is plenty of time for others to submit a review.

  • When you’re ready to submit your project for review, create a new topic for your project and add it to the list below.

    new-topic
    new-topic1126×129 6.67 KB

  • :star: Please REVIEW AT LEAST 2 PROJECTS using the checklist below. :star:

  • Bookmark this topic and make sure you’re “watching” the topic so you can participate in the discussion.

    watching

CHECKLIST FOR REVIEWING PROJECTS

(Source: Codecademy)

  1. Does this project adhere to best coding practices? Is it well formatted and tidy?

  2. Is the HTML structure convoluted and unnecessarily nested? Are container elements used in a way that enhance overall page structure? In other words, does the student effectively use container elements to create a coherent structure without venturing into divitis territory?

  3. Does the stylesheet make good use of the cascade and classes to avoid redundancy in the CSS?

  4. Can the CSS or HTML be simplified?

  5. Are selectors too long (say greater than three elements) and does the student try to keep CSS specificity low?

  6. Are the relative paths correct?

  7. Are semantic tags being used correctly? Are deprecated tags being used?

  8. Are concise but descriptive alt attributes being used?

  9. Are semantic class names being used?

PROJECTS

Note: You can edit this post, like a wiki, to help keep things organized and add resources and other information you want to share with others.

4 Likes
2

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

3

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

4

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

5

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

6

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

^^

7

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

3 Likes
8

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
9

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

10

@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
11

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
12

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

1 Like
13

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!!!

14

@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:

screenshot-wiki-edit
screenshot-wiki-edit791×119 4.91 KB

1 Like
15

awesome thanks!!!

16
17

@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
18

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

19

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
21

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