Javascript: Form Basics needs to be shortened

[Orishek]

Checks

• [X] This is not a duplicate of an existing issue (please have a look through our open issues list to make sure)
• [X] I have thoroughly read and understand The Odin Project Contributing Guide
• [ ] Would you like to work on this issue?

Describe your suggestion

As title says, Form Basics lesson in Javascript Path needs to be reworked. Currently it's assignments refers to articles which explain things in way too much detail, which is completely unnecessary at the level of course. Some things are even explained 4 times (1st in the perfect explanation in lesson itself, 2 times by extremely lengthy articles by MDN and 4th time by lengthy HTML Forms article. Forms are important, but flooding brain with (at the level of course) useless informations is not way to go.

Path

Node / JS

Lesson Url

https://www.theodinproject.com/lessons/node-path-intermediate-html-and-css-form-basics

(Optional) Discord Name

No response

(Optional) Additional Comments

No response

[Churtified]

Forms have a lot of components and moving parts that probably should be covered fully. I don't think it's particularly that complicating, just a lot to cover. The page does seem long however. Do you think it needs to be shortened or broken down into another section?

[JoshDevHub]

Hello @Churtified thank you for making this issue.

You might be correct that the lesson content and assigned documentation reading may be too much at this stage. But also, I can guarantee that this content is extremely important -- I work with forms all the time professionally.

Do you have any ideas about how the length might be fixed? Maybe breaking it up into different lessons to give some sense of progress? Maybe having a project or exercises or something to work with? I'm interested in hearing any ideas you might have around how to make the content easier to work through.

[Churtified]

Hey @JoshDevHub, I didn't create the issue just commented. However I do agree that everything covered is compulsory learning. Considering the volume of components, I would think we could perhaps split into another section, given we have only 2 sections on forms and then straight into a project. I think an exercise based section in there directly after this section could work. At the moment, it just feels very information dense. @Orishek any ideas?

[JoshDevHub]

:laughing: Thank you for correcting my mistake. The similar github user avatars confused me.

But yeah, still interested in what you think as well as what @Orishek thinks

[Orishek]

Hi, sorry for late reply. I would agree with @Churtified - splitting into other section would help a lot (ideally followed by small exercise). My personal opinion is that the most important thing is to split 2 lengthy MDNs articles into different lessons, because reading both after each other makes just mess.

[github-actions[bot]]

This issue is stale because it has had no activity for the last 30 days.

[thereisnodeveloper]

@JoshDevHub @Orishek @Churtified

I suggest breaking up the Forms section via Method1 or Method2. Note that each numbered bullet under a method doesn't have to be a single page lesson page.

<Method 1: more involved but easier to absorb, might be a longer term solution>

PURPOSE: break sections into smaller chunks, fast learn-apply iterative cycle

1. Basic form structure (suggest using the minimum number of form controls, i.e. text, email, password, plus a form submission button to simplify things)

• Objective is to learn: a) form structure, b) how labels work, c) how form submission works (use form button, explain "name", "action"

• mdn doc demonstrates this idea of going over just the basics

• MOVE dropdown, radio, checkbox to #6

• MOVE fieldset and legend to #6

• This way, reader doesn't have to worry about the other more advanced form controls - RADIO/SELECTION etc. And focus on how forms work as a whole. Also prevents introducing more changes to the basic form structure, such as having to use

2. Form styling

• Give just enough, emphasize styling the easier elements (as opposed to radio, dropdown, etc)
• Let reader skim: this is a section the reader would want to go back to, in order to get guidance on how to style individual elements THEY are interested in using.

3. Project: Sign-Up Form (NO VALIDATION)

• Immediately put to use knowledge of form structure + styling
• Other form controls such as RADIO/SELECTION are all important, but does not get used right away in "Sign-Up Form" project. It's easy to fall into the trap of trying to absorb all the other form controls, only to not use them and forget about them.

4. Validation + pseudo elements (including non-validation ones like ::focus)

• non-JS validation
• This is when we introduce 'required' and the related pseudo elements, which makes it a perfect opportunity to introduce other non-essential pseudo elements

5. Go back to Project: Sign-Up Form (ADD VALIDATION)

• Put validation knowledge to use immediately

6. Introduce "advanced" input elements + advanced styling

• radio, checkkbox, textarea, dropdown
• Also introduce fieldset and legend. These structuring elements were not necessary until now.
• Introduce fancier ones like range

7. (Optional): Go back to Project: Sign-up Form

• Add "advanced" input elements
• Style them
• Also validate them

</Method 1>

<Method 2: simpler>

1. Form structure
2. Styling
3. Validation
4. Sign-up Form
5. Advanced form controls (radio, checkbox, textarea, dropdown)
6. (Optional) Sign-up Form: Add advanced form controls