I’m very good at HTML5 and CSS theory. I spend hours weekly studying it and making notes, even practicing on exersizes afterwards.
When I’m coding websites all seems well at first but as the amount of code increases it gets harder for me to pinpoint problems in my code and sometimes I don’t know what to do when something isn’t working properly.
What do I need to do in order to get better at this?
Hi, @izaakx. That’s a pretty broad question…
Are you talking about just in Codecademy, or in building your own websites? If I knew that, I could possibly give you some more answers.
Some general tips I can give you would be:
Make sure your code is always aligned properly. If your code flows evenly, it will be easier to read. Also, you can break down your code lines, even temporarily, to make it easier to read.
Example for HTML:
You have:
<p>This paragraph has a <b>short <a href="#">link.</a></b></p>
While this is technically correct, it’s a little confusing because of all the tags in it. So if you’re trying to debug it, it might help to break it down like this while you’re working with it:
<p>
This paragraph has a
<b>
short
<a href="#">
link.
</a>
</b>
</p>
In that example, having the one line of text broken down over multiple lines makes it easier to see that, yes, the opening p tag has a closing p tag, the opening b tag has a closing b tag, and the a tag is written properly, with the href in the correct place.
For CSS, I would advise keeping all rules of similar types grouped together. Even for a single element, keep all margin instructions with the other margin instructions, all color instructions with the other color instructions, etc.
Suppose you have:
.special-class {
margin-top: 20px;
color: red;
font-family: Georgia;
}
Now you want to add some margin to the bottom, too. Better not go tacking it on at the bottom of the above code. While that would work just fine, it would be disorganized and make your code difficult for a human (i.e. you) to read, and even if you know everything you need to about how the code works, getting messy will only confuse you later. So you would add another line right below margin-top.
.special-class {
margin-top: 20px;
margin-bottom: 25px;
color: red;
font-family: Georgia;
}
This logical progression makes for a more readable set of rules.
•••
Always take the error in the context of the code around it. Your browser might throw you an error message saying that the problem lies in line 16. Let’s say you study line 16 of your code carefully, and it looks like there’s nothing wrong with it. Well, then why does it say the error is on line 16? Perhaps you forgot to close line 15 properly–a missing closing paragraph tag in your HTML, a missing semicolon in your CSS–something like that. Sometimes, the browser error message does not always get it quite right.
•••
You are likely already doing this, but…If you cannot pinpoint the issue quickly, read your entire code, top to bottom, slowly and patiently, thinking to yourself as you read each line, “Does this line make sense by itself? Does this line make sense with the rest of the code?” Yes, this is a boring and frustrating process, but most often rewarding in the end.
•••
Wow, that was a long answer! 
I hope it helps you some, and if you can give me more specifics–like whether you’re just needing help inside Codecademy or with building stuff on your own–I might be able to help some more (if you feel like reading another book, haha).
Phoenix
Thanks 
That was very insightful, I’ll keep it in mind, Thanks for being patient.
This would be the preferred composition. Just because there are a lot of tags doesn’t mean we need to write them as nested elements. Both the B and the A are inline elements which appear on the page in one line.
The only thing I would change would be the placement of the full stop (period) and maybe expand on the link phrase…
<p>This paragraph has a <b><a href="#">short link</a></b>.</p>
We could use the style sheet to style the link with bold typeface…
a {
font-weight: bold;
}
which would reduce the markup to,
<p>This paragraph has a <a href="#">short link</a>.</p>Great points, thanks! I guess the b tag probably wasn’t the best option for me to use as an example.
Also, I should clarify: I didn’t mean that the inline items should stay written as nested items, but that they could be displayed that way temporarily to make it easier to read and then put back the way they were. Thank you very much for pointing that out.
@izaakx, sorry for any confusion I might have caused with that vague answer.
Phoenix
Aside
How we compose is subjective with only style guide recommendations to help us write uniformly with respect to the developer community. Seasoned coders will be able to scan markup quickly, especially if it follows a meaningful outline. Excess indentation makes that process harder, rather than easier because it can break the train of thought of the reader.
Just like a paragraph may contain phrases or words that deserve special emphasis (change of voice), markup takes its emphasis from how we display nesting and structure. Giving emphasis to everything creates a fog over the whole picture. The reader should be able to identify the key sections or fragments of the document and be able to then drill into them in turn.
When our meaning is not discernable through structure then search engines have to formulate their own take on important elements in the page. User agents take their cues not from the markup style, but from the structural and semantic elements we use to distinguish the parts of the document. Indentation is for eyes only and no other value is given to it from the perspective of the user agent.
Great advice; thanks so much!
Phoenix
And what do you know?
I just looked back and realized that what I was referring to as CSS rules I should have called properties, because I forgot that the whole thing is a rule and what’s inside the curly braces is a property.
Obviously, I need to get a better understanding of technicalities before posting again. 
Think of CSS rulesets as anonymous objects (of a sort).
selector {
prop1: value1;
prop2: value2;
prop3: value3;
}
identifier => declaration_block => declarations
Recall that a ruleset is an authority.
That’s helpful! Thank you.
This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.