So, you want to create your own website? Great! I’m going to teach you build a basic website with HTML and CSS! We’re going to create a simple website that will showcase your product or business’ offering and also show your contact information.

If you have any issues, or want to customize anything, feel free to contact me free

Before we proceed…

Make sure you have a basic understanding of HTML and CSS. Learn about HTML basics.

Website Building Tools

You will need a obviously need a computer to create a website and a text editor to write your code. If you are using a Mac, download Atom or if you’re using a PC, download Notepad++.

Now that you have your text editor installed, let’s go over some basics.

Website Building 101

A website, in it’s simplest form, is a collection of text files. That’s it! The code written in these files is loaded into a web browser, such as Google Chrome or Firefox, and the browser does the heavy lifting of translating our website code into a working website. Our website will be coded in simple HTML and CSS.Think of HTML as the “structure” of your website and CSS is the “style” of your website. This will make more sense as we proceed. Let’s begin by setting up our basic project.

Setting Up a Basic Website

As I said before, a website is just a collection of text files. You’ve probably dealt with files and folders all your life while working with computers. This will be no different. Let’s navigate to our Desktop, or anywhere else on your computer that is familiar to you. Let’s create a new folder called “my-first-website”.This will be the folder that holds all of our website code. This is what’s called a “Project Directory” or “Project Root”. Those are just fancy words for folder. Let’s go inside this folder and create a new file called “index.html”. This file will be the main page, or if you prefer, the “Landing Page”, of our website.Please notice the file extension. The file extension is “.html”. This is very important. It let’s the browser know what kind of code is inside.

As of now, your project structure should be a folder named “my-first-website”. That folder should contain a single file called “index.html”. See below for a visual representation of our project structure so far.

Next, we’re going to add another file in the root of our project. Remember, the “root” of our project just means, the “my-first-project” folder. Go ahead and create a file named “style.css”. Once again, pay close attention to the file extension. A file with an extension of .css means its a CSS file. CSS is the language we use to style our website. So all the HTML we write in index.html will be “styled” with the code we write in style.css.

We should now have our “my-first-website” folder that contains two files. The original “index.html” and the newly created “style.css”.

Basic index.html File

Now, we’re going to create add the basic code for the index.html file. The first thing we need to do, is tell the browser what kind of HTML we will be using. In your text editor, add the following line of code to the first line of you index.html:

Next, copy and paste the following into your index.html, underneath the DOCTYPE declaration. Your index.html file should look exactly as it does below:

Let’s walk through the code we just added. First, we add an opening and closing HTML tag. A “tag” is an HTML element. A “tag” always has an opening and closing element. You “close” an HTML element by adding a “/” directly after the ” < “. See the opening “<html> ” tag and at the bottom you will see the closing “</html> ” tag. An HTML element can contain other HTML elements, as we see here in this example. The main<html> element contains a <head> tag and a <body> tag, each with it’s own closing tags.

The <html> tag is needed to wrap your entire website, all your code for the landing page will go inside the HTML tag. The <html> represents the root of the HTML document.

The <head> tag, currently empty, will contain metadata for the browser. The stuff we put inside here wil not be seen by any users visiting the website, but will be ued by the browser only. We will be adding things in here in our next step.

The <body> tag is where we will place all the HTML to create our website. Everything we put in here is what the user will see when visitnig your website. Anything you wish a human to see, goes here.

Loading Our Website in the Browser

As we write any code in the <body> of our index.html, we will want to see how it looks. To do this, we need to load our index.html into a browser. Open up google chrome, or any other web browser. Once open, click “File> Open” and choose index.html. This will load our empty html file in your browser. We haven’t added anything so you should see a blank page. Let’s fix that. Add the following INSIDE the <body> tag:

Save the index.html file and reload your browser. You should see the newly added “MY FIRST WEBSITE” in the browser. Now let’s wrap the text we just added in an <h1> tag. A <h1> tag is a large heading tag. See the difference when you refresh the browser.

 

There are dozens and dozens of tags out there. We will only be using a few in this tutorial but I encourage you to do a google search on HTML tags to learn more!

Using Styles With CSS

To use CSS, we will need to link our stylesheet we created earlier. Remember the “style.css” file we created a while ago? Let’s add the following to the <head> tag:\

You’ll notice something a bit different about the <link> tag. This kind of tag “closes” itself. You dont need a second closing tag. This is the case for many other tags, for example, the <img> tag.You use the <img> tag to add images to your website. Getting back on track, we linked the stylesheet “style.css” to the “index.html” file by adding the location of the “style.css” in the href attribute on the <link> tag. HTML elements can have any number of attributes added to them.In this case, the <link> tag takes an “href” attribute. This attribute grabs a file location at the path we provide and pulls its contents into this file. So by linking the stylesheet to this “index.html” file, we can now use all the styles written inside “style.css” inside of “index.html”. That sounds complicated, lets do a few examples to clarify things.

Inside your CSS file, “style.css”, add the following:

Save this file and reload your browser. You should see the background of the <h1> tag is now red. This means we successfully linked your stylesheet! We can now officially start building a simple landing page for your website.

Example Website

We’re going to create a basic landing page the contains the title of you or your business, an image about you or your company and some contact details. Lets first add some CSS that will make this page take up the full height and width of the browser.

Next, let’s update that <h1> tag to your name or business.

Let’s add your first image. As we went over before, to add an image, we need to add an <img> tag to the website. We also need to add the image we want displayed into the root directory of your project. Find any image and add it to the root of your project. Put the path of your image in the “src” attribute of the <img> tag.

It’s now time to discuss two very important HTML attributes. Classes and ID’s are perhaps the most used HTML attributes. These attributes are used to target HTML elements with styles and much more. Let’s start by using an example.

As seen above, we have now added a class attribute of “company-img” to the <img> tag. By doing this, we can now target this specific <img> tag in the CSS file and style it. Typically we have hundreds of HTML elements in a file and we use classes to target one or more elements.

 

In CSS, you target classes by adding a “.” followed by the name you added in the class attribute on the HTML element. In this case, we used “company-img”. Here, we set the image width to 500px and made the height “auto”. “auto” means the image tag will be as tall as necessary to maintain the aspect ratio of a 500px tall image.

Adding Contact Information to Your Website

Next, we;re going to add your email and phone number. When the user clicks on the email, it will automatically open their email client.

Here, we added two new tags. The <a> tag, or “anchor” tag, when clicked will take you to a new page, download data or in our case, open an email client to write an email. The “mailto” lets the browser know to open the email client and the email address passed in gets populated by the email client.The <p> tag, or “paragraph” tag is a very common tag to encase text. We could also placethe phone number in an <a> tag, but I wanted to give an example of the paragraph tag.

In Conclusion

I hope you have learned a bit from this basic tutorial. This website still needs a ton of work, but add some CSS to your stylesheet and see what you can create! Add some colors, change fonts, see what CSS has to offer. You can learn more at https://www.w3schools.com/ for more. And of course, get in touch with me at me@ryanthedeveloper.com for any questions or help!

Leave a Reply