How To Create A Website Using HTML And CSS Step By Step Website Tutorial

Web dev
Views 2 218 767
96% 21 388 800

How To Create A Website Using HTML And CSS Step By Step Website Tutorial.
In this videos you will learn to create a website 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 HTML website, Create navigation menu using html. This is a complete tutorial for beginner, who want to learn HTML & CSS website development.
Here are the steps in this HTML website tutorial:
1. Create HTML file and CSS file in a folder
2. Link CSS file with HTML
3. Add background image in HTML website
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
5. Change the Image opacity in HTML website
6. Add hover effect using HTML and CSS
7. Add Logo in website using HTML & CSS
8. Add title text (welcome text) in Website
9. Create Button in HTML and CSS
Now the Header part of the website has been completed using HTML and CSS
Facebook Page : facebook.com/Rvwebtutorials/
Check some popular videos on my channel:
Awesome image hover effect with html and css - zoom in and out || web dev:-
css positioning explained with examples (static,relative,absolute,fixed):-
css image hover effect - Css Tutorial - Css3 Hover Effect:-
how to change text selection color in html and css:-
how to make Simple css3 loading animation:-
How to create contact form using html and css:-
How to make fullscreen video background using html and css:-
Advance text shadow hover effect using html and css:-
How to create fixed navigation bar using html and css:-
how to create animated Dropdown menu using html and css:-
how to create hero image using html and css:-
simple parallax effect using html and css:-
How to create login form using Html and css:-
How to create animated search bar using Html and css:-
Please watch: "Responsive Image Slider | HTML & CSS"

Published on


Mar 29, 2018




Loading link...

Add to:

My playlist
Watch later
Comments 100
mung bawi
mung bawi Hour ago
Thankyou so much this video help me a lot hope for next more advance video tutorials
Hansy 17 hours ago
thanks for sharing this video really helpful for me
Zishan Raza
Zishan Raza 21 hour ago
sir ap transition Q use kr rhe hai samjh me nhi aaya
Neel Adke
Neel Adke 22 hours ago
Aisa code to kahi se bhi mil jayega , atleast jo tags use kr rhe ho uska meaning to batao.
John Alas
John Alas 23 hours ago
Can someone help me how to link the buttons(Home, Services, About etc.)?
DragonShadow Day ago
when i use linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)) the whole page goes white , why is it so ???
Farisio Nadhilsyah
this is help a newbie like me . like 100% helpful. atleast i tried how to do this and that. thank u so much :-( god bless u sir
Emeka Ekwulugo
the step at 3:25 - when I open in chrome browser nothing is showing up - I'm double checking and I have everything correct like in the video. Help anyone?
Levon Barkhudaryan
pls, Web dev send us the background image.
Levon Barkhudaryan
Web dev give us the picture.
Jean Villanueva
Jean Villanueva 2 days ago
what compiler are you using?
Sahil Surwase sci B,33
thanks for the vedio
Abdulfatah Khatri
Dear which software is best for web developing and which you use ln in this video?
Prajakta Pradhan
Prajakta Pradhan 2 days ago
Can someone help me with that navigation bar hover thing cuz that didn't work for me.
Emeka Ekwulugo
make sure you save the file before opening in browser
Fʋʀƴ Rʌvɘŋ
Fʋʀƴ Rʌvɘŋ 2 days ago
Plz give that code to copy plz
Mohammed Sayfuddin
Excellent tutorial for me. Thank you. 6:12
AVTU YiZhan Believer
I also haven't any idea about what you said. But the video is superb.
Fʋʀƴ Rʌvɘŋ
Fʋʀƴ Rʌvɘŋ 3 days ago
Which text editor u are using
Fʋʀƴ Rʌvɘŋ
Fʋʀƴ Rʌvɘŋ 3 days ago
Ok thanks
Web dev
Web dev 3 days ago
Sublime text
Nurken Rahimov
Nurken Rahimov 3 days ago
С сегодняшнего дня ты мне бро
Muhammed Ahnuf
Muhammed Ahnuf 3 days ago
Great video! Thank you for explaining!
Jan Sůsa
Jan Sůsa 4 days ago
why is not working
Feroza fari
Feroza fari 4 days ago
App ny picture ka size ki rakha hai.
TechzBuddy 4 days ago
Can you send the link of this websit and how it looks
TGS - The Gamer Sivaguru
intro template pls
bro it is not showing border
R N K by raunak
R N K by raunak 4 days ago
Which text editor is being used in this video
Feroza fari
Feroza fari 5 days ago
Ap ny header tag q apply kia hai...
bro the bgimage is not appearing
s bro
Ashish Bajpai
Ashish Bajpai 5 days ago
I have seen other tutorials but you are amazing. You created this page so easily and your way of explaining things is excellent.
Reetu Kumari
Reetu Kumari 5 days ago
Is this going to be responsive
Carlos Alberto Araujo
Yes, you should speak slower, to make clear what you say. About the video... well... there is a general tendency to FLY all over the screen from everywhere to everywhere. You should pay attention to the so different people who hear you, and SEE the more or less skills you have when you teach anyone. NOT to criticize you... ONLY to make your teachings MORE EFFECTIVE and FOLLOWABLE.
Swittie Lovely
Swittie Lovely 6 days ago
Even I don't know your language, but your tutorial and steps shown in the video made me understand. Salute!!!
Sankhat Mayur
Sankhat Mayur 6 days ago
Html file and css file not linked please
Filim by Filem
Filim by Filem 6 days ago
Sir which website you was doing coding please tell
hustle work
hustle work 7 days ago
help: float: right; is not working for me, can anyone help me?
hustle work
hustle work 7 days ago
I found out the solution, I in properly added that tag in another element. 😂
Raban Kathariya
Raban Kathariya 7 days ago
thank you
ashok jaiswal
ashok jaiswal 8 days ago
Sarmera hidden mein image nahin ho raha hai iske liye video banakar bhejiye sar
vince 8 days ago
Love the way I understand everything about this video without freakin understand what you say, ahah . Thanx mate!
Gamer (Crazy)
Gamer (Crazy) 9 days ago
Please reply My background image is not showing up please help me and I'm using mac. And how to convert jpeg in jpg
Suman Soni
Suman Soni 9 days ago
Ausome bro it really helpfull to max developers
Epic T
Epic T 9 days ago
Good video ! As an improvement I would suggest explaining what the CSS code does. eg transform:translate(50%,50%)
MARUF Rehman
MARUF Rehman 9 days ago
your speak transition is 0.9s. i just impressed. thanks
Xyrelle Mae Dela Cruz
what html tool is used?
Web dev
Web dev 4 days ago
Sublime text
Firoz Khan
Firoz Khan 10 days ago
One Word Review. "EXCELLENT" .👌🏻
MrAnimation 3377
MrAnimation 3377 10 days ago
Lol I'm part Pakistani so I happen to understand what he is saying. Lol I'm bilingual. anyone else?
Rubayed Islam
Rubayed Islam 10 days ago
Faizullah Reshtin
Faizullah Reshtin 10 days ago
Sir, in my computer border and other colors doesn't work. What are the best problems?
Thitte Santosh
Thitte Santosh 10 days ago
Bro give code in description
Gagandeep Kaur
Gagandeep Kaur 10 days ago
sir meri image ku ni lag rhi CSS mein
Gagandeep Kaur
Gagandeep Kaur 9 days ago
@Web dev Instagram id
Web dev
Web dev 10 days ago
Msg me on instagram i will solve your problem
Gagandeep Kaur
Gagandeep Kaur 10 days ago
rgt hai path ye diya
Gagandeep Kaur
Gagandeep Kaur 10 days ago
Rishi Ray
Rishi Ray 12 days ago
Application app plz
Web dev
Web dev 11 days ago
Sublime text
Tief Software Truth
thank you +1
71 Hritik Pawar
71 Hritik Pawar 13 days ago
sir height di to puri image gayb ho rhi he . help me
Web dev
Web dev 13 days ago
Instagram pe msg kro bro
COC fans forever
COC fans forever 14 days ago
Bindu Sudhi
Bindu Sudhi 15 days ago
From where did you get a transparent logo?
Nutan kumari
Nutan kumari 15 days ago
which app do you use
Web dev
Web dev 15 days ago
Nutan kumari
Nutan kumari 15 days ago
@Web dev thank' s mN I was not able to identify the app. Are you an Indian
Web dev
Web dev 15 days ago
Sublime text
Bogdan Pavel
Bogdan Pavel 16 days ago
Please help me at adding the image on cover. It doesn't apply to me.
Web dev
Web dev 15 days ago
Msg me on instagram i will solve your problem
Jobaer bhuiyan
Jobaer bhuiyan 16 days ago
Your thousand times better then my professor bro
Web dev
Web dev 15 days ago
Thanks for your appreciation keep supporting
Uppu Balaji
Uppu Balaji 17 days ago
Plz send me the link ie.. text editor app
Karthik Gowda
Karthik Gowda 17 days ago
Tool name bro?
Megha Sharma
Megha Sharma 18 days ago
sir can you make next part of this vedio by adding further detail in nav bar parts ????
Puja Sah
Puja Sah 18 days ago
Universal sittler?? Plz tell me
Maryam Saffiyah
Maryam Saffiyah 18 days ago
Okay idk who will saw this but I need some help, I need to learn how to make a website for a school project you can say.. but I don't know what app to use and how.. I think I'll probably use HTML style and I'm tryna find some easy ways to design it.. be the background colours and some photo is enough for me.. thanks for anyone in advance who replies to me :))
SAIM ALI VLOGS 18 days ago
Sir when i put my background tag 1.jpg with ../ nothing change ?????
SAIM ALI VLOGS 11 days ago
@Web dev Web dev guru is your id
Web dev
Web dev 18 days ago
Msg me on instagram i will solve your problem
gamer_ lmfao
gamer_ lmfao 18 days ago
How to publish the file is html it isnt site it doesn't have .in or .com or any other domains not helpful video
Uttam Paul
Uttam Paul 19 days ago
Awesome tutorial 👍👍👍👍tnx
yasin arafat
yasin arafat 19 days ago
Brother where are the other part of this video.
Auruds 19 days ago
Thanks for the tutorial^^
DEVILVH singh 19 days ago
how to add header in css i hv been coding but there is no change can anyone explain me how to take header part in styling i tried copying its not working
prizm cp
prizm cp 19 days ago
Bro can I you send thr codes to my e-mail sifatomaik4@gmail.com plz plz
Neeraj Chauhan
Neeraj Chauhan 19 days ago
Thanks bhai 💯
ADARSH KICHUz 20 days ago
HTML is not running in sublime text3
yasin arafat
yasin arafat 20 days ago
Brother i can't include background picture and logo in note pad ++. Please reply me.
yasin arafat
yasin arafat 20 days ago
@Web dev okk brother
Web dev
Web dev 20 days ago
Msg me on instagram
yasin arafat
yasin arafat 20 days ago
Brother in the style.css part (margin padding font family) etc are not working. I am doing this in note pad ++. Now what i should do in this situation. In the Website it shows only Home services Gallery About Contact only.
Lachlan Peters
Lachlan Peters 21 day ago
Thank you so much, this video honestly helped me heaps. We should have more people like you explaining how to clearly code a website!
Ashok Kumar
Ashok Kumar 21 day ago
Bro what is the text editor name
Web dev
Web dev 20 days ago
Sublime text
Soorya Saan
Soorya Saan 22 days ago
Tku sir
Nuzaima Tahiya
Nuzaima Tahiya 22 days ago
Please help, the background won't show up and the color for the text in the navigation bar isn't working(the part where it's supposed to turn black when you hover over it) also the transition isn't working.
Raheel Abbasi
Raheel Abbasi 22 days ago
sir ya browser ma open kar raha lkn kuch show nai ho raha
Abrar Sharief
Abrar Sharief 23 days ago
Is it responsive ???
zimeya sumon
zimeya sumon 23 days ago
most helpful tutorials tnxs
M Z Hussain Razu
M Z Hussain Razu 23 days ago
bro,why don’t show image. I wrote the css same as u
ki kee
ki kee 20 days ago
u need image in your working directory ( in your project file)
#Tech #Innovation
#Tech #Innovation 23 days ago
awesome video #Tech #Innovation #ajay
Sarju Panchal
Sarju Panchal 24 days ago
why trnaofrm was used??
AL AMIN 24 days ago
Is it resonsive?
rajkumar rathore
rajkumar rathore 24 days ago
Nice bhai but, ey app kisme coding ker rhe ho me to notepad use kerta hu windows 7hai esme be work krega na
Abeer Sindhu
Abeer Sindhu 25 days ago
what app did you use
Soyayeb Hasan Safin
what is the text editors name?
Abhijeet Agrawal
Abhijeet Agrawal 25 days ago
Hi, Rajan amazing tutorial...I have done all this but now I am stuck ...how to add more pages...and how to link the gallery and other things ...please help..as I don't no anything related to this.
Nikhil Reddy
Nikhil Reddy 25 days ago
thank you bro its very easy to understand and to create nice explanation...in the same way can you make some vedios on java script please
Aadarsh Yadav
Aadarsh Yadav 25 days ago
Sir when I do refresh after adding the background image in the code editor it does not show any changes and the navigation bar also not moves to the left.And i also added ../ before the image and the refreshed the website bot nothing shown and I also use Sublime text editor 3 Please guide me to solve the problem
Lam Ine
Lam Ine 10 days ago
@Sarthak gamming Shit ! is it in sublime or the code ?
Sarthak gamming
Sarthak gamming 10 days ago
@Lam Ine same herw bro
Lam Ine
Lam Ine 11 days ago
same here ._.
Kyaa _Gaming
Kyaa _Gaming 25 days ago
Thanks Its very good tutorial i made perfect landing site for my blog website but please can you tell how can I make it responsive
Santhoshraju Mandapati
bro can i know from were did u download that text editor?can un send the link for me it will be very usefull for me.
sohel hakim
sohel hakim 26 days ago
so basically id have any idea in which text editor u r doin.
GOD SHUBHAM YT 26 days ago
Bhai konsa software tha ye code editing ka
Neetu with nice Tips
Sir! Very nice ND helpful video.
R Aa
R Aa 26 days ago
Thank youuuuu
Ziolo-Tech 27 days ago
thank u so much. It was so helpful.
Sunita Sharma
Sunita Sharma 27 days ago
bhai image is not coming
Rupam Laha
Rupam Laha 28 days ago
"Link CSS file with HTML" how to do this sir?
Ashii Syed
Ashii Syed 6 days ago
Give your insta I need to learn html
Web dev
Web dev 28 days ago
Msg me on instagram i will solve your problem
Nayaab Lakhani
Nayaab Lakhani 28 days ago
how did you make the logo transparent
Web dev
Web dev 28 days ago
Message me on instagram
Piyusha Gurung
Piyusha Gurung 28 days ago
Next videos
Learn CSS in 12 Minutes
Learn HTML in 12 Minutes