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

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 : / rvwebtutorials
=============********==============
Check some popular videos on my channel:
Awesome image hover effect with html and css - zoom in and out || web dev:-
• Awesome image hover ef...
----------------------------------------------
css positioning explained with examples (static,relative,absolute,fixed):-
• css positioning explai...
----------------------------------------------
css image hover effect - Css Tutorial - Css3 Hover Effect:-
• css image hover effect...
----------------------------------------------
how to change text selection color in html and css:-
• how to change text sel...
----------------------------------------------
how to make Simple css3 loading animation:-
• how to make Simple css...
----------------------------------------------
How to create contact form using html and css:-
• How to create contact ...
----------------------------------------------
How to make fullscreen video background using html and css:-
• How to make fullscreen...
----------------------------------------------
Advance text shadow hover effect using html and css:-
• Advance text shadow ho...
----------------------------------------------
How to create fixed navigation bar using html and css:-
• How to create fixed na...
----------------------------------------------
how to create animated Dropdown menu using html and css:-
• how to create Dropdown...
----------------------------------------------
how to create hero image using html and css:-
• how to create hero ima...
----------------------------------------------
simple parallax effect using html and css:-
• simple parallax effect...
----------------------------------------------
How to create login form using Html and css:-
• How to create login fo...
----------------------------------------------
How to create animated search bar using Html and css:-
• How to create animated...
~-~~-~~~-~~-~
Please watch: "Responsive Image Slider | HTML & CSS"
• Responsive Image Slide...
~-~~-~~~-~~-~

[@catninja4950]

Even tho we don't understand what this man is saying his video is very educational. It's 100% better than a guy speed running a website with non copyright music in the background.

[@fakihatajellie3817]

so true

[@orangedevrbx8102]

I understand him so props to me lol

[@wdns]

when indians dont need to say in _english_ to teach others

[@deskyee]

Lol

[@Aditya-rd1pw]

He is saying in 'Hindi' language ......

[@lep2525]

I have no idea what you’re saying, but this is one of the most helpful tutorials I’ve come across lol

[@webdev07]

Thanks

[@nikola6526]

@@webdev07 PROGRAM NAME?

[@nikola6526]

@@animealex3700 thank you mate

[@nikola6526]

@@animealex3700 how can i copy that header to be purple for me is just white i dont understand...

[@actuallyarnav]

@@nikola6526 #fff is the colour code for white.
for purple, it is #800080
just replace #fff with #800080 and you're good to go!

[@agamjotsingh7371]

Man! You don't know what value you given to my life as a programmer. I started in early 2020 nd now I m a Web + Mobile + backend = full stack dev. Just came accross searching for Web Dev cause I remembered you channel's name. Thanku for showing me the path to success all bcz of you. Really Glad to Find you again nd hear your voice that lead me to the success nd one more thing I got job too! Thanku Once again!

[@webdev07]

Thanks for you appreciation. keep supporting

[@CODERBEY]

Facebook Login Page Clone
czcams.com/video/n35UMG71DHU/video.html

[@nishantpacharne1569]

Back to 2020 ... I made my first web page by following this tutorial .... and guess what !? Its 2022 and Iam a full stack developer!

[@bluesea1769]

You don't have to know what the language he spoke,he made every steps brief and sleek👍. Don't judge the clip by its language.😁

[@divyshukla2751]

It's Hindi language ,from INDIA

[@user-xj7ms2hy7l]

Does class="active" do something special or i can name it "ass" for example?

[@chirilcugureanu1853]

@@user-xj7ms2hy7l You can name the class how you want in html, but remember to style it in css with the same name

[@Ansh...Upadhyay]

U

[@narendraseervi2623]

Its hindi language of INDIA

[@malkidrathnayake3361]

I'm from Sri Lanka and no matter what the language is. I got a lot of things from this video.. thank you so much ❤

[@AYT2024]

czcams.com/video/JgZMkfK-ynA/video.html

[@pratyakshamaheshwari8269]

This is HINDI Language, MOTHER tongue of most of the INDIANS.

[@21stfox60]

I am also from sri Lanka

[@pratyakshamaheshwari8269]

@@PandeyYaar oh really

[@pratyakshamaheshwari8269]

Well I am from Rajasthan and Everyone knows here.

[@aaravtripathi2615]

woww,when i tried to make my own website.I started following your steps,so came true.YOU ARE A WEBSITE DESIGNER!!!!!KEEP IT UP!!!!!!!!!

[@lotelenishikulo2386]

This was really useful, even though it is in different language I was still able to follow through. Thanks so much for creating it.

[@FreedomForKashmir]

i appreciate this effort to practically demonstrate rather than just giving lectures

[@Hondunu]

He does not need to speak English to teach you, you can be taught by watching it. I know the title is misleading but he actually does show you how it's done.

[@karannegi4293]

Video is not misleading we write in English and speak in both English and Hindi
Which means we speak hinglish

[@QS1597]

@@anasrifdi2756 why the random advertising nobody asked

[@aporti5019]

no u

[@Qweasdzxc912]

Awesome, love it! Thank you for the tutorial ! One of the most helpful videos for the front end, I have ever went through .

[@FRONTRUS]

*Covid-19* : Making Programmers Since 2020 🎓

[@DipMaster20]

Html isn't a programming language. it's a coding language or mark-up language.

[@randomstuffs9103]

@@DipMaster20 its only a markup language

[@justin-hurd]

I'm glad i can understand the coding, because even though the title is in english, not a full sentence of his was. but even if he did not speak English, his teaching was still very clean cut and straight to the point, so I'd rate it an 8/10.

[@80Vikram]

Please add "English Subtitles" as you deserve global audience. Keep up the great work man

[@AYT2024]

czcams.com/video/JgZMkfK-ynA/video.html

[@dev1489]

You can use captions if you cant understand

[@notsocath5371]

@@dev1489 thats the problem, captions are turned off, there are no options for captions there

[@killerqueen8040]

Fact

[@rinkuchorasiya4289]

etni english a aatih kya tuje..kataye angreej homriya h

[@lucylu184]

This is simply amazing. I clap to you. Thank you so much!

[@yangbengal3448]

Thank you! I've watch your vedio for like 5 times and still I don't know what you are talking about but your vedio is the one who save me from my project! Thank you do so much!🙏💛

[@jorjicat6318]

Didn't even need to speak the same language. Absolutely amazing tutorial. Perfect pace and everything was so so clear

[@techsimply4594]

Jorji Cat this is hindi language and he is indian

[@tinashechinyati6823]

This was one success story in my beginner journey to web development. Thanks a lot

[@md7986]

I remember this one, this video helped me even if I didn't understand na language. When I was in grade 11 it helped me on my project. Even now I'm 2nd year college now this was the easiest to understand. Thank you

[@pritam3185]

I sherched on youtube that, how to design a website...and youtube recommend me this....its soo helpfull and clear

[@ank_aks]

nice tutorial keep updating...👌👌

[@andersonmoore4944]

Seeing is believing. What I see, I believe more than what I hear. Thanks alot teacher.

[@uiworld3381]

See this Header czcams.com/video/5lJsfn-QnzY/video.html

[@himanshuop8]

Thank you man, I'm a beginner in programming and it was a great help. And I hope soon your channel becomes a great success👍🏼

[@arslan_abraham9328]

Nice Bro

[@kavitabhandari7450]

Learning on 14nov21..by skipping 6 videos... Much better then speedy videos.. It's my 1st practice...thank you so mch sir.

[@mrbeemee6325]

Better video I hve ever watched on internet regarding HTML thanks for sharing such a beautiful video hope you will sharing more stay blessed stay healthy

[@laortabo2815]

Thank u so much you can’t understand how much u helped me this is so beautiful I’m thankful!!!!

[@joetality5296]

Bro, every other tutorial did not work for me and they were in full English, but you genuinely made it so easy to follow and to understand. Thank you so much. I've been stressing so much about failing and starting but you helped me out a lot. Thank you so much.

[@webdev07]

Welcome

[@ekatanagrale2583]

Thank you...so much, I did my website without any error and understand properly,
very simply and smooth explanation.

[@AmandeepKaur-sd5dv]

Thanks its really effective for new designer

[@webdev07]

Welcome

[@sandipdas18]

Excellent. Boht bariya samjhye.. Thanks Sir.

[@webdev07]

Thanks bro

[@foodandliquid]

I was an old student of HTML, after watching and doing same as you said. created one website. #learned something.👍 Keep up doing this kind of videos.

[@reemaafreen579]

great learning method .very help ful video

[@KeilGaming.]

Thanks bro! Now I have my first Homepage of my site

[@abhay1893]

Very easy way explained. I understand a lot. I was trying to complete the assignment and hence searched many videos but finally, the search ended here successfully. Don't have enough words to say thank you. Thanks a lot.

[@AYT2024]

czcams.com/video/JgZMkfK-ynA/video.html

[@notYOURMIKEY]

All Indians Like This Vdo He Make videos of educate you people who don't know coding .Thanks MY Buddy

[@Kidzu_shows]

I recently learned css nd want to make webpage but I have no idea
After ur video I'm able to make webpage only using css nd html . ( Thanks man 💗)

[@supracosmic1925]

Really helpful, thank you. I always like to learn by watching others code.

[@uiworld3381]

See this Header czcams.com/video/5lJsfn-QnzY/video.html

[@nishantsharma4822]

Literally THE BEST!!
If someone even knows basic HTML, This tutorial is for you!
You're gonna learn through this video and a lil research through browser..
The same i was expecting from someone!!
Great work!!❤

[@webdev07]

Thanks for your appreciation keep supporting

[@6amquotes331]

really great tutotial by webdev creations

[@pranjaldhakad1169]

Finally I got this video I have learn html in my school in class 6th but I am forgetting it after 3 year not again I can learn from this video .😊😊

[@lifeofananalyst]

Thanks alot bro.... it was extremely helpful... can you plz make more videos like this including javascript.

[@qamarzaman2669]

great working sir when you upload next tutorial.

[@webdev07]

Very soon

[@fireflamebg7869]

Thank you, thank you, thank you, THANK YOU so much! You are awesome! I had a project from school and I was so sad that I can't do anything but after your videos I am much better than before! I am so thankful that I find your channel. I will recommend you to my friends. You deserve more!

[@webdev07]

Thanks for your appreciation keep supporting and also follow me on instagram

[@mizanurrahman6398]

Thanks for Excellent tutorial

[@piyashabaidya6754]

This was explained and done so slowly and steadily .
I have learnt it really well .Thank you so much Web dev . This has really helped me alot.

[@PoojaKumari-fv7ev]

Hii

[@iLorde]

I needed till 3:06 to realize that this video is in indisch language, but somehow it didn’t bothered me at all to understand the concept,
YOURE AWESOME 👏

[@webdev07]

Thanks

[@shivashivba]

well we developers just need coding languages other doesn't matter🤞

[@dharvsavani5516]

@@shivashivba so true..

[@AkashSingh-eh4qx]

Sir its Indian Language(Hindi), not Indisch

[@joydeep2504]

@@AkashSingh-eh4qx He is german, and in his language Indian are called as 'Indisch'. no offense

[@carnifex8078]

This would've been SO GOOD if he showed us how to code the other pages as well.

[@Webtricker]

Nice way to create a website using HTML and CSS.👌Very helpful for everyone.

[@webdev07]

Thanks

[@auralian1428]

Great video, thank you. However, I can only describe trying to contemplate what's being said as constantly tuning and detuning a radio haha.

[@uiworld3381]

See this Header czcams.com/video/5lJsfn-QnzY/video.html

[@rizwanghani6372]

Excellent 👌 Great Job Sir 👍

[@webdev07]

Thanks

[@bigbro5089]

Aur jadoo chal jaaye poora poora 🌟

[@rajatal4010]

osm video sir aapka web create karne ka tarika bahut acha laga

[@afreennasseer4417]

This tutorial helped me so much, I can't express my gratitude . Saved me a lot of time!!

[@casiekelsie5581]

im doing my school assignment. now i know some more features to add to my templates. Thank you so much 🙏🙏🙏 have a blissful day 👍💛

[@casiekelsie5581]

I got a bright red A

[@MKRCinema]

Can you do his tutorial on notepad ++ ?

[@krishnareddy5025]

@@MKRCinema yeah definitely!!

[@youtubebannedme3466]

Man u r replying to everyone asking the same question.
respect

[@shelli6518]

wait he didn't reply to you

[@ogs3721]

Hmm

[@Catto.PK2007]

First time I have respected a Indian as a Pakistani. LOVELY work yar.
(yar means friend)

[@veerajlaata5690]

For those who don't know, he is speaking in Hindi. Love the tutorial!

[@mrman2478]

Weird language lol

[@TeX____]

Amazing job bro. It is my first time when i made really nice website from a youtube tutorial. Thank you and keep doing good job! :D

[@webdev07]

Thanks for your appreciation keep supporting

[@saaheb085]

Really appreciate your efforts 👍.
Had one question not related to html. If you could tell me where or which website did you make/design the logo?

[@lailajess4972]

Beautiful Website Tutorial. Thanks great.

[@AnjaliKumari-be9qy]

Thank u so much sir for such an easy way to create a website by using html and css....The way u r explaining is awesome

[@artwitha.g.8955]

amazing tutorial tho I don't speak your language!! this was extremely helpful thank you !!

[@aryanit229]

BRO YOU DONE MINE 80% WORK I WAS JUST SEARCING FOR THIS TYPE OF VIDEOS BRO I THANK YOU SO MUCH IT HELPS ME MUXXXHHHH🥺💗💗💗💗💗💗
LOVE FROM NEPAL.

[@asifahashim8923]

Very nice and very helpful vedio

[@sabarnopramanick2746]

bro u are a helpful personality;
I recently had a bet with my bro that who makes the most beautiful website header. And guess what I won . thanks guys

[@vince-1337]

Love the way I understand everything about this video without freakin understand what you say, ahah . Thanx mate!

[@adalovelac24]

hihi saaaame

[@daredevil3983]

Bingooo !! This is my first stepping stone example in web development Thank you

[@vipankumar5596]

Intresting and good video👌👌👌

[@srikararanganath8012]

Top notch tutorial .great one .looking forward to more tutorials on this channel

[@webdev07]

Thanks

[@ShahzEditx]

Omg this my first professional website this is nice amazing!!!
Nice But Can you please Make a *part 2* of this video

[@trendyshortedits1234]

Thank you so much for making my project easy with ur tutorial... U r 1000 times better than our clg lecturers...Thank you so much...❤

[@Sander_meijer_]

couldnt find a better tutorial than this!

[@rohitjadhav4451]

Thanks for the help I really need it

[@docent5237]

I don't know what you are saying, but this is the best tutorial!

[@davidanton8557]

Even though I didn’t understand most of your Worlds some how i feel So proud and you help me for my Tomorrow test thank you so much I don’t know how can i appreciate you keep the Good world 😍😍😍👍👍🙏🏾🙏🏾✍🏼

[@uggghhhh835]

This is by far the best tutorial I've watched. Good job dude!

[@definitelynotafamousyoutub6131]

nice vid pls make a series of this.

[@kheinancheta6000]

Thanks Bro! You're the best.

[@harshithan7892]

Thank you so much. This was very helpful as part of my project. Very well and clearly explained. Thanks a lot 😃

[@maahir-fx]

i am ethiopian soomali and i dont understand the language but i get more and more thank you

[@ericaperros8079]

I love you man thank you for saving my life ❤️

[@_.Mustafa._]

Thanks a lot buddy !! I've made my first web page using HTML and CSS with the help of your nicely explained tutorial.

[@namratakore4678]

Which text editor they are use in this video???

[@_.Mustafa._]

@@namratakore4678 Sublime.

[@straightchlorine5331]

what browser did u use to open it?

[@_.Mustafa._]

@@straightchlorine5331 Chrome, and wrote code in vscode

[@anuragsharma1993]

You mean you copy pasted his code and ran it.

[@pragatiblink4789]

Very nice tutorial my website is ready it is looking very good

[@tatashyam]

wonderful explanation. thank you Web dev.

[@princepriyo3643]

Thank you so much bhai ❤️
Yours one is one of the best channels

[@parbatisaha6447]

I never thought that website making is so easy. May b your teaching capability is so perfect to make me more confortable with making website. Thanks a lot.

[@webdev07]

Thanks for your appreciation keeping supporting

[@pujasah1484]

@@webdev07 plz tell style.css firstly what u use there is .
U say universal sittler what does its mean

[@anirbanbhattacharjee1179]

awesome, I made my first website using your help.

[@hemaligotawala4836]

I just created same webpage..
Thank you so much for such teaching..👍👍

[@AmeyaKulkarniYoutube]

Thank you so much brother for this amazing tutorial..!! :):)

[@uiworld3381]

See this Header czcams.com/video/5lJsfn-QnzY/video.html

[@FirozKhan-tl3hy]

One Word Review.
"EXCELLENT" .👌🏻

[@hemaligotawala4836]

Wow. I am new learner...
So I liked this amazing page too much..
Now I can create mine easily...👍👍

[@chitranshbhatnagar4351]

I know hindi, sanskrit, punjabi, english but happy to see you all that you don't know the language still you are trying to understand. 😊

[@abdulbhashith]

Wow what a amazing explanation , Really I'm stunned, I didn't even know what language are you taking about then also I understand that content very well.
Thank you for this explanation ❤️

[@AYT2024]

czcams.com/video/JgZMkfK-ynA/video.html

[@ishworgautam16]

One of the best channel for tutorial..❤️❤️

[@LK_KIDS_VIDEOS]

think you sir bohut kuch sekha ap sy thanks alot

[@nitinpareek2496]

Excellent video I came across

[@SouljaBoy6368]

Roses are red,
Violets are blue,
Your title in English,
Why don't you speak too?

[@harisbashir6074]

Shut up you bullshit

[@dawidblazkowicz2702]

@@harisbashir6074 You can't say much, your English is just as shit.

[@shivashivba]

@@dawidblazkowicz2702 just go and watch different video and btw there is no need of sound for this video just mute it and watch

[@shivashivba]

@Lord Of Onions they lack knowledge then🤣

[@DhruvalBhinsara]

kya baat!

[@fandyhidayat7899]

Thankyou very much for this tutorial, the tutorial is simple and easy to learn, good job mabro (y)

[@tanajiyadav1220]

Fandy Hidayat

[@anasrifdi2756]

Fandy Hidayat Get your own website full of features and benefits for the lowest price simply click on the link given!!!
www.bluehost.com/track/anas912/

[@dashamighadi3006]

Much good 👍

[@rexstroller7077]

Thanks a lot I made my first website
Just because of you 😍😋😘