Web Coding

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