Have you ever considered building your own website? Or maybe you tried to play in Photoshop and create some buttons, headings, images but don’t know what to do next to make it alive? Well, you need to know HTML and CSS languages to do so. In these tutorials I will teach you step by step how to build your own website using HTML and CSS.
I’ve been a designer for the past few years and have a lot of experience in this area. But in 2013 I started to learn HTML and CSS and this was the best decision I’ve ever made for my career. Instead of being artist you are becoming architect and creator of the web. Sounds great? Then, let’s move forward. In order to start we need to understand the purpose of these two languages.
What is HTML?
HTML is a Hyper Text Markup Language, it defines the structure of a web page. Or in a simple words – HTML tells the browser what elements are on the page, such a headings, paragraphs, links etc.
What is CSS?
CSS stands for Cascading Style Sheets, it’s a language for styling elements on a web page. If you want to change colors, fonts, alignment or position of an element, you use CSS.
What tools and software are required to code in HTML and CSS
There are many code editors for HTML and CSS, we’ll take a look on some of the most popular. You can choose any of these, but I prefer to code in Sublime Text.
Basics of HTML
The very first thing that you should understand is HTML tags. Tags are the elements of a web page that defines the page structure. For example, headings, paragraphs, lists etc. Here is the list of most frequently used HTML tags. There are plenty of other tags, but we’ll learn about them later.
- <h1> – heading
- <p> – paragraph
- <a> – anchor tag (link)
- <img> – image
Tags must be surrounded with less-then and greater-then angle brackets. In most cases tags must be closed. So, here is an example, to show paragraph on the page, we type
As you can see we have opening <p> tag and closing </p>. Everything between it considered as paragraph.
Getting started with HTML
Ok, now when you have a code editor installed, let’s open it and create new file called index.html Then we use this piece of code:
<!DOCTYPE html> <html lang="en"> <head> <title>My First HTMl page</title> <meta charset="utf-8"> <!--[if IE]><meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'><![endif]--> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta name="description" content=""> </head> <body> ... </body> </html>
We’ll not spend our time understanding what this code means. Basically it’s a code for browsers and search engines. If you want to inderstand it, here is the link. Instead we will use magic formula “Learn less, code more” 🙂 As you can see we have following structure: html tag, inside of it we have head and body tags. These are important tags for every web page that you will create. Inside of the head tag you can see the title tag, this one is showing the title of your page if you open your page in the browser tab. All our content will go inside of the body tag, it means between opening <body> and closing </body>.
Let’s add some content to our web page.
We will add a heading h1 and a paragraph to our page. All we need is to paste it inside of the body tag.
<!DOCTYPE html> <html lang="en"> <head> <title>My First HTMl page</title> <meta charset="utf-8"> <!--[if IE]><meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'><![endif]--> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta name="description" content=""> </head> <body> <h1>Heading h1</h1> <p>We care about our buyers and ready to support you if you have any issues.</p> </body> </html>
If you open this page in browser you will see something like this:
Congratulations, you’ve just created your first HTML web page and it’s perfectly working. In the next lessons we’ll dive more deeply into HTML and CSS and learn how to code to build your first website. If you like our articles and want to share it with your friends, click share buttons below. See you in the next tutorials.