HTML5 logo on a blue background

Getting started with web development

Updated | 3 min read

Getting started with web development can be tricky and hard to get used to if you don't know where to start. When learning about web development there are some very useful tools and software that will give you a kick in the right direction.

Useful websites for tutorials

  • W3Schools - For tutorials on HTML, CSS, JavaScript and many more.
  • CSS-Tricks - For community based tutorials and how-to's

Basic HTML5 starter template

This is a template for a basic HTML document. It has a link for a style sheet, favicon, and the theme color meta tag for mobile Chrome users. (If you are using VScode you can type ! with emmet and you will get this or a template like this)

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<meta name="theme-color" content="#fff" />
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<link rel="icon" sizes="192x192" href="favicon.png" />
		<link rel="stylesheet" href="styles.css" />
	</head>
	<body></body>
</html>

The basics of using Cascading Style Sheets

CSS stands for Cascading Style Sheets. CSS can be added to the HTML document in 3 different ways. There are inline styles which are added directly to the element for example:

<a href="/contact" style="color:red">Contact Me</a>

There is also external CSS which is the most common and usually the best way to import CSS. The reason this is usually the best way is that it is not part of the original document, so if you have a compiler like Webpack these external CSS files can be minified. This also makes these files easier to cache for browsers.

A CSS file will look something like this:

html,
body {
	scroll-behavior: smooth;
}

body {
	line-height: 1;
}

.contact-link {
	color: red;
}

The final way to add internal CSS which is added with the <style> tag in your HTML. For this method, you can write your style just like you would with external styles just in the HTML document. Below is an example of internal styles.

<style>
	.contact-link {
		color: red;
	}
</style>
<a class="contact-link" href="/contact">Contact Me</a>

The basics of using JavaScript

JavaScript can be used for many things on the web from animations to running an entire website from it. There are two main ways to import JavaScript into your HTML document.

There are external importing from a separate JS document. This method is usually the best because it makes it easier to cache and it keeps the initial HTML document size down. With this method, it is best to keep you script import tags at the bottom of the HTML document just above the closing body tag, so when the page is loading the JavaScript is not running before the rest of the page is loaded causing the site to take longer to appear. If you want a better SEO score from Google then you should follow this rule. Added the defer attribute tells the script tag to run after the rest of the document to make sure that the page is done loading before the JS is executed. An example of an import script tag is shown below:

<script src="scripts.js" defer></script>

There is also the method of writing internal JavaScript which is just like the method above but without the src="" attribute. You can write your JS within the script tag. This method makes it harder on browser caching and minifying the Javascript. Adding the defer attribute will also work with this method.