Survey Form - it's pizza time!

Hello,

This is my submission for the Responsive Web Design project 2 - Build a Survey Form.

I decided to build a pizza ordering form, because who doesn’t like pizza? :slight_smile: Sadly, it doesn’t actually result in pizza coming to your house.

Here is the CodeSandBox url. For those who are interested, the GitHub repo is here, and the page is served by GitHub Pages here.

Thanks!

Rich

3 Likes

Hi Rich!

Your form looks great! Really clean code, I love it :clap:

Thanks @sitek94 - I appreciate the feedback. :grinning:

Hey there @richard.a.cairns !

So, I have several questions about your form.
First, it looks great, and your HTML is clean, clever work! :grinning_face_with_smiling_eyes:

However, when I went to check your CSS, I only found one line of code to detail the background. Your submit button is blue so I know there is more to the CSS than just the background color. I also saw the Jekyll theme being applied so I want to ask how much of a role does the theme play and what does the page look like without it?

It’s especially important because the whole point of the project is to build your own page with your own HTML and CSS and using a theme can rob you of important learning that you can only achieve through building projects.

Now to give you some feedback on your styling I like it but I recommend adding a border around the survey form and centering the objects. it just makes it look better in my opinion LOL.

Best,
Cy499_Studios

@Cy499_Studios That’s Bootstrap, for example take this h1:

<h1 id="title" class="p-3 text-center">It's pizza time!</h1>

The classes apply the predefined Bootstrap stylings. p-3 gives a medium padding in all directions, and text-center is probably obvious. With Bootstrap, you can basically make all the styling through classes in the HTML, and one of the advantages is that you have full browser support for each style. A downside is that sometimes it’s hard to override styles with your own custom styles.

So I am very disappointed that I’m not getting my pizza, you tease :slight_smile:

But I am very pleased to see that you have customized the keyboard focus indicator and I can actually see it on every element that receives focus. Thank you.

Very responsive to both changes in text size and view port width.

Semantics look good and you even used the fieldset/legend combo for the radio/check box groupings.

Overall this is a great job, but that doesn’t mean I don’t have a few things to point out :slight_smile:

  • A few of your inputs are missing labels (both selects and the textarea).
  • The light gray fine print under some of your inputs is not quite dark enough to be accessible on that background. You can check your contrast ratios using WebAIM’s Contrast Checker.
  • I usually don’t comment on styling (because I’m not very artistic) but I will say that I think the inputs stretch out a little too long for wider view ports. I would put a max-width on them.

@jsdisco

LOL thanks for explaining!

I have never used a framework or any library other than basic Html and CSS so I appreciate the explanation.

Best,
Cy499_Studios

1 Like

Hi @Cy499_Studios. Sorry it’s taken me a while to respond to your question - it’s been a busy weekend and I’m just catching up.

As @jsdisco has said, what’s going on is that I’m using the Bootstrap framework. The way it works is that there’s a link to the Bootstrap CDN in the of the HTML page. You’ll notice that a lot of the HTML elements have class definitions - they correspond to the predefined classes in Bootstrap. To be honest, I’m not one of life’s designers, and I struggle with the visual elements of web-design - how big should this element be? Which font looks better? How much margin should I have? These are aesthetic questions rather than technical ones, and I’m not enough of a visual thinker to be able to answer them. Using a framework like Bootstrap means that someone else has answered those questions and I can concentrate on the content of the site.

I did check that Bootstrap is allowed in the challenges before going that route. :grinning:

Regarding the Jekyll theme - good spot. The answer is that it’s having zero effect on the page you see either in CodeSandBox or in the page hosted on GitHub Pages. The only reason it’s there is that GitHub Pages won’t (as far as I can see) let you publish a page until you’ve selected a theme. The theme is ignored in HTML / CSS sites - it’s used for when you publish a site based on MarkDown files which isn’t the case here.

Hi @bbsmooth, thanks for your feedback.

Sorry about that, but you probably don’t want one cooked by me! :grinning:

I’m… happy to take the positive feedback for that, but I’m not sure I can claim the credit - I think that’s a Bootstrap thing. However, I did run the page through the Koa11y accessibility checker before posting. And I’ve taken onboard from you the importance of keyboard focus indication - something to think about in future work. :grinning:

Hmm, that’s interesting. I did run the page through the W3C HTML Validator. In fact, I did it again right now, and it passed:

That’s checking the GitHub Pages version of the form - maybe something got lost in the move over to CodeSandBox? I’ll have another looks, thanks for pointing it out.

Point taken. The colour settings for that text is set by Bootstrap, but I manually overrode Bootstrap to set the bg colour. I’m guessing that if I’d left the background as the default the contrast would be better. My bad - I’ll look at that. I’m wondering whether Koa11y picked up on that and I missed it.

I think you’re right.

The HTML validator won’t flag something like a missing label on an input. I usually run an in-browser accessibility checker on my pages. They won’t catch everything, but they will catch basic issues like this. Axe is probably one of the best out there. WAVE is another good one. Chrome has Lighthouse built into it. No harm running a few of them against the same page.

Anyhoo, I just checked again using the github pages link and indeed both selects and the textarea are missing labels.

1 Like

Thanks @bbsmooth , really appreciate you taking the time.