Hello and welcome to my series of tutorials on HTML and CSS for Absolute Beginners. Before I begin, I’d like to clarify who my target audience is and who these set of tutorials are tailored for.
These next series of tutorials are for absolute beginners who have no insight or knowledge into making and creating websites with HTML and CSS or have no coding experience at all. In these next couple of tutorials, I’ll be targeting people who fall within these categories:
- Complete beginners that want to learn the basics of HTML and CSS
- Designers wanting to learn how to code HTML and CSS
- Anyone wanting to learn how how to create websites
Before we get started, you should already be comfortable with using a basic text editor and are familiar with modern browsers (Please don’t use any versions of Internet Explorer that is below IE9… actually don’t use Internet Explorer at all. Try Chrome or Firefox instead).
Also, you should also be familiar with doing basic computer actions such as saving, naming/re-naming files, creating folders, etc. (You wouldn’t be doing these tutorials if you didn’t know the basics now would you?).
In these tutorials, I will be explaining a lot of how things work, and the reasons why. It might be a little frustrating hearing about them, but there is a reason why I point them out throughout the tutorials. They are mostly notes that are really good to know, but not necessary to learn. They will look like this:
NOTE: Sometimes I write notes to give more context or explain the reasoning behind the topic at hand.
Another thing, I highly encourage you to type the code in these tutorials and not copy and paste any of the code that is written. You should actually be typing them in your text editor instead. This allows your brain to naturally get accustomed to and familiar with typing HTML and CSS.
If you’re already comfortable with writing basic HTML and CSS, this tutorial is NOT for you and you’ll be very frustrated with these tutorials. There are plenty of other advanced topics for creating websites with HTML and CSS out there. My tutorials are aimed solely for absolute beginners who have no prior experience with it whatsoever.
I will go through the basics of HTML throughout the first couple chapters, and then dive into CSS afterwards. There is a reason for doing it this way, so I suggest you follow through each chapter.
If you have the basic understanding of using a computer and have a drive to learn how to create websites, then this is the tutorial for you. Anyways, lets get this tutorial started!
So you want to learn HTML and CSS
What is HTML?
HTML stands for HyperText Markup Language. It’s the basic building block for creating websites.
Think of HTML as the foundation of a house. The house itself is the entire website, and HTML is the foundation of the house (The ceiling, the walls, and the floor). HTML is used to help structure your website and we’ll be using HTML elements to help structure your webpages. Think of webpages are the rooms in a house. A house can have multiple rooms, and therefore a website can have multiple webpages.
For clarification, a website comprises of numerous HTML webpages, meaning we will eventually be creating multiple webpages along the course of these tutorials.
What is CSS?
CSS stands for Cascading StyleSheets. If HTML is like the foundation of a house, CSS is the decoration and aesthetics. CSS is used to style how a website looks and feels. We’ll be using CSS to style our HTML to make our websites look better and much more usable.
Enough with the analogies, let’s get coding!
But first, in order to start coding HTML and CSS, we’ll need to download a text editor.
A text editor is used to code actual HTML and CSS, so we’ll need to use a text editor to create our webpages. There are many, many different types of text editors out there. I prefer using Sublime Text 3 (For Windows, Mac, and Linux. It’s Free to use, though I highly encourage you purchase a license to help those developers out).
You can also use the default text editors already installed in your computer (Windows: Notepad, Mac: TextEdit) but they don’t really have a lot of useful features. As for the rest of my tutorials, I’ll be using Sublime Text 3, though you can use any other text editor you want (Just don’t use graphical word programs like Microsoft Word. Only use plain text editors). I won’t go into details of how to install a text editor since you should at least have that knowledge before even attempting to code HTML and CSS.
Ok, enough with the setup, let’s move on to Part 2.