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

Подписаться 82 тыс.

Просмотров 4,2 млн

50% 1

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...
~-~~-~~~-~~-~

Опубликовано:

28 мар 2018

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 4,4 тыс.

@lep2525 4 года назад

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

@webdev07 4 года назад

Thanks

@nikola6526 4 года назад

@@webdev07 PROGRAM NAME?

@nikola6526 4 года назад

@@animealex3700 thank you mate

@nikola6526 4 года назад

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

@actuallyarnav 4 года назад

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

@catninja4950 3 года назад

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 3 года назад

so true

@orangedevrbx8102 3 года назад

I understand him so props to me lol

@wdns 3 года назад

when indians dont need to say in _english_ to teach others

@deskyee 2 года назад

Lol

@Aditya-rd1pw 2 года назад

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

@agamjotsingh7371 2 года назад

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 7 месяцев назад

Facebook Login Page Clone ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-n35UMG71DHU.html

@Qweasdzxc912 3 года назад

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

@bluesea1769 4 года назад

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 4 года назад

It's Hindi language ,from INDIA

@user-xj7ms2hy7l 4 года назад

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

@chirilcugureanu1853 4 года назад

@@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 4 года назад

@narendraseervi2623 4 года назад

Its hindi language of INDIA

@80Vikram 3 года назад

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

@AYT2024 3 года назад

ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-JgZMkfK-ynA.html

@dev1489 3 года назад

You can use captions if you cant understand

@notsocath5371 3 года назад

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

@killerqueen8040 3 года назад

Fact

@rinkuchorasiya4289 8 месяцев назад

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

@lotelenishikulo2386 2 года назад

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

@aaravtripathi2615 3 года назад

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!!!!!!!!!

@malkidrathnayake3361 3 года назад

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 3 года назад

ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-JgZMkfK-ynA.html

@pratyakshamaheshwari8269 3 года назад

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

@21stfox60 3 года назад

I am also from sri Lanka

@pratyakshamaheshwari8269 3 года назад

@@PandeyYaar oh really

@pratyakshamaheshwari8269 3 года назад

Well I am from Rajasthan and Everyone knows here.

@FreedomForKashmir 5 лет назад

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

@himanshuop8 2 года назад

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

@lucylu184 3 года назад

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

@Hondunu 4 года назад

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 4 года назад

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

@QS1597 4 года назад

@@anasrifdi2756 why the random advertising nobody asked

@aporti5019 4 года назад

no u

@justin-hurd 4 года назад

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.

@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

@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!

@tinashechinyati6823 4 года назад

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

@jorjicat6318 4 года назад

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

@techsimply4594 3 года назад

Jorji Cat this is hindi language and he is indian

@fireflamebg7869 3 года назад

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 3 года назад

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

@ekatanagrale2583 3 года назад

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

@laortabo2815 5 лет назад

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

@mrbeemee6325 4 года назад

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

@yangbengal3448 2 года назад

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!🙏💛

@FRONTRUS 3 года назад

*Covid-19* : Making Programmers Since 2020 🎓

@DipMaster20 3 года назад

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

@randomstuffs9103 3 года назад

@@DipMaster20 its only a markup language

@KeilGaming. 4 года назад

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

@AmandeepKaur-sd5dv 5 лет назад

Thanks its really effective for new designer

@webdev07 5 лет назад

Welcome

@md7986 2 года назад

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 3 года назад

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

@ank_aks 6 лет назад

nice tutorial keep updating...👌👌

@piyashabaidya6754 3 года назад

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 2 года назад

Hii

@youtubebannedme3466 3 года назад

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

@shelli6518 3 года назад

wait he didn't reply to you

@ogs3721 2 года назад

Hmm

@notYOURMIKEY 2 года назад

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

@andersonmoore4944 4 года назад

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

@uiworld3381 3 года назад

See this Header ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-5lJsfn-QnzY.html

@sandipdas18 5 лет назад

Excellent. Boht bariya samjhye.. Thanks Sir.

@webdev07 5 лет назад

Thanks bro

@bigbro5089 3 года назад

Aur jadoo chal jaaye poora poora 🌟

@harshithan7892 3 года назад

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

@supracosmic1925 4 года назад

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

@uiworld3381 3 года назад

See this Header ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-5lJsfn-QnzY.html

@nishantsharma4822 4 года назад

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 4 года назад

Thanks for your appreciation keep supporting

@saaheb085 2 года назад

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?

@carnifex8078 3 года назад

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

@abhay1893 3 года назад

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 3 года назад

ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-JgZMkfK-ynA.html

@lifeofananalyst 5 лет назад

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

@uggghhhh835 2 года назад

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

@mizanurrahman6398 2 года назад

Thanks for Excellent tutorial

@TeX____ 4 года назад

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 4 года назад

Thanks for your appreciation keep supporting

@iLorde 5 лет назад

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 5 лет назад

Thanks

@shivashivba 5 лет назад

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

@dharvsavani5516 4 года назад

@@shivashivba so true..

@AkashSingh-eh4qx 4 года назад

Sir its Indian Language(Hindi), not Indisch

@joydeep2504 4 года назад

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

@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.

@Sander_meijer_ 3 года назад

couldnt find a better tutorial than this!

@vince-1337 3 года назад

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

@adalovelac24 3 года назад

hihi saaaame

@afreennasseer4417 4 года назад

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

@daredevil3983 3 года назад

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

@parthstudio7195 3 года назад

Thanks for helping me ,it was a great video. I learnt and created my own website for my project. Once again great work ,keeping doing .Peace

@casiekelsie5581 3 года назад

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 3 года назад

I got a bright red A

@MKRCinema 3 года назад

Can you do his tutorial on notepad ++ ?

@krishnareddy5025 3 года назад

@@MKRCinema yeah definitely!!

@veerajlaata5690 3 года назад

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

@mrman2478 3 года назад

Weird language lol

@Webtricker 2 года назад

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

@webdev07 Год назад

Thanks

@kavitabhandari7450 2 года назад

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

@AnjaliKumari-be9qy 3 года назад

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

@ShahzEditx 3 года назад

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

@sabarnopramanick2746 3 года назад

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

@pranjaldhakad1169 2 года назад

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 .😊😊

@auralian1428 4 года назад

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 3 года назад

See this Header ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-5lJsfn-QnzY.html

@rohitjadhav4451 5 лет назад

Thanks for the help I really need it

@sonianaik9461 2 года назад

I can't explain how grateful I'm to you. Thanks you so much for this video. You are a great teacher. I had lot of confusion and your video helped me lot. Thank you so much.. Subscribed😊

@rohaanasad4950 3 года назад

The Indian dudes explain so clearly this is the most helpful video i have watched

@uiworld3381 3 года назад

See this Header ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-5lJsfn-QnzY.html

@rohaanasad4950 3 года назад

@@uiworld3381 stop advertising your channel here

@srikararanganath8012 5 лет назад

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

@webdev07 5 лет назад

Thanks

@artwitha.g.8955 3 года назад

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

@nikitamathew5009 3 года назад

I dont know a single word of Hindi yet I could do it so simply. Your visual instructions were great!!! Keep it up.

@movietime4512 3 года назад

ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-TwHqlx8rvdU.html

@prajyot2021 2 года назад

Bro maza agya... Ekdum too the point video tha Luv u bro

@qamarzaman2669 5 лет назад

great working sir when you upload next tutorial.

@webdev07 5 лет назад

Very soon

@MrRahul3 4 года назад

You are doing an outstanding job. Keep it up. You earned my like!!!

@ammaraarif5820 2 года назад

I can do same code in vscode

@hemaligotawala4836 3 года назад

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

@trendyshortedits1234 21 день назад

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...❤

@kheinancheta6000 5 лет назад

Thanks Bro! You're the best.

@docent5237 3 года назад

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

@ilovegirlblogging 3 года назад

This is such a great video! I hope to have a part 2 of it with the other elements

@amritasinha757 2 года назад

Did you get the other part?

@shubhambhatia4874 2 года назад

How to add Icons in html?

@learningpoint62169 3 года назад

That's such a great & wonderful way to Teach. No matter viewer is beginner or expert

@rizwanghani6372 5 лет назад

Excellent 👌 Great Job Sir 👍

@webdev07 5 лет назад

Thanks

@_.Mustafa._ 4 года назад

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

@namratakore4678 4 года назад

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

@_.Mustafa._ 4 года назад

@@namratakore4678 Sublime.

@straightchlorine5331 4 года назад

what browser did u use to open it?

@_.Mustafa._ 4 года назад

@@straightchlorine5331 Chrome, and wrote code in vscode

@anuragsharma1993 3 года назад

You mean you copy pasted his code and ran it.

@rajatal4010 2 года назад

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

@saif0316 3 года назад

I feel like I learned how to speak your language it was so clear!

@definitelynotafamousyoutub6131 4 года назад

nice vid pls make a series of this.

@princepriyo3643 3 года назад

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

@tushaars5869 2 года назад

Thank You So Much Bhai This Helped Me A Lot! Keep The Working Going On Hats Of!!

@LK_KIDS_VIDEOS Месяц назад

think you sir bohut kuch sekha ap sy thanks alot

@fandyhidayat7899 5 лет назад

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

@tanajiyadav1220 4 года назад

Fandy Hidayat

@anasrifdi2756 4 года назад

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/

@BuddhirDhenki 4 года назад

Thanks a lot. Gave me a good idea about how it works. 😊👍🏼💡

@webdev07 4 года назад

Thanks

@anasrifdi2756 4 года назад

বুদ্ধির ঢেঁকি (Buddhir Dhenki) Get your own website full of features and benefits for the lowest price simply click on the link given!!! www.bluehost.com/track/anas912/

@FreeFireProGamer_ 2 года назад

@@webdev07 bro how to make ur html file be available to all for free, on net

@hemaligotawala4836 3 года назад

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

@SouljaBoy6368 5 лет назад

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

@harisbashir6074 5 лет назад

Shut up you bullshit

@dawidblazkowicz2702 5 лет назад

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

@shivashivba 5 лет назад

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

@shivashivba 5 лет назад

@Lord Of Onions they lack knowledge then🤣

@DhruvalBhinsara 5 лет назад

kya baat!

@ericaperros8079 5 лет назад

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

@charlefortulaso6320 3 года назад

Its was my first web today I learned a lot todays b'coz of your tutorial!

@Catto.PK2007 3 года назад

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

@Miriam-no3si 4 года назад

You literary save my life, thx

@webdev07 4 года назад

Thanks keep supporting and also follow me on insta

@ayushtripathi2605 3 года назад

@@webdev07 Bhai sahi hai

@parbatisaha6447 4 года назад

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 4 года назад

Thanks for your appreciation keeping supporting

@pujasah1484 3 года назад

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

@Kidzu_shows 2 года назад

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 💗)

@aryanhariname651 2 года назад

Thank you paaji, college ka assignment aap ke wajah se complete ho raha hai

@AmeyaKulkarniYoutube 3 года назад

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

@uiworld3381 3 года назад

See this Header ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-5lJsfn-QnzY.html

@ishworgautam16 3 года назад

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

@maahir-fx 2 года назад

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

@6amquotes331 2 года назад

really great tutotial by webdev creations

@abdulbhashith 3 года назад

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 3 года назад

ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-JgZMkfK-ynA.html