Using a website builder to build a website for yourself or your business is the easer way to go, since website builders let you use a ready-made theme from any of the large template libraries. But if you'd like to get your hands dirty, you could try building your website from scratch.
While it’s challenging to fully master HTML and CSS, you don’t have to be a pro to get started. You can still learn the basics and begin building a simple website with HTML. In this post, we’ll explain how in 10 easy steps.
1. Define the Purpose of the Website
Before building your website, you need to define its main purpose. Will it be informational or transactional? Are you seeking to entertain your visitors?
If you’re just getting started with HTML, you could build an informative website where you present information or an entertainment website where you collect funny photos or videos around a specific topic.
A transitional website where you sell products or services is more challenging to build, so you could use a website builder like GoDaddy or Network Solutions for this. Additionally, if you want your website to rank well, we recommend using one of the many website builders for SEO.
2. Gather the Necessary Resources
Gather the resources you need to start building your website. For HTML, you only need three things:
- A text editor (like Notepad or TextEdit)
- A browser (like Chrome or Safari)
- Web hosting service
Most computers already have a text editor and browser, so use whatever is available. If you’re just starting out, you don’t need any fancy text editor—the most basic one will do.
The same is true for hosting. Unless you’re building a website that will get thousands of visitors early on, you can pick the simplest and cheapest shared hosting from any reliable hosting company like GoDaddy or HostGator. You also need to purchase a domain name to upload your page later.
3. Plan Your Layout
You can plan a basic layout on paper or in a word document. You'll need a simple idea of the different elements you need and where each one will go. These elements include the header, footer, navigation bar, content, and so on. Defining this now will help you plan everything later and make the whole process smoother.
If you need inspiration, check out the latest web design trends and use them as a starting point.
4. Set up the Boilerplate Code
The boilerplate is the most basic layer of your code. To set it up, create a new folder on your computer containing an empty index.html and style.css file. Open the index.html file in the text editor and add the boilerplate code.
Typically, it’ll look something like this:
<!DOCTYPE html> <html> <head> <title>Your title here</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Hello, world!</h1> </body> </html>
The boilerplate code uses HTML tags, which define what happens with each element. For example, <i> is a tag that will italicize a piece of text. To do this, open the tag <i>, put the content in the middle, and close it </i>. Then, open your index.html file in your browser to make sure it’s working. You should see a simple line of text saying, “Hello, world!”
If you're having trouble with boilerplate code, you can find templates online.
5. Create the Elements of Your Layout
Once you’ve set your boilerplate code, it’s time to start creating the different elements of your layout from Step 3. These elements will determine your web page's structure. For this, you need to use different semantic elements, such as <header>, <footer>, <main>, and <section>. In addition, each element needs a start tag and an end tag.
For example, an HTML <footer> element should look something like this:
<footer> <p>The End</p> </footer>
It's easy to lose your way during this step, so pay careful attention to each element and the tags you need to use.
6. Add Content
The next step is to add some content to your page. If you already have content, great! You can simply add it to your index.html file with all the relevant HTML tags. If not, you can use dummy text as a placeholder and change it once you have created your content.
7. Add Layout CSS
Next, you need to put together a CSS stylesheet in your style.css file. In it, you’ll set how your webpage will look by defining properties like width, height, position, display, margin, and so on. You’ll also use it to define the size of all the images on your website.
At this point, things get complicated, so you can use a CSS framework like Bootstrap instead of learning all the CSS selectors. Alternatively, you can use some simple CSS tutorials to define the basic characteristics of your layout.
8. Add a Background and Colors
Once you’ve defined the basic layout in CSS, it's time to add a background and some color to your website using CSS selectors.
Pretty much any element can have color applied to it. The "color" property changes an element's foreground color, and the "background-color" property changes an element's background color. The rest of the code depends on which specific element you'd like to add a foreground or background color to.
For example, adding a background color would typically look something like this:
<!DOCTYPE html> <html> <head> <title>Your title here</title> </head> <body style="background-color : red ;"> <h1>Hello, world!</h1> </body> </html>
You can add whatever color you like using hex codes, RGB values, or a valid color name. This can be tricky, but there are HTML color pickers available online to simplify this process.
Adding a background and colors can be fun but time-consuming, so use a CSS framework for this step if necessary.
9. Make Sure Everything Is Working Properly
While building your website, you’ll be testing it at every step, but now it’s time to really look into all the details. Open your index.html file in your browser and see how everything looks. Are all the links working? Are the images displaying correctly? Are the colors right?
10. Upload Your Page
The last step is to put your page online. Log in to your web hosting service provider and upload your index.html and style.css file in your file manager.
And voilà! You have your first HTML page up and running.
Building Your Website Doesn’t Need to Be Complicated
Learning HTML from scratch might not be for everyone, and there are plenty of other ways to build your website. Still, having a good grasp of the basics of HTML will always be helpful, regardless of the method you use, and building a website yourself is a fantastic exercise for that.
