Talking about my learning to code, and completing the HTML Forms unit of the Intermediate HTML & CSS module of the AppAcademy Open curriculum.

One of my barriers as a developer is iterating between different learning routes, without finishing, and heading back to the beginning. With the exception of the python based software engineering bootcamp that I completed with HyperionDev a year ago, I’ve really failed to kick on and build on that.

Should I follow FreeCodeCamp, The Odin Project, or AppAcademy?

FreeCodeCamp orientates heavily towards learning by doing. The Odin Project is incredibly theoretical in approach with vast amounts of material to read.

I find that I don’t take in what I learn at FreeCodeCamp, iterating back to relearn the same material over and again. I don’t take in everything that I read at the Odin Project either, by the time that I come to use it.

For me AppAcademy’s approach is somewhere between the too, more reading and instruction and underlying theory than FreeCodeCamp, but with a much faster cadence than the Odin Project. Its probably the best of the three for my learning style.

So AppAcademy it is, and to keep myself accountable I’m going to blog about the key assignments here as I complete them. I’ll also be recording my progress in a habit tracker I have created in my Obsidian vault. Obsidian is probably a topic of its won for another time.

I’m not going back to the beginning though, I don’t have anything to learn by going back over basic html/css and javascript that I already know pretty well. So I’m carrying on from where I left off a wee while back. So today I worked on the HTML Forms unit. HTML forms are not particularly difficult, but have always been anathema to me.

The content of the form is contained inside a form element, with an inner fieldset element. The form element needs action and method properties. The method, usually “post” dictates how the information collected is transferred, and the action provides the location on the server it is transferred through. If a legend element is added inside the fieldset element, the form will be boxed with the content of the legend element as title.

Each of the components of the form are wrapped inside their own div blocks, each containing a label, and input(s). As a general principle the label needs a “for” property, which must match the “id” property of the input(s) to which it relates.

Input elements need a type to be defined - in this example they include text/email/date/checkbox/radio, which tweaks the user inputs and data validation to reflect the expected data input. Where multiple radio inputs have the same name property as one another, they will work together on a single selection only basis.

Textarea and Select are different - they have their own elements and are not input types. The Select element must have the same id as the for value of its label, with option elements nested below for the choices, which will appear in a drop down list in the form.

Here’s a Replit embed providing a demonstration of all of the input fields described above, and to the specification requested by AppAcademy for submission.