latest project, i think its about finished and have tested functionality. works! only thing i did slightly different that im sure one of you might notice is the text area/ comment box. i opted for a bar instead of an open field because the user can openly resize the text area and push the page around forcing items around if they want to be funny. so i took that away LOL. however it still functions as an open comment bar, and shares the CSS qualities visually for a standardized appearance. comments? suggestions? post them here instead of the comment box in my form!
Hi @ZTD, good job. Some things you may want to revisit;
- Keep the test script when forking the pen (
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>). Your page passes 7/17 user stories.
- codepen only expects the code you’d put within the
<body> </body> tags in HTML. (No need to include the body tags). For anything you want to add to
<head> click on the ‘Settings’ button and add it into the ‘Stuff for <head>’ box.
- mentioned because while you have an opening
<html> you never close it
- Run your code through a validator (validator.w3.org is a good one if the codepen validator doesn’t work)
- Make it so users can click on the labels, don’t force them to have to click on just the radio buttons and checkboxes
- not a fan of your comment area. A good UX experience would allow the user to see all of their comment in the box. It shouldn’t scroll off.
- make it so the cursor changes to a pointer when hovering over the submit button
- make your page responsive
the doctype html you mean? don’t recall having to close that or not rather that its a statement or something like that. if that’s not what you’re referencing let me know.
the other things you mention i have had no experience with, so there is no way i could have included them at this point as i dont know they even exist. ive been coding for a matter of a few weeks now. as far as the comment box goes, as stated above, im not a fan of the traditional style box that can be moved by the user which can force items around if they resize it. what other option is there for that then?
also, that validator thing. whats the point of that and why does it give me the error " Sorry! This document cannot be checked." if i try to use it?
Yes that is what I mean. Here’s a sample HTML template;
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="main.css">
/* although best practice is to use an external style sheet */
Nothing will break in codepen by including all the opening tags in the HTML section. It’s just that codepen is set up to make reading your code easier.
Some of what I mentioned were all lessons you’ve gone through. Is there something specific you’re referring to?
I’m not sure what you mean by “moved by the user”. You can set height and width properties in CSS and/or use
columns in HTML.
The point of a validator is to ensure that you’re following agreed upon standards when coding HTML and CSS. There are others for different languages. It’s good for new users because, for example, some elements cannot be child elements of others so it will point it out for you. It will point out other issues also. Experienced users use validators.
I don’t know what you did to get the error but if you go to the link I sent, click on the ‘validate by direct input’ tab and then paste your html code in and click on the ‘check’ button it gives you feedback and for any issues it sees will provide references.
As an aside, I noticed the
<html> element is closed now but the opening body element has been removed but the closing one is still there.
Good questions. Keep coding and have fun.
gotcha, yes i managed to hide the HTML closer in there while moving stuff at some point LOL. moved to bottom, body opener didnt change though, its on line 7 still, closed on 74.
the part i dont remember doing at all is making a label click, and a cursor change. its easy to get lost in all those lessons though. i think i have retained more by these projects rather than just pounding out tutorials. however, given that, im going to hit the Google right now and work on those parts. stand by for update
also for the “moved by the user part”, what i mean is in the standard text box (which ill change over to again) in the bottom right of it is a little 3 lined tab portion that the user can grab and drag the box around. thinking about it now ill try to impart a “max width& height” to see if i can limit that. does that make sense?
and maybe its the validate by input tab that i was off on. ill work on these fixes and try that again. they may or may not be done within the day though as i only have a short time to code each day as i work 2 jobs. gotta squeeeeze it in!
at any rate, thank you very much for the assistance! will update soon!
(2 hours later) i think i just about got it all less the responsiveness. i can see now how the validator is vastly more in depth in picking out the junk. however, after making some actually very quick corrections, HTML and CSS both passed (minus one effor in the CSS, which if i change it them the format goes wild, but it doesnt seem to be a real issue, its a colon on the shadow CSS, idk).
so lastly i have the media queries to figure out. i went through and changed all the PX measures etc to % and Rem so they can scale based on the HTML size. butttttt the actual query part is a pain in the ass, none of that is even remotely working, and there seems to be a broad way of setting that up as every page i look at has it differently. so that is a battle for tomorrow.