This instructable will teach you the basics to creating and customizing a webpage using HTML and CSS code.

Supplies

All you need is:

A computer
Any plain text editor such as Notepad (Notepad++ recommended but not required)
(Text editors such as Word/Wordpad will not work for this project)

Step 1: Open Your Text Editor.

First you will need to open your text editor, for ease of access I will be using Notepad in this text editor; however, other plain text editors such as Notepad++ or JGrasp would work.

Step 2: Create HTML File

Once your text editor is open, you will need to save your blank file as an HTML this can be done as follows

1. Go to File (top left corner)
2. In the drop down menu click save as
3. Name the file yourfilename.html
4. Click Save

This will create an HTML type file so when your computer opens it, it will run as a webpage rather than plain text.

Step 3: Doctype Declaration

In this step we declare in the text editor that the code is in HTML form, this will let the program know what type of code we are writing in, do this by entering the code seen in the picture above.

Step 4: Creating a Webpage Header

In this step we create a webpage header by using the header element as seen in the provided picture, a / must be put at the end of every element to close the command otherwise the web page will not work properly.

Step 5: Adding Information

Extra information can be added to your webpage by using the same format as the header. There are various types of data that can be entered but for this project we'll use a paragraph element, as seen in the picture above, you can type whatever you would like into the paragraph field, or just copy directly off of the example picture.

Step 6: Make Sure the Page Works

Don't forget to check to make sure your webpage loads correctly, to do this simply find where you saved your HTML file, and double click it, the web browser you have set to default will open your webpage, and you can have a look at the work you've done so far!

Step 7: Styling Your Web Page

You may have noticed the web page we've created is looking a little sad, but don't worry, we can spice it up with HTML styling commands!
To style our web page, we simply pick an element to style, and insert the

style=

command into the line of code. For this project we will use the header element to change the color of the text, do this by typing

style="color:red"

Into the header element as seen in the picture above.

Refresh your web page to see the change!

Step 8: CSS Styling

In line HTML style commands aren't the only types of styling we can use, CSS provides more options for editing our web page.

To use CSS we will need to add a element to our code between the and elements as seen in the picture above. This will allow us to add a blanket styling to our elements in case we decide to add more.

Step 9: CSS Styling Continued

Now that we have our style element we can use CSS to format our web page. In this step we will center our header and paragraph; as well as, change the color of our paragraph. We do this by adding

h1 {

text-align: center;

}
p1 {

text-align: center;
color: yellow;

}

To our code as seen in the picture above. Along with this we can change the background color of our webpage with CSS using the same general format and inserting it into our element.

body {

backgroung-color: gray;

}

Notice the names for what we are stylizing are the same as those in the HTML elements.

Step 10: Finished!

Refresh your web page to see the changes you have made, and congratulations you have officially coded your first website! This was a very basic introduction to HTML/CSS coding and if you enjoyed learning this there are plenty of web resources such as w3schools.com that can help you learn more about coding. Thank you for taking the time to learn this I hope it was an enjoyable experience!