ฝัง
- เผยแพร่เมื่อ 18 ก.ย. 2024
- 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...
~-~~-~~~-~~-~
![PURPEECH - นี่ฉันเองคนที่... (It's me) [Official MV]](http://i.ytimg.com/vi/NuhHd0hOOg8/mqdefault.jpg)
I have no idea what you’re saying, but this is one of the most helpful tutorials I’ve come across lol
Thanks
@@webdev07 PROGRAM NAME?
@@animealex3700 thank you mate
@@animealex3700 how can i copy that header to be purple for me is just white i dont understand...
@@nikola6526 #fff is the colour code for white.
for purple, it is #800080
just replace #fff with #800080 and you're good to go!
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.
so true
I understand him so props to me lol
when indians dont need to say in _english_ to teach others
Lol
He is saying in 'Hindi' language ......
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 ❤
th-cam.com/video/JgZMkfK-ynA/w-d-xo.html
This is HINDI Language, MOTHER tongue of most of the INDIANS.
I am also from sri Lanka
@@PandeyYaar oh really
Well I am from Rajasthan and Everyone knows here.
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!
Thanks for you appreciation. keep supporting
Facebook Login Page Clone
th-cam.com/video/n35UMG71DHU/w-d-xo.html
Seeing is believing. What I see, I believe more than what I hear. Thanks alot teacher.
See this Header th-cam.com/video/5lJsfn-QnzY/w-d-xo.html
Didn't even need to speak the same language. Absolutely amazing tutorial. Perfect pace and everything was so so clear
Jorji Cat this is hindi language and he is indian
Please add "English Subtitles" as you deserve global audience. Keep up the great work man
th-cam.com/video/JgZMkfK-ynA/w-d-xo.html
You can use captions if you cant understand
@@dev1489 thats the problem, captions are turned off, there are no options for captions there
Fact
etni english a aatih kya tuje..kataye angreej homriya h
Back to 2020 ... I made my first web page by following this tutorial .... and guess what !? Its 2022 and Iam a full stack developer!
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.😁
It's Hindi language ,from INDIA
Does class="active" do something special or i can name it "ass" for example?
@@user-xj7ms2hy7l You can name the class how you want in html, but remember to style it in css with the same name
U
Its hindi language of INDIA
i appreciate this effort to practically demonstrate rather than just giving lectures
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.
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!!!!!!!!!
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.
Video is not misleading we write in English and speak in both English and Hindi
Which means we speak hinglish
@@anasrifdi2756 why the random advertising nobody asked
no u
im doing my school assignment. now i know some more features to add to my templates. Thank you so much 🙏🙏🙏 have a blissful day 👍💛
I got a bright red A
Can you do his tutorial on notepad ++ ?
@@MKRCinema yeah definitely!!
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.
th-cam.com/video/JgZMkfK-ynA/w-d-xo.html
Man u r replying to everyone asking the same question.
respect
wait he didn't reply to you
Hmm
Thanks its really effective for new designer
Welcome
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 👏
Thanks
well we developers just need coding languages other doesn't matter🤞
@@shivashivba so true..
Sir its Indian Language(Hindi), not Indisch
@@AkashSingh-eh4qx He is german, and in his language Indian are called as 'Indisch'. no offense
This was one success story in my beginner journey to web development. Thanks a lot
All Indians Like This Vdo He Make videos of educate you people who don't know coding .Thanks MY Buddy
For those who don't know, he is speaking in Hindi. Love the tutorial!
Weird language lol
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!
Thanks for your appreciation keep supporting and also follow me on instagram
The Indian dudes explain so clearly this is the most helpful video i have watched
See this Header th-cam.com/video/5lJsfn-QnzY/w-d-xo.html
@@uiworld3381 stop advertising your channel here
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!🙏💛
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.
Thanks for your appreciation keeping supporting
@@webdev07 plz tell style.css firstly what u use there is .
U say universal sittler what does its mean
Thank u so much you can’t understand how much u helped me this is so beautiful I’m thankful!!!!
You literary save my life, thx
Thanks keep supporting and also follow me on insta
@@webdev07 Bhai sahi hai
Learning on 14nov21..by skipping 6 videos... Much better then speedy videos.. It's my 1st practice...thank you so mch sir.
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
Thank you...so much, I did my website without any error and understand properly,
very simply and smooth explanation.
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
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 😍😍😍👍👍🙏🏾🙏🏾✍🏼
Love the way I understand everything about this video without freakin understand what you say, ahah . Thanx mate!
hihi saaaame
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👍🏼
Nice Bro
This was really useful, even though it is in different language I was still able to follow through. Thanks so much for creating it.
I sherched on youtube that, how to design a website...and youtube recommend me this....its soo helpfull and clear
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.
Hii
Really helpful, thank you. I always like to learn by watching others code.
See this Header th-cam.com/video/5lJsfn-QnzY/w-d-xo.html
Thanks bro! Now I have my first Homepage of my site
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
Thanks a lot buddy !! I've made my first web page using HTML and CSS with the help of your nicely explained tutorial.
Which text editor they are use in this video???
@@namratakore4678 Sublime.
what browser did u use to open it?
@@straightchlorine5331 Chrome, and wrote code in vscode
You mean you copy pasted his code and ran it.
This is simply amazing. I clap to you. Thank you so much!
couldnt find a better tutorial than this!
I dont know a single word of Hindi yet I could do it so simply. Your visual instructions were great!!! Keep it up.
th-cam.com/video/TwHqlx8rvdU/w-d-xo.html
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
First time I have respected a Indian as a Pakistani. LOVELY work yar.
(yar means friend)
*Covid-19* : Making Programmers Since 2020 🎓
Html isn't a programming language. it's a coding language or mark-up language.
@@DipMaster20 its only a markup language
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...❤
Awesome, love it! Thank you for the tutorial ! One of the most helpful videos for the front end, I have ever went through .
Please do the next part of these.. clicking on watch video button to see videos,to see gallery ,etc that is there on website page..
you just need to create a page of gallery and videos and paste the link of these pages in those tags
@@MuhammadAli-fn4xb how ?
@@renieronronshi7120 create a page named as GALLERY.HTML, AND set this link to navigation bar thorugh a tag ,
This line should be replaced in header sectiom
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 ❤️
th-cam.com/video/JgZMkfK-ynA/w-d-xo.html
Nice way to create a website using HTML and CSS.👌Very helpful for everyone.
Thanks
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
Thanks for your appreciation keep supporting
Thanks a lot. Gave me a good idea about how it works. 😊👍🏼💡
Thanks
বুদ্ধির ঢেঁকি (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/
@@webdev07 bro how to make ur html file be available to all for free, on net
I am so glad, I finally made my first template of web development. I can tell u,how happy i am :) thanks to u. please upload more and more such videos. :)
How did you insert image in background through CSS???
@Jael Valentina Rojas Cardenas ok, I should use this syntax:- right??
Very nice!!! I was able to make my first html and css webpage for the first time!!!! thanks!!!!!!!
Do you know html css before watching this video?
Excellent. Boht bariya samjhye.. Thanks Sir.
Thanks bro
This would've been SO GOOD if he showed us how to code the other pages as well.
Great video, thank you. However, I can only describe trying to contemplate what's being said as constantly tuning and detuning a radio haha.
See this Header th-cam.com/video/5lJsfn-QnzY/w-d-xo.html
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 💗)
You are doing an outstanding job. Keep it up. You earned my like!!!
I can do same code in vscode
amazing tutorial tho I don't speak your language!! this was extremely helpful thank you !!
This tutorial helped me so much, I can't express my gratitude . Saved me a lot of time!!
Thanks sir for providing valueable content thanks u sir...
Thanks and welcome
nice tutorial keep updating...👌👌
I learned html in school fr like a few months but this shows me so much more than i learned there/
skewl sux :)
William Sandoval mk
bruh they teached me 2 lessons and expected me to make a website. Like bitch tf are you talking about i understand the basics
Thanks alot bro.... it was extremely helpful... can you plz make more videos like this including javascript.
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.
Wow the wix ads in a website making tutorial it convince us to use the easier paths
I don't know what you are saying, but this is the best tutorial!
great working sir when you upload next tutorial.
Very soon
Thank you so much for this video .vry nice nd neat video .ur way of teaching is vry nice .once again thank you so much 🙏u don't know ur video is help ful to us
that the best tutorial i've ever seen thank you so much
hello
Thanks for the help I really need it
nice bro ...can you share this source code & you plz make more videos like this including javascript also and
Give more web design ideas.... Thanks
i am ethiopian soomali and i dont understand the language but i get more and more thank you
Thankyou very much for this tutorial, the tutorial is simple and easy to learn, good job mabro (y)
Fandy Hidayat
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/
Top notch tutorial .great one .looking forward to more tutorials on this channel
Thanks
One Word Review.
"EXCELLENT" .👌🏻
This is by far the best tutorial I've watched. Good job dude!
Thank you so much brother for this amazing tutorial..!! :):)
See this Header th-cam.com/video/5lJsfn-QnzY/w-d-xo.html
Great broo.... Very easy tutorial...
I understand very easily
Thanks
I love you man thank you for saving my life ❤️
Thank You So Much Bhai This Helped Me A Lot! Keep The Working Going On Hats Of!!
nice vid pls make a series of this.
Excellent 👌 Great Job Sir 👍
Thanks
It is very usefull I was able to understand every step thx bro you are superbbbbbb
Explained in simple terms and well. But requires a minimum knowledge of html. Good, anyways.
oooo excuse me plz do you know #aukaat......
if your answer is yes so....plz.....stay in #aaukaat...
b cause this is basic concept.... it is not any huge site making....
Next toturial mene bhanaya
Hai
For everyone with the language problem. Just mute it and follow the steps, problem solved.
metta charset utf 8
One of the best channel for tutorial..❤️❤️
Intresting and good video👌👌👌
Thank you my friend! You really helped me out in my college project! ^^ Have a nice day!
Pedro Rodrigues Get your own website full of features and benefits for the lowest price simply click on the link given!!!
www.bluehost.com/track/anas912/
College project !!!!!! 🤯 This is my 6 grade winter vacation homework
Anushka Sariyal you are far ahead of the game kid!! Keep on learning!!
Anushka Sariyal Kidding me kid ? But keep going on ! 💪
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?
Excellent work.
Thanks
really great tutotial by webdev creations
Explained very well. Thank you :). But how to share this file via link to anyone?
@Xzoky there are free domain websites you can use to share your website, most easiest is probably ngrok, herokuapp works as well, im sure there are more though!
if it doesnt work try to change the order in line 5 on index.html
Type :
:)
Thank You!!!
:)
thanks broo !! what's diff bitween the first link and second
Why isn't my background image showing??
me tooo
th-cam.com/video/JgZMkfK-ynA/w-d-xo.html
same bruh
if u copied the code, the the image name he used is 1, change it to the same name your image file has..or else..rename your image file to 1.png
Me too
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. 😊
I followed the instructions, but I cannot arrange the "Home", "About" and the rest in horizontal form :( please help. The hover command is also not working ☹
try:
display: flex; or display: inline-block;
Just apply css to UL
UL{ display: inline; }
@The CROSSANGLER Sublime Text