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?
It might be a good idea to go back to the beginning and reset the code for each challenge and try each again. Practice will help you remember. The more you actually write out the code, it will stick with you longer. It would be the same as learning a new foreign language. If you do not practice the new language, then it will be ease to forget what everything means.
@randelldawson 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.
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 (
body), and then smaller branches (let’s say
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
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
input do usually have attributes).
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!