How to create a simple web page using html and css 2019

     create a simple web page using HTML and CSS

How to create a simple web page using html and css 2019

 Download File

 you will learn to create a simple web page using HTML and CSS in notepad or any text editor, You will learn to create the header part of the website, I will show you how to add background image in the HTML website,
Create a navigation menu using HTML. This is a complete tutorial for beginners, who want to learn HTML & CSS website development.

Here are the steps in this HTML website :

1. Create an HTML file and CSS file in a folder

Create a folder >>create an( index.html) file Using Text Editor>>now Create a New Folder Name(Style.css)>>open folder and create >>>style.css file using text editor

After Creating files

2. Link CSS file with HTML

👇👇👇👇👇👇

Link CSS file with HTML  Using <link> Tag  <link rel=”stylesheet” type=”text/css” href=”css/style.css”>

Link CSS file with HTML

After Link files  now Add

3. Add background image in HTML website 

Add background image in css website  using

👇👇👇👇👇👇

header{
background-image: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url(../background.jpg);
height: 100vh;
background-size: cover;
background-position: center;
}

You must save your image in the same folder and write the complete path of the image in CSS file to add image in website 

4. Create navigation menu in HTML website

Create a <div> Tag Under <body> Tag now Create  <ul> Under <div> Tag>>>>Create  Class Name “active”

👇👇👇👇👇👇

</div>
<ul>
<li class=”active”><a href=”#”>Home</a></li>
/ul>
</div>

After

5. Style navigation menu with Css

create UL tag navigation menu using this code

👇👇👇👇👇👇

ul{
float: right;
list-style-type: none;
margin-top: 25px;

}
ul li {
display: inline-block;
}
ul li a{
text-decoration: none;
color: #fff;
padding: 5px 20px;
border: 1px solid transparent;
transition: 0.5s ease;
}

 

 

6. Change the Image opacity using CSS

add  header tag  and using this code

👇👇👇👇👇👇

header{
background-image: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url(../background.jpg);
height: 100vh;
}

7. Add hover effect using HTML and CSS

add hover Effect on CSS file using this code

👇👇👇👇👇👇

ul li a:hover{
background-color: #fff;
color: #000;
}

7. Add Logo in website using HTML & CSS

Add Your Logo on Html File Using This code

create New <div> Tage Under the <header> Tag Create Class”logo”

👇👇👇👇👇👇

<div class=”main”>
<div class=”logo”>
<img src=”logo.png”>
</div>

8. style Logo in website using CSS

Style Your Using .logo class Use This code

👇👇👇👇👇👇

.logo img{
float: left;
width: 150px;
height: auto;
margin-top: 5px;
}

9. Add title text (your text) in Website

Creat <div> class under the Div class create <H1> Tag

👇👇👇👇👇👇

<div class=”title”>
<h1>Your Text </h1>
</div>

10. Create Button in HTML and CSS

Creat <div> yage And class “button” add Text using <a> Class name BTN

Tag <a href=”Thanks.html” class=”btn”></a>

👇👇👇👇👇👇👇👇👇👇👇👇

          using This Codes

HTML

<div class=”button”>
<a href=”Thanks.html” class=”btn”>WATCH VIDEO</a>
<a href=”About.html” class=”btn”>ABOUT US</a>
</div>

Open style.css file use( .button & .btn) class and style button just  like👇

👇👇👇👇👇👇

                                 CSS

.button{
position: absolute;
top: 62%;
left: 50%;
transform: translate(-50%,-50%);
}
.btn{
border: 1px solid #fff;
padding: 10px 30px;
color: #fff;
text-decoration: none;
transition: 0.5s ease;
}
.btn:hover{
background-color: #fff;
color: #000;
}

 

          Now the Header part of the website has been completed using HTML and CSS

 

                                                                         Thank You

 

Leave a Reply

Close Menu