I started learning FCC in my spare time at night. While initially it felt like I was learning something, I’m not sure if I’m remembering much. There are so many rules on where a <>, =, ", /, ., -, go that it just feels random. I’m getting that a <> and </> are used to begin and end different lines of code, but then you add in words like “form,” “input text,” and whole bunch of other catch-phrase words and it feels a bit overwhelming. Did any of you feel the same when starting from pretty much total scratch as a newbie? Did you feel like you’d never make it through even the beginning HTLM/CSS tutorial?
@camperextraordinaire is right that repetition is the only thing that will make it stick. You may also have some misunderstandings that are causing you problems.
I noticed this in particular which isn’t entirely accurate. If you’re talking about HTML, <> is going to be your opening tag and </> will be your closing tag. They usually wrap some other content (text or another tag) in your HTML. Whatever is between the two will be contained within that tag’s element on your page. A “line” of code refers to a literal line in your code (so, the space between two newlines). A single line can have multiple tags like this:
<p>This text will be <em>inside</em> the paragraph element.</p>
On the other side of this, a single tag can be spread across multiple lines like this:
<nav> <!-- Navigation opens on this line -->
<ul>
<li>Nav item 1</li>
<li>Nav item 2</li>
<li>Nav item 3</li>
<li>Nav item 4</li>
</ul>
</nav> <!-- Navigation tag closes on this line -->
I’d say your problem is two-fold: You’re probably misunderstanding why some things are the way they are combined with the fact you haven’t repeated the concepts you’ve learned quite enough for them to really stick.
Both these will come with time. Keep practicing and keep asking questions here. The practice will take care of the repetition and the answers to your questions will help you correct any bad mental models you have.
Thanks so much for the clarification on the use of opening and closing tags, and for the encouragement.
I would recommend https://developer.mozilla.org/en-US/docs/Learn for a good secondary source of free information. If you decide that you’re willing to spend a little to help speed up your progress I would recommend taking a look at this.
Thanks, the first link you suggested seems a bit complex. I started reading the Eloquent JavaScript book referenced in the Medium article you attached. Maybe I’ll see whether reading about the language first will help me move through the FCC lessons more quickly.
Also look into the Udemy courses. Todd McLeod’s HTML & CSS course is very good & so is the two vanilla JavaScript courses. They go into good depth and explain many questions you may have.
HTML, fundamentally, is a tree structure. That doesn’t mean it physically looks like a tree in terms of page layout or anything; it just means that logically it’s organized like a tree. Trees have trunks (the html element), big branches (head, body), and then smaller branches (let’s say style and meta elements that branch off from head, and then an h1, a couple of paragraphs, and a couple of divs that branch off from body). Each of those branches probably also has some smaller branches still (some spans, a links, or child divs, perhaps), all the way down to the smallest twigs.
Now, admittedly HTML is somewhat lenient in what it allows in terms of structure, but fundamentally (assuming we’re talking about nicely-formed HTML that sticks to best practices), each twig should be attached to one and only one branch (but branches can have many twigs), each large branch attaches only to the trunk, etc. To ensure this, you need to close off each twig before starting the next twig and before the end of its branch, close off each branch before the end of its parent branch, and so on. That’s what </closing tags> are for.
So you’d get something like this:
<trunk>
<bigbranch>
<smallbranch>
<twig></twig>
<twig></twig>
<twig></twig>
</smallbranch>
<smallbranch>
<twig></twig>
</smallbranch>
</bigbranch>
</trunk>
In fact, the above could very well be a valid XML document (and well-formed HTML is very similar to a form of XML).
Each element can also have attributes. If we’re sticking with our tree analogy, I guess they could be the health status of each twig and the number of leaves it bears.
<twig health="good" leaves="3">
Hi, I'm a twig, and for some reason I also have text content!<br>
(This analogy is imperfect.)
</twig>
The attributes are what the equals signs and quotation marks are for.
Note that a few elements, such as that br, don’t need closing tags, because they’re self-contained (can’t contain text content or other elements, though self-closing elements such as img and input do usually have attributes).
I’d recommend waiting to get started on front-end JavaScript until after you understand the fundamental treeishness of HTML (and ideally learn a little bit about the DOM, which is the mythical tree-spirit that is born when your browser transforms your HTML into visible content on the page).
I’d also recommend learning a little CSS first, though you don’t really have to concentrate on that at this stage, unless your end goal is to heavily focus on visual design. Just learn enough to change your text size, font face, background and foreground colors, that kind of thing. Then you can get stuck in to the real fun parts.
That’s an amazing analogy. The tree/branch/twig analogy really helps. I have to read your post a few time to ensure I understand it all. Really appreciate your input!