Free Consultation

Blog Single


Blog Single



In this article, we show you all the steps to get from a blank screen to a working website that is optimized and good-looking at the same time.

So first, we need to know what is HTML and Css?

  • HTML (Hypertext Markup Language) defines the structure and contents of a web page – where things go, how they are laid out, and what’s on the page.
  • CSS (Cascading Style Sheets) defines the styling/ presentation of a web page and the elements on it.


The two works together to make up the final web page, its design, and the content that’s on it.


Now follow these steps:


1. Learn the Basics of HTML


The main element of an HTML structure is an HTML tag.

A tag, for example, looks like this:

<a href="">This is a link to my homepage</a>

Hyperlinks are defined with the HTML <a> tag:

The href attribute specifies the destination address of the link.

2. Understand HTML Document Structure

Here’s the simplest HTML document structure:

1. <!doctype html>

2. <html lang="en">

3. <head>

4. <meta charset="utf-8">

5. <title>World!</title>

6. </head>

7. <body>

8. <h1>Hello World!</h1>

9. <p>My First Web Page</p>

10. </body>

11. </html>


Let’s explain the individual parts of this code:

  • The <!DOCTYPE> declaration represents the document type, and helps browsers to display web pages correctly. It must only appear once, at the top of the page, before any HTML tags.
  • The <html lang="en">declaration says what’s to come next is an HTML document written in English.
  • The <head> element contains meta information about the document.
  • The <title> element specifies a title for the document.
  • The <body> element contains the visible page content.
  • The <h1> element defines a large heading
  • The <p> element defines a paragraph

3. Get to Know CSS Selectors

Just like HTML has its tags, CSS has selectors.

Selectors describe how a given element should behave appearance-wise. Here’s an example of a CSS selector:

  1. p {
  2. font-size: 18px;
  3. }

This selector indicates that all HTML <p> tags within the document will have a font size of 18px.

With the “normal-text” class defined, we can now assign that class to those specific HTML tags that we want to make 18px in size.

For example:

<p class="normal-text">This text is going to be 18px.</p>

Let’s just explain all the elements of that piece of CSS code above:

  • .normal-text – class definition; everything after the name of the class and between the opening and closing brackets {} defines what the elements assigned to this class will look like
  • font-size – an example CSS property
  • 18px – a value assigned to the property


4. Put Together a CSS Stylesheet


The way you put a CSS stylesheet together is by defining each class one by one, and then testing if the outcome in your page design is what you wanted.


We’ll make things easier for you, by take a living organism and dissect its elements.

This is where a thing called Bootstrap comes into play.


5. Download/Install Bootstrap


Bootstrap takes care of the basic structure of an HTML document and CSS stylesheet for you. It delivers a framework that makes sure that the main scaffolding of your web page is ready and optimized for further development.

There are two paths you can take:

  • Option (a): go to the Bootstrap homepage, download the main Bootstrap package and start building on top of it.
  • Option (b): take a shortcut – get a starter pack for Bootstrap with a good-looking design and a demo web page already built.

We’re going to go with Option (b) for this article. We’re doing this for a couple of reasons, chief of them:

  • Starting with a ready-made structure saves a lot of pain in trying to figure out the basic necessities of an HTML document. This lets you focus on the interesting stuff – like laying out content and making it look good.
  • In short, learning things this way will give you a better-looking result quicker, which we guess is what you want.

6. Pick a Design

When you’re creating a website with HTML and CSS, you are free to use any Bootstrap template you like. They should all work similarly enough.


7. Customize Your Website With HTML and CSS


Let’s work on the homepage of the design first. This is going to show us how to replace the graphics, texts, and tune everything up in general.

Let’s have a more in-depth look into it here.

When you open the index.html file of your Bootstrap site, you’ll see a head section like this 


<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<title>Creative - Start Bootstrap Theme</title>

<!-- Theme CSS - Includes Bootstrap -->

<link href="css/creative.min.css" rel="stylesheet">



8. Add Content and Images

Let’s work on adding our own content to the page.


1. Change the Title

<title>My HTML Site</title>

2. Customize the Hero Section

The hero section is what we call the block. It would be cool to have our own content inside of it. To modify the block, go back to your index.html file and change the content.


3. Customize the Other Blocks on the Page

As you go through the index.html file, you’ll notice that there’s a lot of different sections already on the page. 


We have a section for the navigation, and about a block, some services, a portfolio, a call to action, a contact block, and a footer.


While there’s different content in all these sections, the sections themselves are similar in structure. They all have roughly the same set of HTML tags – just different CSS classes assigned to them.


The best way to modify the page to fit your needs is to go through the blocks one by one and experiment by changing things around.


9. Fine-Tune Colors and Fonts


Changing colors or fonts is very easy to do in HTML and CSS. The simplest thing you can do is assign some in-line styling to an HTML tag. 

For example:

<p style="color: #FF0000;">Red text</p>

In HTML, colors are represented by their hex values like “#FF0000” is red. There would be a table for all other standard colors.


A better way to assign colors is to do it via the CSS stylesheet. 


For example, to get the same effect as the code above, we could put this in our CSS stylesheet:

  1. {
  2. color: #FF0000;
  3. }

And then use the following piece of HTML code in the main document:

<p class="red">Red text</p>


This second method is basically how things are done in Bootstrap.


To change the color of any text on the page, first find the tag responsible for styling that text, and then go into the stylesheet and modify the corresponding class, or create a new class.


10. Create Additional Pages


Now that you have the homepage customized, it’s time to start working on some additional pages and then link them to the homepage.


When creating a website with HTML and CSS, you can build any number of sub-pages and then link them all together.


Here are some of the common pages that most websites need:

  • about page
  • contact
  • portfolio
  • products/services
  • team
  • policies (privacy policy, terms, etc.)


Follow the steps:


1. Start With the Layout

When building a new web page, the first decision you have to make is what you want the layout to be.


2. Build a New Page

The easiest way to start working on a new page is to duplicate an existing page and use it as a template.

Example: Create a copy of the index.html file and rename it about.html.


3. Link to the New Page

With the new page done, let’s now link it from the homepage (the index.html  file). Naturally, the best place to add this link is in the navigation menu




Share this Post:
You can work quite hard, in particular online, and do quite well independently, but if you really want to grow you need points of leverage and most of them come from knowing people.

Related Posts:

Get Free Consultation with our Expert.

Our HeadquartersC - 803, Noida One Tower, Sector 62 Noida, Uttar Pradesh 201301

Dubai OfficeBoulevard Plaza Tower 2 - Emaar Dubai

Saudi Arabia5460 Alyasmin Riyadh 12312 3224, Kingdom of Saudi Arabia

Canada5765, Earlscourt Crescent, Ottawa, ON K4M 1K2, Canada

Speak to Us+91-844816-2830

Make a Video

Follow on Instagram23k Followers