Dunkel

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

Web dev
Abonnieren
Aufrufe 1 930 358
96% 18 600 704

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:-
de-vid.com/video/video-a_ldg5EI9MU.html
----------------------------------------------
css positioning explained with examples (static,relative,absolute,fixed):-
de-vid.com/video/video-L_B2RZm-5VI.html
----------------------------------------------
css image hover effect - Css Tutorial - Css3 Hover Effect:-
de-vid.com/video/video-gu8AceXa5Pg.html
----------------------------------------------
how to change text selection color in html and css:-
de-vid.com/video/video-gCGnwS2uRdw.html
----------------------------------------------
how to make Simple css3 loading animation:-
de-vid.com/video/video-1pC_r_AKlmg.html
----------------------------------------------
How to create contact form using html and css:-
de-vid.com/video/video-ubCG1evvZws.html
----------------------------------------------
How to make fullscreen video background using html and css:-
de-vid.com/video/video-1RrR_d4yGJ8.html
----------------------------------------------
Advance text shadow hover effect using html and css:-
de-vid.com/video/video-FFhDA5XB3CA.html
----------------------------------------------
How to create fixed navigation bar using html and css:-
de-vid.com/video/video-2M3QXuBDQBM.html
----------------------------------------------
how to create animated Dropdown menu using html and css:-
de-vid.com/video/video-EGr4rEgmJ9E.html
----------------------------------------------
how to create hero image using html and css:-
de-vid.com/video/video-3xLfTaMZkEI.html
----------------------------------------------
simple parallax effect using html and css:-
de-vid.com/video/video-Y4_JLIherrw.html
----------------------------------------------
How to create login form using Html and css:-
de-vid.com/video/video-bORk1gxHPaU.html
----------------------------------------------
How to create animated search bar using Html and css:-
de-vid.com/video/video-JaQSzSn0cIQ.html
-~-~~-~~~-~~-~-
Please watch: "Responsive Image Slider | HTML & CSS"
de-vid.com/video/video-FTHUXF241Ak.html
-~-~~-~~~-~~-~-

Am

 

29 Mär 2018

Teilen:

Link:

Video herunterladen:

Link wird geladen...

Hinzufügen:

Meine Playlist
Später ansehen
KOMMENTARE 80
sarthak pawar
sarthak pawar Vor 4 Stunden
I am grateful that I understand hindi..
Hemanth Pitcha
Hemanth Pitcha Vor 12 Stunden
How did he get that all the html,css codes on note pad without typing???? Plz clear my doubt
Saif Alam
Saif Alam Vor Tag
I have one problem guys, when i set an image as logo, it appears on webwape but have a white background behind it..... For example - i download a image and it contain a background with balck color, and then i put it on html and styling it using css, but the image background appears with image how can i remove
Cabdifitaax Cali
I don't understand what is he talking about but I would like to say thank you because you helped me, three days later i am going to make a presentations about websites so i think i will be win insha allaah.
Shlök Påñdêy
My images is not showing on web browser
Web dev
Web dev Vor Tag
Complete your code then msg me if your background image is not showing
Jawad Jamil
Jawad Jamil Vor Tag
I can not set background Picture..Please Reply me anyone,If know
Web dev
Web dev Vor Tag
Complete your code then msg me on instagram if your background image is not showing
Asus Mania
Asus Mania Vor Tag
Tune to jina sikha diya yaar bhai
Vijit Kumawat
thanks broo....and beautiful website
InvenTech
InvenTech Vor 2 Tage
Hello, I finished this website, but now I have a issue, to the buttons (Home, Serveces, Gallery, etc, how do I add a link to them or a link to one of my other html website on my folder?
usama irshad
usama irshad Vor 2 Tage
Where is its next part?
usama irshad
usama irshad Vor 2 Tage
It's not getting the background image from path
usama irshad
usama irshad Vor 3 Stunden
@Nicksnick ZeldaxTos thanks I have recovered it
Nicksnick ZeldaxTos
Nicksnick ZeldaxTos Vor 4 Stunden
is it in the same folder as the .html & .css files?
Fadinq Midniqhts
Fadinq Midniqhts Vor 2 Tage
I’m going to try and learn this even though I don’t understand the language the steps are right here, practice and tutorial are key for making websites
O No
O No Vor 2 Tage
Osm bro
shajahan basheer
shajahan basheer Vor 2 Tage
50% off for Itel Dialer, ItelSwicth and VoipSwitch. We are giving 50% off for Itel Dialer, ItelSwicth and VoipSwitch for first month. Use Promo Code 50%off at checkout to get 50% off of first month rent. 100 CC Cloud Voipswitch - $69/month 200 CC Cloud Voipswitch - $79/month. 300 CC Cloud Voipswitch - $99/month. 100 CC Cloud Itelswitch - $79/month 200 CC Cloud Itelswitch - $109/month. 300 CC Cloud Itelswitch - $139/month. 100 CR iTel Mobile Dialers with Bytesaver - $79/month. 200 CR iTel Mobile Dialers with Bytesaver - $99/month. 300 CR iTel Mobile Dialers with Bytesaver - $119/month. Please contact us at support@datasoft.ws www.datasoft.ws
Saumya Dixit
Saumya Dixit Vor 2 Tage
Thanks a ton bhai! This was just amazing!
Fisher of men
Fisher of men Vor 3 Tage
how does transform:translate() work
Rishabh Upadhyay
Rishabh Upadhyay Vor 3 Tage
Thanks!!! Awesome video
aboh chingmei
aboh chingmei Vor 3 Tage
Sir, how do you write text coding auto? And your text seem in colourful, how to do that
SHARI
SHARI Vor 4 Tage
i am a bigner in this some problems comes to me but thaks to you
Shabnam Haque
Shabnam Haque Vor 4 Tage
Can we use notepad or sublime text is a must to be used as the text editor??
INTJ _
INTJ _ Vor 2 Tage
Sublime text is vetter to use. Notepad kept ruining my progress by not saving.
Ahmad Basyir
Ahmad Basyir Vor 4 Tage
Respect bro! Thank you!!!
SK Gaming
SK Gaming Vor 4 Tage
Amazing
Prince Priyo
Prince Priyo Vor 4 Tage
Thank you so much bhai ❤️ Yours one is one of the best channels
雨水
雨水 Vor 5 Tage
tfw cant speak well in english but teaches better than my lecturer
Nina Zheng
Nina Zheng Vor 5 Tage
How do you continue like the click the buttons there will be a page comes up. Pls I wanna know. Continuation for this!
vinayak BHANUSHALI
the best tutorial of html and css wonderful !!!!!!!!!!!!!!!!!
Anjali Poul
Anjali Poul Vor 6 Tage
Tutorial was awesome but can you explain me that why we need to use rgba two times
Ali Bahlol
Ali Bahlol Vor 6 Tage
Do u Have to learn code of every color? Plz Reply.
Şerifhan Işıklı
Of course no, he prepared for video. And u can ise a lot of tool for colors, maybe that is be a program or plugin
Omar Matar
Omar Matar Vor 8 Tage
Man I don't know how to thank you really!! this short video is just Amazing and so useful
SoCiaL AdDicT
SoCiaL AdDicT Vor 8 Tage
Bhai koi esa bhi tutorial bnao k image k uoar hover effect aey or us effect py pointer us py rakhny py image ki.details aeen 4 , 5 images hoon but aik hi.column mn hoon
Official Meister
Official Meister Vor 8 Tage
how can I add pictures in the gallery?
Kaung Si Thu
Kaung Si Thu Vor 8 Tage
hello, i have problem with image resolution. My image resolution isn't like u.
Web dev
Web dev Vor 8 Tage
Download high resolution image
Suresh Lad
Suresh Lad Vor 8 Tage
rajan sir how to creat a website using html and css step by step website tutorial ye tutorial maine dekha mai bignner hu maine apke jaisa desk top ke uper folder open kiya uska name diya website usme yek backgraound image aur yek logo dala fir us wbsite folder me aur yek folder open kiya uska name diya css fir subline text editor open karke html file seve kaiya destop me website folder usaka name diya index.html aurwebsite folder jakr css folder name diya style,css fir html file open fir html ka coding jaisa apne kiya vaisahi kiya html ko css file ko link kiya home services gallary about contact ye sub browzer show huaa fir style.css open karke usme margin0; pading0; font-famaily century Gothik; fir header dalkar background image url () dala lekin mera backgroun image brwozer show nahi hua bhut try kiya fir bhi hota nahi fir maine header me khali background red dala to red show huaa fir maine whitout backgroun aur whitout logo website bnaya lekin muze background image aur logo me adda hu mai aapka ye video hamesha dekhata hu aap ka padhaneka tarika bhi acha hai mera name suresh lad hai maharashtra mumbai ke virar me rahta hu aap muze mre email ke uper background imege our logo solution batawo Email:sureshlad786@gmail.com thank sir
Gokul Krishnan
Gokul Krishnan Vor 8 Tage
What notepad are you using
harith adam
harith adam Vor 8 Tage
do you have the source code?
ShoPE oF EdiTiNg
ShoPE oF EdiTiNg Vor 8 Tage
waoooooo helpful vedio....plz make somemore vedos on web desiging
Elvis Adilaj
Elvis Adilaj Vor 8 Tage
can someone plz explain mee why when i make save to css is gone to notepad?and the css cant work at index cos everyone go saved at notepad.thanks
Fawad Ali
Fawad Ali Vor 9 Tage
Yar bahi button ki class bani liken us mai dubara btn ki class q bani hai ??
Keith Virgina
Keith Virgina Vor 9 Tage
i cant make the link hover effect tho.....can anyone help me with this issue?
Nehal Ansari
Nehal Ansari Vor 9 Tage
Thank you so much brother...
Noran Ahmed
Noran Ahmed Vor 9 Tage
i really dont understand a word of your language but this is really helpful ty
jyoti patil
jyoti patil Vor 10 Tage
Thank you so much sir
Web dev
Web dev Vor 10 Tage
Thanks for your appreciation keep supporting
Titan Movies
Titan Movies Vor 10 Tage
Nice video
Web dev
Web dev Vor 10 Tage
Thanks
Shourja Das
Shourja Das Vor 10 Tage
I'm 13.....and I got it totally......you teach amazing.
Aman Yadav
Aman Yadav Vor 10 Tage
following same steps but still my image is not showing
Ayush Tripathi
Ayush Tripathi Vor 10 Tage
Bhai mast banaya video le baba
Dil Ka Raja
Dil Ka Raja Vor 10 Tage
Dear sir , This video is awesome .I want to learn HTML & CSS . PLease help me , This is my mail id: somujana84@gmail.com /Mobile no- 916294586709
S S
S S Vor 10 Tage
Hello sir.If you want to learn from youtube that is great.Also you have to read some website content such as javatpoint mdn network(do it)
im_ nabila
im_ nabila Vor 11 Tage
Hi, which txt editor were you used ...?? Awww, pause this video 😄 want to say that , in a word it's very outstanding 😍😍 few days,I'm looking for this kind of video ❤ thnqqqq😊
Web dev
Web dev Vor 11 Tage
Sublime text
High Quality Content Channel
Thank You bro i subbed ...God Bless
Rupesh chauhan
Rupesh chauhan Vor 12 Tage
where from i get this code any link gdrive githhub.??????? very important
Khushi
Khushi Vor 13 Tage
Which app is using in this video for writing code??
Web dev
Web dev Vor 13 Tage
Sublime text
RepOrteR BAba
RepOrteR BAba Vor 13 Tage
Oh bhai Hindi channel iz love👀❤🔥
Yirick Arzoumanian
Yirick Arzoumanian Vor 14 Tage
Hi Dev... I'd tried all the HTML scripts all couldn't change the directions from left to right and also the background picture isn't a free version why shall i purchase ?
S S
S S Vor 10 Tage
Do not need to purchase.Visit pixabay either search free images for web.
No More
No More Vor 14 Tage
Best video very very helpful.
Mahmoud Adel
Mahmoud Adel Vor 14 Tage
Really all thanks for you❤
VK GAMING
VK GAMING Vor 14 Tage
Which software do you use here
VK GAMING
VK GAMING Vor 14 Tage
@Web dev thanks buddy
Web dev
Web dev Vor 14 Tage
Sublime text
Muhammad Afzal
Muhammad Afzal Vor 14 Tage
Thats what I was looking for plaese continue this video we need a complete static website... Btw thanku so much
S S
S S Vor 10 Tage
To get more use can use bootstrap and materialize css
Saraswati Mohanty
Saraswati Mohanty Vor 15 Tage
Please send the pdf of coding on saraswatimohanty300@gmail.com . Good computer tutor. Thanks.
jewel Pasha
jewel Pasha Vor 15 Tage
So good dear, you have done everything very clearly and transparently....much love, tc...
Abdul Bhashith
Abdul Bhashith Vor 15 Tage
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 ❤️
Vishal Mandave
Vishal Mandave Vor 15 Tage
Bhai background image lagane me problem aaraha he. Image Ka address kaise find kare.
Web dev
Web dev Vor 15 Tage
New video ki description check kro
Vishal Mandave
Vishal Mandave Vor 15 Tage
@Web dev Bhai insta Id?
Web dev
Web dev Vor 15 Tage
Insta pe msg kro
Rishikaa Verma
Rishikaa Verma Vor 15 Tage
Header part is not helpful. As i have tried it according to your guidance but it didn't showed me background like that.
Rishikaa Verma
Rishikaa Verma Vor 5 Tage
@Web dev yeah sure
Rishikaa Verma
Rishikaa Verma Vor 5 Tage
@Web dev i exactly copied Your code but their is no any changes found..
Web dev
Web dev Vor 15 Tage
So check your mistake if you want my help msg me on instagram
Jelmer Immeker
Jelmer Immeker Vor 16 Tage
your amazing
MixVid
MixVid Vor 16 Tage
mine doesnt work, no display when i open it in browset
S S
S S Vor 10 Tage
Right click on your file then choose browser.
Darko Babić
Darko Babić Vor 16 Tage
Thank you!! Only linear-gradient don't work for me and I don't know whyy
Tushar Mukherjee
Tushar Mukherjee Vor 16 Tage
bhai mast h...keep helping us.
arif ahmed
arif ahmed Vor 17 Tage
Made this took more than 1 hour
Mega Bass Boosted
Mega Bass Boosted Vor 17 Tage
Not working
Sukan Techie
Sukan Techie Vor 17 Tage
Kindly put all these code on GitHub
Ayaz Shahid
Ayaz Shahid Vor 17 Tage
The tutorial is very helpful. Please let me know where can I download the logo and image file you have used in this video?
Uday kumar
Uday kumar Vor 19 Tage
How to make it public or Live, so that others can also see.
S S
S S Vor 10 Tage
Upload on server.
Saikiran Settibatula
Thank you brother...Stuck with some doubts and ur video helped me to overcome those.🙌🔥
Divya reddy
Divya reddy Vor 20 Tage
Hii, I am unable to get image as background, can someone help me out
Divya reddy
Divya reddy Vor 20 Tage
@Web dev Thank you Sir, I got it now, I watched video again , Nice effort sir. Thanks for the video
Web dev
Web dev Vor 20 Tage
Msg me on instagram
Muhammad saqib shahbaz
thanks sir exclent work
Amit Kumar
Amit Kumar Vor 21 Tag
Please make 2nd part to show service, and whatever you added in this..
Ameya Kulkarni
Ameya Kulkarni Vor 21 Tag
Thank you so much brother for this amazing tutorial..!! :):)
Nikhil Kshirsagar
Sir image hi show nhi ho rhi background me URl copy Karne ke baad bhi...
Umesh Chand
Umesh Chand Vor 21 Tag
Bhai ye kon sa software hai
Umesh Chand
Umesh Chand Vor 19 Tage
@Web dev thanks bro
Web dev
Web dev Vor 20 Tage
Sublime text
Bloop
Bloop Vor 22 Tage
ul li a:houve{ background-color: #fff; color: #000; DOESNT MAKE NOTHING IN MY WEB
Web dev
Web dev Vor 20 Tage
Msg me on instagram
Casie Kelsie
Casie Kelsie Vor 22 Tage
im doing my school assignment. now i know some more features to add to my templates. Thank you so much 🙏🙏🙏 have a blissful day 👍💛
Casie Kelsie
Casie Kelsie Vor 13 Tage
I got a bright red A
Nächstes Video
Learn CSS in 12 Minutes
12:11
Aufrufe 1 800 000