How To Create Website Using HTML and CSS (+code)

0 809

In the millennium era, websites are considered one of the most powerful tools in gathering information. With the increasing usage of the internet, websites are proven to be a powerful media to reach thousands of people regardless of the place and time. This is why, websites are also one the most popular methods used in the modern-day business, especially in the field of advertising.

Designing websites can be done using various methods. Though it may seem complicated at first, it is definitely possible to create your own website just like how it is done by the webmasters in a web design company. For further assistance, you can visit Maxburst.com.

First and foremost, it is important to understand that a website is a collection of many different web pages consisting of different information. As an illustration, a website is a book with web pages as its chapters. Therefore, designing a whole website will take one web page done at a time. 

Check out how to create a website with WordPress step by step.

Now, if you think that you are still miles away from your first step of building your own website, no worries! Without confusing you with any technicalities, this article aims to guide you through the step-by-step process of creating a simple web page that eventually forms your website, using two most dominant computer languages: HTML, used for creating the web page’s contents, and CSS for styling the appearance of the web pages.

Drafting a Layout

Before starting with any line of code, the first thing you have to do is to create an idea of what your website is going to be about, and how it will look like, then write it down in a piece of paper or type it on your computer.

It doesn’t have to look fancy or sophisticated, because the point is to have a design that will later be brought into realization.

Take for an example, we are making a website for a web design company called WEBCODE:

The above example is just a simple web page design consisting of the header/navigation bar and three sections containing some information, and a footer regarding the copyright. 

We can always start with something simple, and make something interesting out of it.

Creating the HTML and CSS Document Structure

After having an idea of what the website is about and what it looks like, the first thing you would have to prepare is the HTML and CSS files. These files can be created by opening a plain text editor of your choosing, for example, “Notepad” for Windows, TextWrangler for Mac, or Sublime Text. In this particular point, the Codecademy has shown some valuable information.

Microsoft Word and Pages are not suitable for code writing as they are rich text editors.

Save the plain text documents as “index.html”. Then, create another one and save it as “style.css”.

Setting up the Basic HTML Code

First, let us set up the very basic code that is usually used to create a website. These codes are usually called the boilerplate and are commonly used in almost all web pages out there.

Open your HTML file using the text editor and try pasting these codes:

<!DOCTYPE html>

<html>

<head>

<title>WEBCODE</title>

<link rel=”stylesheet” href=”style.css”>

</head>

<body>

<h1>Look! It’s working! :)</h1>

</body>

</html>

After saving the text document, try it out and open it in a web browser to see if it’s working.

Look! You just successfully wrote your first lines of code!

Adding the Elements

If you’re finished with the boilerplate, now let us add some elements in the web page just like what you have planned in your draft. This is done by adding some semantic elements like <header>, <main>, <section>, and <footer>.

Try opening your HTML file and replace your previous code with these ones:

<!DOCTYPE html>

<html>

<head>

<title>WEBCODE</title>

<link rel=”stylesheet” href=”style.css”>

</head>

<body>

<header>

 

</header>

<main>

<section id=”hero”>

 

</section>

<section id=”about”>

 

</section>

<section id=”contact”>

 

</section>

</main>

<footer>

 

</footer>

</body>

</html>

Since we are only creating sections of the page, you will not see anything when you open the file in the browser.

Writing HTML Contents

Just like the saying “what are songs without lyrics”, the same thing goes to websites: it’s all mundane without contents. 

If you are ready with your website contents, now it’s the time to write them on your page. But if you are not, you may write some simulated contents first, and you can change that later.

Open your HTML file and replace your code with below HTML, in which some contents are added:

<!DOCTYPE html>

<html>

<head>

<title>WEBCODE</title>

<link rel=”stylesheet” href=”style.css”>

</head>

<body>

<header>

<img src=”https://scontent.fcgk6-1.fna.fbcdn.net/v/t1.0-9/60687273_10219095505969338_402358832711335936_n.jpg?_nc_cat=101&_nc_ht=scontent.fcgk6-1.fna&oh=bc500e0d8e0e21b948dcea0ae57f04c3&oe=5D5F1A09” class=”profile-img”>

<nav>

<ul>

<li><a href=”#hero”>Home</a></li>

<li><a href=”#about”>About Us</a></li>

<li><a href=”#contact”>Contact Us</a></li>

</ul>

</nav>

</header>

<main>

<section id=”hero”>

<div class=”section-inner”>

<img src=”https://scontent.fcgk6-1.fna.fbcdn.net/v/t1.0-9/60687273_10219095505969338_402358832711335936_n.jpg?_nc_cat=101&_nc_ht=scontent.fcgk6-1.fna&oh=bc500e0d8e0e21b948dcea0ae57f04c3&oe=5D5F1A09” class=”profile-img”>

<h1>WEBCODE</h1>

</div>

</section>

<section id=”about”>

<div class=”section-inner”>

<h2>About Us</h2>

<p>We provide the best web design for you since 2008.</p>

<h3>Awards and Achievements</h3>

<ul>

<li>The Best Web Company, 2009</li>

<li>Most Popular Web Company, 2012</li>

<li>The Best Web Design, 2018</li>

</ul>

</div>

</section>

<section id=”contact”>

<div class=”section-inner”>

<h2>Contact Us</h2>

<p>You can find us on:</p>

<ul>

<li><a href=”https://twitter.com/webcode“>Twitter</a></li>

<li><a href=”https://www.facebook.com/user/webcode“>Facebook</a></li>

<li><a href=”https://www.instagram.com/webcodedotcom/“>Instagram</a></li>

</ul>

<p>Or, send us an email on <a href=”mailto:[email protected]“></a>.</p>

</div>

</section>

</main>

<footer>

© Copyright WEBCODE, 2019

</footer>

</body>

</html>

The above blue-colored texts are contents that are non-code and changeable should you have anything different in mind.

Save the document, and try opening it in your browser. If you get everything right, you will have the following contents added to your website:

Changing the Image URL

The red-colored texts shown in step #5 HTML code are the links of the pictures that you want to insert on the web page.

To acquire the URL of the image, you would need to upload your picture to an image hosting site such as Flickr, Google Photo, Facebook, or any image hosting site you have in mind.

After finished uploading, click on the picture to have it opened, then right-click on it, and choose “Open Image in New Tab”. Copy the URL shown on the address bar, and paste it to replace the red-colored texts.

Now we are done with HTML and your web page should have the intended HMTL contents just like what we have drafted in the layout.

Adding CSS Basic Layout

After finishing with the HTML contents, your web page is ready to read. However, one would also think that such an appearance may seem a little bit plain. We wouldn’t want to publish a website that will not attract visitors now, would we think this article might be helpful for you to learn more about how to increase traffic to your website.

This is where the CSS comes in!

CSS is a coding language responsible for styling our web page. By using CSS, we can add designs and layout to the web pages and share the styles to all elements and pages.

Firstly, we will work on the layout of the webpage to make it look like the one we have drafted. Therefore, for this step, we will work more with properties like width, height, margin, padding, position, and display.

Open your “style.css” text document, and add these CSS codes below:

body {

margin: 0;

margin-top: 50px;

}

 

header {

display: flex;

position: fixed;

top: 0;

left: 0;

right: 0;

height: 50px;

line-height: 50px;

background-color: #eee;

}

 

header * {

display: inline;

height: 50px;

}

 

headerul {

padding: 0;

}

 

header li {

margin-left: 20px;

}

 

section {

height: 100vh;

border: 1px solid black;

display: flex;

justify-content: center;

align-items: center;

text-align: center;

}

 

#hero .profile-img {

width: 300px;

}

 

footer {

text-align: center;

padding: 50px;

}

The above codes arrange the layouts to make sure that the sections are set to 100% viewport height, which basically means filling the size of your screen, to fix the position of the header and arrange the navigation bar in the header, as well as use flexboxes to center the contents in the sections.

As a result, we would have our web page below:

The web page is slowly turning into what we have expected, isn’t it?

Adding CSS styles

Now that the contents have all properly placed, we can add some formats to style the web page.

Open your CSS file and revise it according to below CSS code:

body {

margin: 0;

margin-top: 50px;

font-family: sans-serif; /* Add this line */

}

 

header {

display: flex;

position: fixed;

top: 0;

left: 0;

right: 0;

height: 50px;

line-height: 50px;

background-color: #eee;

}

 

header * {

display: inline;

height: 50px;

}

 

headerul {

padding: 0;

}

 

header li {

margin-left: 20px;

}

 

section {

height: 100vh;

border: 1px solid black;

display: flex;

justify-content: center;

align-items: center;

text-align: center;

}

 

#hero .profile-img {

width: 300px;

border-radius: 50%; /* Add this line */

}

 

footer {

text-align: center;

padding: 50px;

}

 

/* Add everything below here */

 

#hero h1 {

font-size: 3em;

}

 

section h2 {

font-size: 2.5em;

}

 

section h3 {

font-size: 1.5em;

}

 

header a {

text-decoration: none;

color: black;

}

Now open your web page again and you will see that the font type and sizes have changed, and the default styling from the header links has also changed.

Let us enhance the web page appearance even more!

Colors and Backgrounds

Now we are going to add some final touch of colors and background to our web page to make it more appealing. This article on Jimdo contains useful information about choosing the best background for your website.

Before typing more codes, you may want to upload the pictures of your choice to the image hosting site just like it is mentioned on step #6 and copy the URL of the picture.

Revise the CSS document according to the following CSS code:

body {

margin: 0;

margin-top: 50px;

font-family: sans-serif;

}

 

header {

display: flex;

position: fixed;

top: 0;

left: 0;

right: 0;

height: 50px;

line-height: 50px;

background-color: #eee;

}

 

header * {

display: inline;

height: 50px;

}

 

headerul {

padding: 0;

}

 

header li {

margin-left: 20px;

}

 

section {

height: 100vh;

border: 1px solid black;

display: flex;

justify-content: center;

align-items: center;

text-align: center;

 

background-size: cover; /* Add this line */

background-position: center center; /* Add this line */

background-repeat: no-repeat; /* Add this line */

background-attachment: fixed; /* Add this line */

}

 

#hero .profile-img {

width: 300px;

border-radius: 50%;

}

 

footer {

text-align: center;

padding: 50px;

}

 

#hero h1 {

font-size: 3em;

}

 

section h2 {

font-size: 2.5em;

}

 

section h3 {

font-size: 1.5em;

}

 

header a {

text-decoration: none;

color: black;

}

/* Add everything below here */

#hero {

    background-image: linear-gradient(rgba(255,255,255,0.75),rgba(255,255,255,0.75)), url(‘https://scontent.fcgk18-2.fna.fbcdn.net/v/t1.0-9/60903720_10219096913924536_7793117871105638400_n.jpg?_nc_cat=104&_nc_ht=scontent.fcgk18-2.fna&oh=0699be50b4ae038bf8f3da4b5bbced8f&oe=5D58596E);

}

 

#about {

    background-image: linear-gradient(rgba(255,255,255,0.75),rgba(255,255,255,0.75)), url(‘https://scontent.fcgk18-2.fna.fbcdn.net/v/t1.0-9/60232304_10219096916964612_1350888178050924544_n.jpg?_nc_cat=100&_nc_ht=scontent.fcgk18-2.fna&oh=72784f19fd9cf8cf9ca99d7dfc53735b&oe=5D54C31C‘);

}

 

#contact {

    background-image: linear-gradient(rgba(255,255,255,0.75),rgba(255,255,255,0.75)), url(‘https://scontent-sin6-1.xx.fbcdn.net/v/t1.0-9/60586842_10219096915844584_3123709442135162880_n.jpg?_nc_cat=107&_nc_ht=scontent-sin6-1.xx&oh=870f6e76c4eae89bba33c7ab76d37127&oe=5D554E78‘);

}

Paste the URLs of your pictures into the green-colored texts above to change the background into your desired pictures.

By entering the above codes, we have modified the background images and adding a semi-transparent overlay on top by using the code linear-gradient(rgba(255,255,255,0.75),rgba(255,255,255,0.75)), before the image URL (‘image.jpg’)to make the texts more readable.

If everything was entered right, our web page is finished and good to go:

Congratulations! Your first web page is completed!

Check and recheck!

Computer language is complex. There are many codes to enter and there are cases where codes are mistyped and contents are not inserted right. It is always recommended that you check and recheck before publishing your website.

As we all know, once the content is posted on the internet, it stays out there.

Once you are done rechecking, you may publish your webpage and show it off. 

Putting it briefly, designing your own website is not really that complicated and frightening as long as we are willing to learn. Please note that the above article emphasizes more on the step-by-step guide to creating a web page using simple HTML and CSS code rather than focusing on the technicality of the code.

Stay confident and keep learning!

Leave A Reply

Your email address will not be published.