How to create a website using HTML and CSS

We will build our stunning website using HTML and CSS, in less than 20 minutes.

Just follow this step by step tutorial.

Step 1. Get a Text editor (if you don’t have one)

First of, you need a good text editor to write code. plain notepad is not enough.
For this tutorial, I will be using notepad ++.

notepad ++

Alternatively, you can use atom text editor or Sublime Text. Both are very good.


atom text editor

sublime text

Step 2. Create the landing page for your website

Let us build our landing page based on popular CSS framework Bootstrap.

We are using a framework because:

  • You don’t have to reinvent the wheel! CSS frameworks have many re-usable constructs
  • Your website works on all browsers & devices out of the box
  • You don’t have to write lots of code

If you want to learn Modern HTML from scratch, bookmark and read this tutorial:
a Modern HTML Tutorial.

Here is the source code of our landing HTML page (index.html):
veggso_com.zip

In the source you can see that we have added a custom CSS file below the Bootstrap CSS:
html head with bootstrap

The body HTML is updated to add a navigation menu, heading and three small columns.

Step 3. Get website Domain and Hosting

The next step is to get our website online so that the whole world can see it.

We will host our website with SiteGround Web hosting.

Always choose the best hosting service for your websites.
Siteground is known for its super fast web servers, security features and awesome support.
This link takes you to the best hosting offer they have:
https://www.siteground.com/go/fast-websites

Choose the hosting option with multiple websites feature:
choose good hosting plan

You can add more websites to the same account by choosing that option.

Enter the domain name you have selected and make sure there is no spelling mistake!
register domain

Also remember to use a long, good password. Keep the password safely somewhere.
choose good password

After completing the signup, wait for the email with login information to arrive in your email inbox.
order email

Once you have the email, login to your customer area:
order info

login customer area
Bookmark that page so that you can quickly login to your hosting control panel next time.

Click on ‘My Accounts’ tab:
customer area my accounts tab

You can see all important information about your website here. Clicking on the Control panel link will take you to the hosting control panel where you can do most of the website setup tasks like installing software, accessing logs and so on.

At the moment, we just want to upload the HTML/CSS files to our website. We can upload the files using simple FTP.
my-accounts

Step 4: Upload files to your website

We will use the Free Filezilla FTP client to upload our web pages to the new website.
Download and install FileZilla FTP client first.

After installing Filezilla, login to your website through FTP. Use the FTP login information in your hosting customer area to login (The server name and the username is shown in the hosting customer area). The password is same as the one you had entered while signing up.

FTP Login

Once you have logged in to FTP, the left pane will show your local folders and the right pane will show the folders in your web server account.

Select the public_html folder in your web server.
Select the local folder where you have your web pages, in the left pane.

FTP Folders

Right click on the index.html file and choose upload. Once you have completed the upload, visit the website in your browser.
create a website using HTML and CSS - FTP Upload step

Congrats! you got your pure HTML website online!

updated website

Enhancing your website

At the moment, your website is very basic with little content. Next step is to add more content to your HTML file and keep improving your CSS.
Head to the examples section of bootstrap website. There we have samples of website layouts. For example this one:
justified-nav. Right click and choose view source or press Ctrl+U ( ⌥ ⌘ U on mac) to view the HTML source of the page. Study the example to build your own layout.

After making the updates, re-upload both the HTML and the CSS to your website.

Leave a Reply 0 comments

Close

Copy and paste this code to display the image on your site

Copied!