The core coding languages of the internet are HTML, CSS, and JavaScript, which handle structure, styling, and behavior. 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 its organization and formatting.
  • Has comments to indicate sections, features, and quirks.

Bad Web Coding

  • Uses unclear names or organization that make it hard to follow.
  • 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 consistent indentation for elements contained inside 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>

Clear Names

Web code lets you choose names for HTML elements, CSS classes, and JavaScript variables. Names that describe what something is or does make your code much easier to understand, especially when you return to it later or share it with someone else.

<section class="reviews">
	<div class="review">
		<p class="review-text">This was ok</p>
		<p class="review-stars">3/5</p>
	</div>
	<div class="review">
		<p class="review-text">This was great</p>
		<p class="review-stars">5/5</p>
	</div>
</section>

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 that are important to understanding how the code works.

Comments can also be wrapped around code to temporarily 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 class styles the review image */

.review-image {
	width: 100px;
}

Cascade

CSS means Cascading Style Sheets. When two rules target the same element in the same way, the rule lower in the code wins. This makes it important to organize your CSS so you do not create confusing or repeated rules.

The CSS below will make the div 200px wide because the second rule overrides the first. The Cascade lesson explains this in more detail.

div {
	width: 100px;
}

div {
	width: 200px;
}

Consistent Naming

HTML tags and most file names are usually lowercase. CSS class names often use hyphens, while JavaScript variables commonly use camel case. The important thing is to pick a clear style and use it consistently.

<div class="review-text"></div>

Camel case joins words and capitalizes each new word after the first.

let reviewText = "This was great";

File Use

When creating websites you may have many different HTML, CSS, JavaScript, and image files. It’s important to follow the same principles when organizing and naming them. A confusing file structure can make your code hard to navigate.

/site
	about.html
	contact.html
	index.html
	style.css
	/css
		forms.css
		navigation.css
	/images
		logo.png
	/scripts
		buttons.js
		forms.js

AI Tutor