Build One Color UI Responsive Website Tutorial (HTML5 & CSS3)

Today most of the websites use content management systems such as WordPress, Joomla, and OpenCart to be built and people tend to skip the essentials of the website creation process – the HTML and the CSS.
In the following article, we will guide you through the process of creating a responsive HTML5 and CSS3 website from scratch.

Building Website From Scratch HTML5 And CSS3

For the purpose of our tutorial, we will create 2 files – index.html and style.css and a folder that is going to store our images and we are going to name “img“.

index style and images image

The index.html file is where our HTML code is going to be. It is used for the “skeleton” of the website and it holds the main information about the website, the meta descriptions, the links to other files, and pretty much everything without stylings.

The style.css is the file that holds the styling of our page. It is going to be used for defining our styles, positioning, layouts, and the overall outlook of our website. For a better understanding of the structure of the code, we will break it down to pieces and explain every piece or line of code that you are going to use.

Every HTML5 document starts with the following lines of code:

<html lang=”en”>
<meta charset=”UTF-8″ />
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />
<meta http-equiv=”X-UA-Compatible” content=”ie=edge” />
<link rel=”stylesheet” href=”./style.css” />
<title>Landing Page </title>

The <!DOCTYPE html> tells the browsers that this document is going to be using HTML5, the metacharset specifies the encoding of the document and we highly recommend keeping it to UTF-8. On some rare occasions if you are creating a website on a different language you might need to change that if you experience problems with displaying your language characters.

The meta name = “viewport” property tells the browser that the website is going to have a responsive behavior.
The link to google fonts lets your HTML document use google fonts for its texts and the link rel=” stylesheet” line of code links the style.css document to your HTML document, enabling you to apply the styles from your .css file straight to your HTML.

Body Of The HTML Website

The “body” of every HTML website, or <body> is where all of your content stays. The HTML <body> tag defines the main content of the HTML document or the section of the HTML document that will be visible on your web page when its opened.

We will start our website by creating a body and including a header in it.

<div class=”logo-container”>
<img src=”./img/logo.svg” alt=”logo” />
< <h4 class=”logo”>Three Dots </h4>
<ul class=”nav-links”>
<li> <a class=”nav-link” href=”#”>Specs</a></li>
<li> <a class=”nav-link” href=”#”>Products</a></li>
<li> <a class=”nav-link” href=”#”>Contact</a></li>
<div class=”cart”>
<img src=”./img/cart.svg” alt=”cart” />
</header <

This is the skeleton for our header and it includes an <header< which is the tag that is used for the header of every website. It holds the top of the website with its navigation.
Before proceeding, let’s take a minute to explain what a CSS class means.

What is a CSS Class?

A CSS class is a group of elements that share the same attributes, such as color or font-size. These attributes are specified to the class and can be applied to different elements. For example, we have a class “nav-link” that we use for every element in our menu and thus every navigation link in our menu will look and behave like every other navigation link that has that class on it.

We’ve included our logo within a div, that has a class “logo-container“.
An <h4> (meaning Heading 4) with a class of “logo” and a div with a class of “cart” that will be used for displaying the cart image.

Building The Main

<section class=”presentation”>
<div class=”introduction”>
<div class=”intro-text”>
<h1>Laptop for the future</h1>
The new 14 inch bezeless display oferring a 4k
display with touch screen.
<div class=”cta”>
<button class=”cta-select”>14 Inch</button>
<button class=”cta-add”>Add To Cart</button>
<div class=”cover”>
<img src=”./img/matebook.png” alt=”matebook” />
<div class=”laptop-select”>
<img src=”./img/arrow-left.svg” alt=”” />
<img src=”./img/dot.svg” alt=”” />
<img src=”./img/dot-full.svg” alt=”” />
<img src=”./img/dot-full.svg” alt=”” />
<img src=”./img/arrow-right.svg” alt=”” />
<img class=”big-circle” src=”./img/big-eclipse.svg” alt=”” />
<img class=”medium-circle” src=”./img/mid-eclipse.svg” alt=”” />
<img class=”small-circle” src=”./img/small-eclipse.svg” alt=”” />

The <main></main> tag specifies the main content of our document. This element should be unique to the element and it should not contain any repeated content such as sidebars, navigation, logos, and search forms.
In our <main> </main> we have a <section> with a class named
presentation“, a div with a class “introduction“, a div with another class <“intro-text”> and Heading 1 <h1> and a paragraph <p>. The classes are going to apply different styles for our elements. (more about that in the CSS part of the article).

The <img> tags are used for linking and displaying images, and we also added them some CSS class styling.

Once we are done with that, we are ready with the skeleton of our website. However, our website will now look very bad because it does not have its stylings done.

creating the skeleton image

Styling Our Website

All of the stylings of our website are being written and saved in the style.css file. This file is a .css file that stores only CSS code and defines the visual part of our HTML layout, elements, classes, and ids.

The first thing that we wanna do in our styles.css file is to write down:

* {
margin: 0px;
padding: 0px;
box-sizing: border-box;

These lines of code are used to fix any margin or padding problems, and border-box as well. Once you’ve done that step, you can proceed with the styling of our <header>. To select the <headergt; element, simply use the

} ;
For our tutorial we will use
header {
display: flex;
width: 90%;
height: 10vh;
margin: auto;
align-items: center;

The display: flex property will move everything in one line.
The width:90% will make our header element to take 90% of the total width of our body. The margin: auto will figure out the proper space between the element and its parent container and adjust its position perfectly. The align-items: the center will position all of the child items that are in our <headergt; in its center.

CSS is a very flexible and powerful language and it allows us to apply stylings to more than 1 class of elements. For example, we can apply the display: flex property to our logo-container, nav-links, and cart classes with a single line of code:

.cart {
display: flex;
The display:flex property will take all of the available space of that 90% width.
.logo-container {
flex: 1;
.logo {
font-weight: 400;
margin: 5px;
nav {
flex: 2;
.nav-links {
justify-content: space-around;
list-style: none;
.nav-link {
color: #teal;
font-size: 18px;
text-decoration: none;
.cart {
flex: 1;
justify-content: flex-end;

creating flexed header image

These lines of CSS will grant some stylings to the .nav-link class, making the navigation color to teal, with larger font-size, remove the underline, increase the logo font-size to 400.

The justify-content: flex and will move the cart image to the end of its container and you are done with your header.
Proceeding with the styling of our presentation and introduction classes.

.presentation {
display: flex;
width: 90%;
margin: auto;
min-height: 80vh;
align-items: center;
.introduction {
flex: 1;

adjusting layout with css image

That will allow us to display the items flexed and position them side by side. We can then proceed with styling the intro-text h1, settings its font-size, font-weight, and giving it a background of a gradient as well.

.intro-text h1 {
font-size: 44px;
font-weight: 500;
background: linear-gradient(to right, #494964, #6f6f89);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
.intro-text p {
margin-top: 5px;
font-size: 22px;
color: #585772;

This will apply stylings to the text h1 and text paragraphs as well, giving them some margin and a font-size of 22px as well as a #585772 color.

Styling the Call To Actions

.cta {
padding: 50px 0px 0px 0px;
.cta-select {
border: 2px solid #c36cbb;
background: transparent;
color: #c36cbb;
width: 150px;
height: 50px;
cursor: pointer;
font-size: 16px;
.cta-add {
background: #c36cbb;
width: 150px;
height: 50px;
cursor: pointer;
font-size: 16px;
border: none;
color: white;
margin: 30px 0px 0px 30px;

styling ctas image

These lines of code will select the .cta elements and will give them proper stylings as well, changing the width, height, border, cursor, color, etc. The margin option will give some spacing away from the button from its top, right, bottom, left.
Once we get to this point our website already starts to look good.

Styling The Cover Image

.cover {
flex: 1;
display: flex;
justify-content: center;
height: 60vh;
.cover img {
height: 100%;
filter: drop-shadow(0px 5px 3px black);
animation: drop 1.5s ease;

These lines of CSS will make our laptop fit in the center of its container and also give it some shadow and a popup animation.

Positioning Background Circles

Styling the background image

We want to put our circle images in the background of our page, so we can use the following CSS code:

.big-circle {
position: absolute;
top: 0px;
right: 0px;
z-index: -1;
opacity: 0.5;
height: 80%;
.medium-circle {
position: absolute;
top: 30%;
right: 30%;
z-index: -1;
height: 60%;
opacity: 0.4;
.small-circle {
position: absolute;
bottom: 0%;
left: 20%;
z-index: -1;

This will let us put the circles in the background with different positions and reduced opacity, so our page will look much better and much more professional.

Styling the Arrows

For the styling of our arrows, we will use

.laptop-select {
width: 15%;
display: flex;
justify-content: space-around;
position: absolute;
right: 20%;

Giving them a width of 15% of their container, display: flex, position absolute so we can position them where ever we want and right of 20%, sending them to the right side of our page.

Creating Animations

We will create a simple animation with the help of @keyframes.

@keyframes drop {
0% {
opacity: 0;
transform: translateY(-80px);
100% {
opacity: 1;
transform: translateY(0px);

Our code starts with an opacity of 0, or not being visible and start from a bit up, let’s say -80px, and when the animation finishes we want our animation to go to 0px. This will create a very nice and beautiful effect on our laptop when our page loads.

Making Our Website Mobile Friendly

making the site responsible image

What we’ve created for now is a decent looking page that fits a laptop or a desktop user, but this will not look good on mobile devices.

To do that, we should use the media queries provided by the CSS and write down some rules, that will be applied depending on the screen size of our device.
Starting with a

@media screen and (max-width: 1024px) {
.presentation {
flex-direction: column;

the max-width:1024 property defines where the following rules should be applied. In other words, when the screen size becomes smaller than 1024px, the new set of rules will be applied and the website will change its look.

The flex-direction: the column will apply to the class .presentation and thus it will be position its elements 1 under another.
Then, we can proceed with applying some more rules under our

@media screen and (max-width: 1024px) {
.introduction {
margin-top: 5vh;
text-align: center;
.intro-text h1 {
font-size: 30px;
.intro-text p {
font-size: 18px;
.cta {
padding: 10px 0px 0px 0px;
.laptop-select {
bottom: 5%;
right: 50%;
width: 50%;
transform: translate(50%, 5%);
.cover img {
height: 80%;
.big-circle {
opacity: 0.2;

These stylings will transform your website’s layout to fully responsive and give it its completed look.

Our Conclusion

Building a website from scratch is not that hard as long as you understand the way HTML and CSS work together.
Creating HTML elements and styling them with CSS selectors is a crucial knowledge that you should possess if you are about to start building websites.

Also Check: 16 Steps How to Create Small WordPress Website for Free

Also Read: How to Create a Blog on WordPress – Demo/Steps Tour (Update 2020)

SiteGround Review Score, Recommended, 5 stars

How to Create a Website Using SiteGround:

1.Domain Name and Web Hosting. 2.Install WordPress and Theme.

What do you need before starting a website.

Before starting site setup process, we strongly advise that you complete the following preparation steps:

  • Have a clear idea for the site's domain name. For example, good tip is to make it short and with focused keywords.
  • Make sure to have an active credit or debit card so that you can make online purchases with it.
  • Make sure you prepare a computer that has stable internet connection.

Step 1: Purchase a domain name and web hosting type.

1. Go to "" from our referral link to get special price.

2. Choose the hosting plan you prefer and click "GET PLAN".

create website choose hosting

3. Type in the website name you wish and click "Proceed".

create website type site name

4. Type in your account information and client information in the appropriate fields.

create website type account information

5. Enter your purchase information and payment details.

create website type purchase information

6. Review your total, tick the "I confirm" box and then click on "Pay Now" button.

create website pay

If you have done it successfully, this is what you should see:

create website done

1.Domain Name and Web Hosting. 2.Install WordPress and Theme.

Step 2: Install WordPress and an appropriate visual theme for your website.

1. Log in to your account and click the "Websites" tab. Then click the "COMPLETE" button as shown below.

2. Select "Start a New Website" and then select "Wordpress". For an online store, select "WooCommerce"
install wordpress start a new website

3. Type your new separate WordPress login e-mail and password and click "CONTINUE"
install wordpress type your separate login width=

4. Click on "FINISH" if you don't want to add any offered features.
install wordpress click finish

5. Type "" in your browser and log-in using the WordPress e-mail and password you created earlier.
install wordpress log in

6. On the welcome screen, click on "START NOW".
install wordpress start now to begin

7. Choose a theme that suits your site type and your preferences and requirements and click "SELECT" as shown.
install wordpress choose a wordpress theme

8. To install the theme, click "CONFIRM" as shown.
install wordpress install theme

9. Add any free optional extras to your WordPress and click "COMPLETE" as shown.
install wordpress add extrast to wordpress

10. When you see the "Your site is ready" screen, click on "GO TO DASHBOARD".
install wordpress go to dashboard

11. Congratulations on your new site! This is your WordPress dashboard! You can use it to customize your site and change media in it. If you want to change the theme again, click "Appearance->Themes" and click the "Add New" button, as shown.
install wordpress add new theme

You can preview and switch to another theme by clickig "Preview" and "Install" buttons respectively.
install wordpress preview theme

How to Add Content to Your Website?

With WordPress, you generally have the ability to add the following types of content to your newly created website:

  • Post.
  • Media.
  • Page.

Below you can see instructions on how you can create a post or page and add media.

How to Create a New Post in WordPress?

Creating a WordPress post is easy - just follow the steps below.

1. Click on the "+ New" icon on top and select "Post".

Add Post Step 1

2. Fill your post with a short and SEO title, based on the topic your website is for and add content to the post. The more elements the content has, like links and pictures, the better. When done, click on "Publish" when you want your post to be public and seen by everybody. You can also click on "Preview" to check how your post looks visually before publishing it.

Add Post Step 2

How to Create a New Page in WordPress?

Creating a page is almost the same as creating a post, but with few important differences. Below you can find the steps on how to do it.

1. Click on the "+ New" icon on top and select "Page".

Add Page Step 1

2. Fill your page with beautiful content plus a good title and click "Publish". You can also preview it, just like with the posts.

Add Page Step 2

Since this is a page, make sure to create content that is more general. You can also create different types of pages, like a file download page, a report page, etc. To best explain pages, let's say you have a website for food reviews and a page would be describing general information about different categories of foods (fruits, vegetables, meat and so-on).

How to Add New Media in WordPress?

You can add media via two main ways - from the Wordpress menu or from the "Add Media" button within Posts and Pages. The later option is more commonly used, due to the fact that it is significantly more convenient. Below are the steps for it.

1. While in a post or page, click the "Add Media" button.

Add Media Step 1

2. From the menu that appears, click "Upload Files" and then click "Select Files":

Add Media Step 2

3. Select the file you want uploaded and click "Open":

Add Media Step 3

4. Modify the file alignment (left, right, center), size, what should happen if someone clicks it and other preferences and when ready click on the "Insert into page" button. For posts, it is "Insert into post":

Add Media Step 4

When done, the media should appear in the body of your post or page. WordPress also allows you to add audio and other file types, but be careful with the server space and use small size files due to the risk of filling up your server drive.

In case you want to Add New Media from the WordPress menu, you have to go the "Media" panel and repeat the beforementioned steps to do so:

Add Media Step 5

In this FAQ’s we are going to introduce you to the most common and frequently asked questions about websites and their creation. Let’s get started!

FAQ’s How to Create a Website

What is a Website?

A website is mainly made from web pages that contain related content all classified by a unique domain name (A domain name is your website name. It is the address where Internet users can access your website). On a website, you can post contrasting content connected with the sphere of your website.
There are different types of websites, which you can find on the networking space like:

Interesting Fact: The first website uploaded on the internet went live on August 6, 1991.

How Much Does It Cost to Create a Website?

To find out how much it will cost to create a website, firstly you need to have a clear idea about the type of your website. What it is going to be: e-commerce, blog, educational, etc.

After that, you need to choose:
The Best Hosting Provider.
The Most Suitable Wordpress Theme.
WordPress Website Builders/Plugins

After choosing the best hosting provider, it's time for the right theme for your site, and the plugins, then you can estimate how much it will cost to start your website.

Have in mind that if there are also free web hosting services and free WordPress themes available out there.

Do I Need Any Programing Knowledge for Creating a Website?

Probably yes. Creating a website is not an easy task, and it is good to have some programming knowledge if you are considering creating one, But there are also alternatives that you can use for creating your website without having any programming knowledge.

One very popular alternative that you can use is to install a responsive multi-purpose WordPress theme like Avada and set drag & drop page buider, which will help you to customize your website at ease.

Can I Create a Website for FREE?

Once upon a time, it was said that everything is possible, so creating a website for free is possible, although it's hard to achieve without any expense.

To start your free website creation you need to find a free WordPress and to install it on a free hosting service. After you have already published your website on the internet, you need to install free plugins, which is the most difficult part. It is problematic to find reliable free plugins. There are some freeware ones available, such as Yoast SEO that can do pretty nice work, but most reliable plugins which are required for quality improvement of your website and are massively adopted are not free.

How Long Does It Take to Create a Website?

This is a question that concerns everyone who is considering making a website. The truth is that there is no specific answer to this question and everything depends on the height of your goal. If you are thinking of creating a small blog, you can make your website in a day. But if you are considering making a big online shop or something similar you will need to spend a lot more time.

Which Are the Best Platforms for Creating a Website?

The easiest way to create a website is to use a CMS(Content Management System) website builder platforms like WordPress or Joomla. The CMS platforms can help you create and customize your website without having much coding knowledge.

The Most Popular CMS Platforms:

Jimbo, etc.

What Is HTML? - Quick Tutorial.

HTML is the standard markup language used in the web pages, with which you can create your own website. Using the base of the HTML and CSS(Cascading Style Sheets - another web language with which you can put style over the HTML fundamental) languages can be very helpful for making little customization changes to your website.

HTML Code Examle

The <!DOCTYPE html> declaration defines that this document is an HTML5 document
The <html> element is the root element of an HTML page
The <head> element contains meta information about the HTML page
The <title> element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab)
The <body> element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
The <h1> element defines a large heading
The <p> element defines a paragraph
The <br> element means a line passing.

HTML Element Example

<h1> This is Heading </h1>
</br> - Line Passing
<p> This is Paragraph </p>

What Is Web Hosting

A web hosting service is a type of Internet hosting service that allows individuals and organizations to upload their websites on the internet. There are different types of hosting services like:

  • Shared Hosting (Server shared between many users)
  • Dedicated Hosting (A dedicated server only for you)
  • VPS Hosting (Virtual Private Server)
  • Cloud Hosting (Hosting services that are provided to customers via multiple connected servers that comprise a cloud)


Leave a Comment

Your email address will not be published. Required fields are marked *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.