Here's my fun survey page--Any thoughts?

Code Feedback
1
2

Hey,
The code looks good to my in experienced eye. You completed all the tests, so that’s good.

The only thing that I can suggest is adjusting the input boxes and text-area to have rounded corners to match the rest of the borders on the page.

1 Like
3

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

  • Run your HTML code through the W3C validator.
    • There are HTML coding errors you should be aware of and address.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
  • Codepen provides validators for HTML, CSS and JS. Click on the down arrow in the upper right of each section and then click on the respective ‘Analyze’ link.
    • The one for CSS is good. Use it, there’s something to clean up.
    • (The one for HTML misses things which is why I recommend W3C)
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
  • Change the cursor to a pointer when hovering over the submit button.
  • Make the project from scratch, with your own code, style and content. Don’t take the code from the sample project.
1 Like
4

Roma,

I appreciate your input. And yes, I admit in the end I used some of the samples code. That was, however, after many attempts that did not function. Also true that I do not fully understand those things I copied.

Any suggestions for organizing my time flow around those sorts of issues? For instance would you recommended that I invest the time in comprehending each piece of code at this point? Or keep the bigger picture of the projects overall functionality, and trust that I can comprehend the particulars as the course work unfolds? Or some other view point?

Lastly, in fav online resources for html and css coding questions?

Still working on orientation. :slight_smile:

Thanks again,
Seven

5

Hey again @SevenRoot!

I would say yes. There are a lot of great resources on html and css that can answer any question you might have. Google and stack overflow should become your best friend. I just resolved an issue with Git earlier because of a solution I found on stack overflow. You could also reach out to the forum if you get stuck.

It can be tempting to copy code that you don’t understand but it won’t benefit you in the long run because when the problem arises again you will be in the same position as before.

Here are some great resources that you could look into for html and css.

Hope that helps!

Happy coding!

1 Like
6

Oh my goodness! I have learned a lot in the last five days!

So I reworked the whole page, making the layout and design generally more pleasing (I hope), and did a deep dive into the matters discussed above, plus a whole bunch more. :slight_smile:

I did use, and credit in comments, the lesson on pure css solutions for checkboxes and radio buttons. I did not, however, just copy and paste. Instead, I address each point I did not understand, followed by research, reading, testing examples and studying tutorials. (There must be fifty tabs open on my browser! :laughing:)

    Things I learned, or at least gained a working understanding:
  • Accessibility-I did a scan at A-Tester that scored this sight at 76%. It did not show particulars, so I also uploaded to A11Y Compliance Platform. I am awaiting their report.
  • Some of the differences and uses of sizing selectors like rem, em, vh, percentage, etc.
  • Grids, flex boxes, and their relationship to each other.
  • The pitfalls and successes of styling radio buttons and checkboxes.
  • A tutorial on xml, xmlns, and their relationship to svg.
  • Stylings for background images.
  • Transition and transform.
  • So many more important html tags and css selectors!
    So, here is where I still need help:
  1. I checked the html in the WC3 validator. If I pasted just the code, it passes with no errors or warnings. If I paste the url, it comes up with a handful of errors and warnings whose number lines do not line up with my document. Suggestions?
  2. Usability across various devices: The page reads well down to about 800 px wide. Then things start to get too small, hang over boundary boxes, and generally jumble a bit. Any suggestions to adjust? I am looking at media queries, and thinking they would require basically redesigning half the page--right? Are there other options?

Thanks again for setting me off in a good direction!

Warmly,
SevenRooT

7

Beautiful design and layout of the page, but a little note is that the test is not passed yet, because the button inputs still need a value attribute.

For example:

<input type="radio" value="foo">
1 Like