This is my first project and I’ve spent the last couple of days getting it to a place that I’m happy with. This page is actually my redesign of a Google Form that is actually live on the school’s website that I would like to replace so if you see any flaws, please let me know.
The page contains a variety of elements (check boxs, radios, grouped dropdown, etc). It also has a few hidden sections that are revealed with a click (like choosing “Volunteer” in the first section). I’ve also used some media queries to reposition the page in 3 different ways.
There are some things I’m not happy with and am open to suggestions, if you have any about:
I would like this page to be able to translate into Spanish. I’ve accomplished this by adding tooltips with the translations. I’ve used websites with translation buttons, which wanted to implement, but I was unable to get it to work.
I hate that the background picture isn’t crisp. I’m guessing this is just because of the picture I chose. If anyone knows of any good websites (I used 500px) where I can find better pictures that won’t be distorted please let me know.
For some reason the table floats outside of the form border on an iPhone 11. It works fine on every other phone that I’ve tested and I’m not sure how to fix it. NOTE: When I use Chrome’s Dev Tool to view that page with the same viewport of an iPhone I don’t see the problem. Only when viewing it on the actual device.
It looks nice for a first project. The layout is good; even spacing of elements, nice use of a table for “Language proficiency”, etc,…
Personally, I’d make the ‘submit’ button a bit smaller, but it’s largely a style choice.
If you’re looking to use only CSS and HTML without incorporating JavaScript on your own at this point, you could add something like this to your project easily enough to help with pop-up displays of translations.
Form looks good @JohnJohn. Some things to revisit;
If this is for FCC’s certification, keep the test script when forking the pen (<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>).
The test script should be included, with all tests passing, when you submit your projects.
Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in HTML. (No need to include the body tags). For anything you want to add to <head> click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
There are some warnings about adding h2 - h6 elements for semantics and you can ignore those. There is another about a type you’re using that’s not supported on all browsers so you should be aware of it.
Don’t use <br> to force line breaks or spacing. Use CSS
I don’t normally comment on someone’s style because it’s what they chose so you can ignore this if you want. I wouldn’t have chosen a table for the language proficiency. I would’ve grouped some dropdowns together and have the user answer the questions that way.