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
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?
thanks
Yes that is what I mean. Hereâs a sample HTML template;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" type="text/css" href="main.css">
<style>
/* although best practice is to use an external style sheet */
</style>
</head>
<body>
</body>
</html>
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 rows and 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.
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.
