Scribd
Upload
108 views32 pages

Website Do

Uploaded by

Stanley Muteranduwa
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
108 views32 pages

Website Do

Uploaded by

Stanley Muteranduwa
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 32

Make A Simple Website using HTML

and CSS | Free Source Code


CodingLabDecemb 01, 20209 Comments

 Facebook
 Twitter


How can I make a beautiful website using HTML and CSS?


After watching and reading the following video and article, you will definitely be able to create
beautiful websites using HTML and CSS as an image.

Hello, friends today in this blog I will teach you how to Create A Website in HTML and CSS
Only. Earlier I have shared a blog about a Complete Personal Portfolio Website using HTML
CSS & JavaScript and now I'm going to create a simple website.

What is a Website?
A website is a combination of several web pages of codes, and hyperlinks,  and designs. There
are various types of websites like E-commerce websites, Portfolio websites, magazines, or Social
Media Websites actually blog is also a website. The website can be used for educational or
marketing and other purposes. Websites have no limited boundaries.

How can I make my website attractive?


To make a website beautiful and attractive you need to follow the following steps:

 Take simple colors for your website.


 Use a maximum of 3 to 4 color
 Make Website Responsive (Fite in any screen sizes devices)
 Try To use the same sizes and font family for text.
 Keep essential navigation links inside the navigation bar

If you are feeling difficulty with what I'm saying then you can watch the full video tutorial of this
program [Create A Website Design], which I have given below.

Make A Simple Website using HTML and CSS | Video Tutorial

I have provided all the HTML, CSS code files of this website below, before jumping on the
source code file, you need to know some basics of this.

As you have seen in this tutorial [Website Desing], first there is a full-screen size image. On the
top left side there is a logo of my youtube channel as a CodingLab, On the right top side there are
some hyperlinks with hover animation, and in the center, there is a two-button with hover
animation. As you have seen when that hyperlinks and buttons are covered white background
appears with little animation, hyperlinks, and button text color changed into black.

If you have general knowledge about HTML & CSS then you can easily create this Website
Design or if you have knowledge about JavaScript then you can add other functions as per your
need. For those friends who are feeling difficulty creating this program, I will provide full source
code files of this program[Create A Website in HTML & CSS Only]. 

You Might Like This:


 Simple Portfolio Website
 Responsive Navigation Menu
 Animated Side Navigation Bar
 Responsive Footer For Website

Simple Website using HTML and CSS | Free Source Code


To get the given HTML and CSS codes, first of all, you need to create two files, one is an HTML
file and another is a CSS file after creating these two files you can easily copy-paste the given
codes in your files. You can also directly download the source code file from the given download
button.

How To Create Website a Website Using HTML Code?


Create an HTML file on your computer with the name of index.html and copy-paste the
following codes in your document.

HTML CODE:

<!DOCTYPE html>
<!-- Created By CodingNepal - www.codingnepalweb.com -->
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!------<title> Website Layout | CodingLab</title>------>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/5.15.2/css/all.min.css"/>
</head>
<body>
<nav>
<div class="menu">
<div class="logo">
<a href="#">CodingLab</a>
</div>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Feedback</a></li>
</ul>
</div>
</nav>
<div class="img"></div>
<div class="center">
<div class="title">Create Amazing Website</div>
<div class="sub_title">Pure HTML & CSS Only</div>
<div class="btns">
<button>Learn More</button>
<button>Subscribe</button>
</div>
</div>
</body>
</html>

Copy Codes

How To design a website in CSS?


Create a CSS file with the name of style.css and copy-paste the following codes in your
document. You have to keep the HTML and CSS files the same file.

CSS CODE:

@import url('https://fonts.googleapis.com/css2?
family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins',sans-serif;
}
::selection{
color: #000;
background: #fff;
}
nav{
position: fixed;
background: #1b1b1b;
width: 100%;
padding: 10px 0;
z-index: 12;
}
nav .menu{
max-width: 1250px;
margin: auto;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px;
}
.menu .logo a{
text-decoration: none;
color: #fff;
font-size: 35px;
font-weight: 600;
}
.menu ul{
display: inline-flex;
}
.menu ul li{
list-style: none;
margin-left: 7px;
}
.menu ul li:first-child{
margin-left: 0px;
}
.menu ul li a{
text-decoration: none;
color: #fff;
font-size: 18px;
font-weight: 500;
padding: 8px 15px;
border-radius: 5px;
transition: all 0.3s ease;
}
.menu ul li a:hover{
background: #fff;
color: black;
}
.img{
background: url('img3.jpg')no-repeat;
width: 100%;
height: 100vh;
background-size: cover;
background-position: center;
position: relative;
}
.img::before{
content: '';
position: absolute;
height: 100%;
width: 100%;
background: rgba(0, 0, 0, 0.4);
}
.center{
position: absolute;
top: 52%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
padding: 0 20px;
text-align: center;
}
.center .title{
color: #fff;
font-size: 55px;
font-weight: 600;
}
.center .sub_title{
color: #fff;
font-size: 52px;
font-weight: 600;
}
.center .btns{
margin-top: 20px;
}
.center .btns button{
height: 55px;
width: 170px;
border-radius: 5px;
border: none;
margin: 0 10px;
border: 2px solid white;
font-size: 20px;
font-weight: 500;
padding: 0 10px;
cursor: pointer;
outline: none;
transition: all 0.3s ease;
}
.center .btns button:first-child{
color: #fff;
background: none;
}
.btns button:first-child:hover{
background: white;
color: black;
}
.center .btns button:last-child{
background: white;
color: black;
}

Copy Codes

Simple website Download HTML CSS Source Code. You can also directly download all source
code from the following download button.

Download Code Files

Blog »
How to create website using HTML &
CSS (+Copy/Paste code)

Andy MathewsAugust 21, 2020


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 of the most popular
methods used in 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 also: Coding Challenge


Websites To Practice and Learn Coding in HTML & CSS
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.
If you would like to take your coding to another level, we
recommend these websites:

 Code School – great for beginners (10 days FREE trial)


 Codecademy – learn to code with FREE plan or PRO
plan starting from $15 per month
 freeCodeCamp – coding academy, available FREE
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.

READ  Everything You Need to Know About PC Drivers

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.

Check out how to create a


website with WordPress step by step.
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.
READ  The Importance of a Website Design for Your Business (2021)

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.

READ  Best 10 SaaS Services for Creating an Online Portfolio (2021)

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!

We hope you found this tutorial on how to create a website in


HTML and CSS useful and you have practices and learned some
basics. To keep improving, we suggest visiting a link about to
coding challenge website where you can practice various types of
coding exercises.

If you have any other suggestions or feedback feel free to add a


comment in the section below. We highly appreciate any advice.
CategoriesBlog, Web Design
Leave a Comment

Comment
Name EmailWebsite

 Save my name, email, and website in this browser for the next
time I comment.

Post Comment

You might also like