The core coding languages of the internet are HTML, CSS, and Javascript, which handle structure, styling, and actions. Effective websites can be built with only HTML and CSS which are easier to learn than most programming languages.
Good Web Coding
- Makes it easy to find the part you are looking for.
- Is consistent in it’s organization and formatting.
- Has comments to indicate sections, features, and quirks.
Bad Web Coding
- Is intentionally obscure to prevent easy reuse.
- Is not consistent in form or organization.
- Is bloated with redundancy or unused elements.
Web Coding Best Practices
Code format
One of the most important conventions in code formatting is using tabs to indent elements that are contained inside of others. This makes it much easier to see the different parts of your code.
<section>
<div>
<p>some text</p>
</div>
<div>
<p>more text</p>
</div>
</section>
Semantic
All web code allows you to choose names for things like HTML blocks, CSS classes, and Javascript variables. By choosing names that fit the elements in use your code will be a lot easier to understand. Consider what it’s like to come back to code you haven’t seen for a while or sharing code with others.
<reviews>
<review>
<p class="review-text">This was ok</p>
<p class="review-stars">3/5</p>
</review>
<review>
<p class="review-text">This was great</p>
<p class="review-stars">5/5</p>
</review>
</reviews>
Comments
Adding comments is a great way to keep track of different parts of your code. This can help you label sections like the header and footer of your site or point to quirks about your code that are important to understanding how it’s working.
Comments can also be wrapped around code to temporary prevent it from working or showing.
Here’s an HTML comment being used to hide some code.
<!--
<div>Hidden Content</div>
-->
Here is a CSS comment used to label some code:
/* This div is used to wrap around my review image */
div {
width:100px;
}
Cascade
CSS mean ‘cascading style sheet.’ It’s called this because things lower in the code overwrite similar things higher in the code. For this reason it’s very important to keep track of how you organize your CSS to prevent confusion and redundancy.
The CSS below will make the div 200px wide because the first declaration is overwritten by second.
div {
width:100px;
}
div {
width:200px;
}
No capitals
It’s generally best to avoid using capitol letters in your code. The reason why is more obvious when you look at code that doesn’t follow this convention and it’s harder to understand.
In most cases you want your code to look like this:
<div class="review-text"></div>
One exception would be ‘camel case’ class names or variables.
<div class="reviewText"></div>
This is common. But it’s still best to use capitals as little as possible.
File use
When creating websites you may have many different html, css, and javascript files. It’s important to follow many of the principles above when organizing and naming them. Confusing file structure can make your code hard to navigate.
/site
about.html
contact.html
/css
forms.css
homepage.css
navigation.css
footer.html
header.html
index.html
/scripts
accordion.js
buttons.js
forms.js
style.css