A basic understanding of Hyper Text Markup Language (HTML) and Cascading Style Sheets (CSS) is useful for anyone who  is responsible for managing a website or online content. While knowledge of HTML and CSS is not required to run a website managed by an IT team it is helpful to understand how your website functions. This post explores five free online tutorials and resources that can help you learn the basics of HTML/CSS and beyond.

W3 School

The W3 School offers free tutorials and does not require you to register with the site. Lessons start with the basics of HTML and CSS and building from there. Each lesson is accompanied by a piece of marked up text you can try altering to see the affect on the rendered version. The W3 School is also an excellent source for mark up, CSS and scripts to use while building a website.

Khan Academy: Intro to HTML/CSS

If you like watching video, the Khan Academy offers a free series of videos on HTML and CSS and does not require you to sign up for an account. Like the W3 School they also provide a sample of text marked up with HTML that you can alter and see what the affect is on the rendered version.

Free Code Camp

The Free Code Camp offers a free tutorial on HTML and CSS without needing to sign up. If you sign up for an account you can try your hand at applying mark up to a documents provided by non-profits. The non-profits can then use your markup on their website.

Codecademy: HTML & CSS

Codecademy offers a free tutorial on HTML and CSS. You do need to sign up for an account, but Codecademy offers more self contained lessons than the W3 school. They also offer lessons in a wide range of other mark up and programming languages.

Code School

Code School offers a series of free videos on HTML and CSS, but you have to create an account. Once you complete a course you earn a badge you can proudly display though.

Try It Yourself

Do you want some text marked up with HTML and CSS to experiment with? A text version of this blog post is included below with HTML and CSS markup. Feel free to copy the text and experiment with changes to the HTML and CSS.

What to do:

  1. Upload a text editor (if needed) and open the text editor. Text editors allow you to write markup and code before running the markup or code on a computer. Some text editor options for HTML include:
    1. Brackets (Open source text editor developed by the Adobe community and available for Macs or PCs. It will detect errors and suggest tags)
    2. Komodo Edit (Open source HTML/CSS text editor available for Macs and PCs that will detect errors and suggest tags)
    3. Notepad (Comes preloaded with Windows but does not provide assistance with error detection or syntax)
  2. Copy and paste the marked up text below into the editor and save as an .html file
  3. Make changes to the text and save
  4. Open the file with a web browser to see what it looks like
  5. Try out one of the sources above to see what else you can do with HTML and CSS

Text Version of Post:

<!–Every webpage begins by defining its DOCTYPE and setting an <html> tag. If you want to leave a comment in your text that the computer will ignore you can surround it with the symbols this comment is contained within.–>
<!DOCTYPE html>
<html>
<!–The header section contains metadata to help computers understand your document. Most of the information in this section is never displayed to a human reader. At a minimum the header should include the document’s title. You can also use this area to include tags, links to schemas, scripts, etc.–>
<head>
<title>5 Free HTML/CSS Tutorials and Guides</title>
</head>
<!–The style section contains the CSS that defines how the page will render. Try changing the settings or adding settings to see how it effects the way that the headers and text are rendered. To see colors for CSS visit: https://www.w3schools.com/cssref/css_colors.asp. To see fonts for CSS visit: https://www.w3schools.com/cssref/css_websafe_fonts.asp.–>
<style type=”text/css”>
body {
width: 50%;
}

h1{
font-family: “Impact, Charcoal, sans-serif; color: red;
}

h2{
font-family: “Comic Sans MS”, cursive, sans-serif; color: purple;
}

h3{
font-family: “Courier New”, Courier, monospace; color: olivedrab;
}
</style>
<!–The body section houses the elements that are visible to human readers. This includes text, images, tables, etc. Note how each element is labeled with a tag that was defined in the style section.–>
<body>

<h1>5 Free HTML/CSS Tutorials and Guides</h1>

<!–If you want to add an image use the <img> tag as shown below. Note that the computer will look for the image in the folder that contains the HTML file unless you tell it otherwise. Also, the <img> tag is unusual because it does not require a closing tag.–>

<img src=”unsplash-code_small.jpg” alt=”picture of HTML code on a computer screen” style=”width: 100%; height: 100%;”>

<p>A basic understanding of Hyper Text Markup Language (HTML) and Cascading Style Sheets (CSS) is useful for anyone who  is responsible for managing a website or online content. While knowledge of HTML and CSS may not be required to run a website managed by an IT team it can be helpful to understand how your website functions. This post explores five free online tutorials and resources that can help you learn the basics and beyond.</p>
<h2>W3 School</h2>
<p>The W3 School offers free tutorials and does not require you to register with the site. Lessons star with the basics of HTML and CSS and building from there. Each lesson is accompanied by a piece of marked up text you can try altering to see the affect on the rendered version. The W3 School is also an excellent source for mark up and code to use while building a website.</p>
<!–If you want to change the styling for a single element in the body you can change the element’s styling in the body section and this new style will over ride the settings in the style section. See the header beneath this comment.–>
<h2 style=”color: mediumvioletred”>Khan Academy: Intro to HTML/CSS</h2>
<p>If you like watching video, the Khan Academy offers a free series of videos on HTML and CSS and does not require you to sign up for an account. Like the W3 School they also provide a sample of text marked up with HTML that you can alter and see what the affect is on the rendered version.</p>
<h2>Codecademy: HTML and CSS</h2>
<p>Codecademy offers a free tutorial on HTML and CSS. You do need to sign up for an account, but Codecademy offers a more self contained lessons than the W3 school. They also offer lessons in a wide range of other mark up and programming languages.</p>
<h2>Free Code Camp</h2>
<p>The Free Code Camp offers free tutorial on HTML and CSS without needing to sign up. If you sign up for an account you can try your hand at applying mark up to a documents provided by non-profits. The non-profits can then use your markup on their website.</p>
<h2>Code School</h2>
<p>Code School offers a series of free videos on HTML and CSS, but you have to create an account. Once you complete a course you earn a badge you can proudly display though.</p>
<h2>Try It Yourself</h2>
<p>Do you want some text marked up with HTML and CSS to experiment with? A text version of this blog post is included below with HTML and CSS markup. Feel free to copy the text and experiment with changes to the HTML and CSS.</p>
<h3>What to do:</h3>
<ol>
<li>Upload a text editor (if needed) and open the text editor. Text editors allow you to write markup and code before running the markup or code on a computer. Some text editor options for HTML include:</li>
<ol>
<li>Brackets (Open source text editor developed by the Adobe community and available for Macs or PCs. It will detect errors and suggest tags)</li>
<li>Komodo Edit (Open source HTML/CSS text editor available for Macs and PCs that will detect errors and suggest tags)</li>
<li>Notepad (Comes preloaded with Windows but does not provide assistance with error detection or syntax)</li>
</ol>
<li>Copy and paste the marked up text below  into the editor and save as an .html file</li>
<li>Make changes to the text and save</li>
<li>Open the file with a web browser to see what it looks like</li>
<li>Try out one of the sources above to see what else you can do with HTML and CSS</li>

<h3>Text Version of Post:</h3>
<!–Do not forget to close the <body> and <html> tags.–>
</body>
</html>