How To Make Website Using HTML And CSS | Website Design With HTML And CSS
HTML-код
- Опубликовано: 8 ноя 2020
- Learn How To Make A Website Using HTML And CSS | Website Design With HTML And CSS | Website Design Tutorial
❤️ SUBSCRIBE: goo.gl/tTFmPb
❤️ Complete website Using HTML and CSS
✔️ 8 Complete website step by step
✔️ Source Code Download
✔️ 76 Lectures, 12 Hours Video
✔️ Course Completion certificate
👉 easytutorialspro.com/go/course/
Here in this video you will learn to make a website header using HTML And CSS step by step
-------------------------------------
You may like below HTML and CSS tutorials
HTML and CSS from Beginning
• HTML And CSS Tutorial ...
Make Complete Website Using HTML & CSS
• How To Make Website Us...
Make Job Website Using HTML And CSS
• How To Make Website Us...
Create Travel Website Using HTML and CSS
• How To Make A Website ...
Make Ecommerce website using HTML and CSS
• How To Make Ecommerce ...
-------------------------------------
My recommended tools and tutorials
👉 easytutorialspro.com/
------------------------------------
Image Credit
www.pexels.com
-------------------------------------
Like - Follow & Subscribe us:
► RUclips: goo.gl/tTFmPb
► Facebook: goo.gl/qv7tEQ
► Twitter: / itsavinashkr
when i hear this accent, i know that video is going to be excellent
Lol!!! It's Indian Accent bro. Indians are tech savvy
same
Indian? I knew it too. Wish he would explain the codes rather than just typing it.
Same))))
@for reelinc Racism means they use SKIN COLOUR and in a BAD WAY
This ones on accent and its a GOOD comment
Really awesome video! I've been trying to build a webpage for months now and it always went bust at some point when I tried to put my own info, logo, images etc... But your tutorial keeps it simple & clean, so I was finally able to have it done! Thanks a lot 🥇🏆
Hy bro, can you send me source file of this tutorial please
@@smartilyasdesign4272 smart ilyas isnt very smart is he
@@smartilyasdesign4272 I too would like this.
@@sonicraft9996 lol
@@inventor2029 im glad you liked this one bro, i hope it got you nice and wet. Have a lovely day!
I studied IT but didn't pursue my field for over 10 years already and now wanted to pursue it again, I'm just amazed of what kind a developer you are. You put so much time in your studies back then I'm sure hehe because me I don't =D anyways thank you for the wonderful tutorial I will probably create my website again tomorrow. Earlier I tried creating website in wordpress.
Try vs code
style.css
*{
margin: 0;
padding: 0;
font-family: sans-serif;
}
.banner{
width: 100%;
height: 100vh;
background-image: linear-gradient(rgba(0,0,0,0.75),rgba(0,0,0,0.75)),url(Untitled_presentation.png);
background-size: cover;
background-position: center;
}
.navbar{
width: 85%;
margin: auto;
padding: 35px 0;
display: flex;
align-items: center;
justify-content: space-between;
}
.logo{
width: 120px;
cursor: pointer;
}
.navbar ul li{
list-style: none;
display: inline-block;
margin: 0 20px;
position: relative;
}
.navbar ul li a{
text-decoration: none;
color: #fff;
text-transform: uppercase;
}
.navbar ul li::after{
content: '';
height:3px;
width:0%;
background:#009688;
position:absolute;
left:0;
bottom:-10px;
transition:0.5s;
}
.navbar ul li:hover::after{
width:100%;
}
.content{
position:absolute;
width:100%;
top:50%;
transform: translateY(-50%);
text-align:center;
color:#fff;
}
.content h1{
font-size:70px;
margin-top:80px;
}
.content p{
margin:20px auto;
font-weight:100;
line-height:25px;
}
button{
width:200px;
padding: 15px 0;
text-align:center;
margin:20 px 10 px;
border-radius:25px;
font-weight:bold;
border: 2px solid #009688;
background: transparent;
color:#fff;
cursor: pointer;
position: relative;
overflow: hidden;
}
span{
background: #009688;
height: 100%;
width: 0%;
border-radius: 25px;
position: absolute;
left: 0;
bottom: 0;
z-index: -1;
transition: 0.5s;
}
button:hover span{
width: 100%;
}
button:hover{
border: none;
}
INDEX.html
My First Website
Home
Bedroom
Dining
Kitchen
Backyard
Design Your House
whatever
WATCH MORE
SUBSCRIBE
Thank you so much
please give me code of this website 🙏
Thanks dude
Hey can you help me I’m still trying to to create web page following this video but I’ve my own image and logo but my css file doesn’t link to my html file plz help
@@zarkjadoonglobe , name your css file "style"
You just do everything so easily and make it interactive!!! I have been searching for some features in CSS and boom u got anything, man. Appreciate it. May Allah bless you for putting so much effort on educating us)
What kind of sotware did he use to create website?
@@hassanamidubrown4399 VS CODE its a text editor software
if you mean softwares for writing code there are a lot and the most famous is vscode so just try them and see what of them you like more @@hassanamidubrown4399
@@hassanamidubrown4399Vs Code
@@hassanamidubrown4399 text editor , or vs code
One of the best tutorials out there on creating a static website. extremely beautiful and informative. Thanks mate!
Sir, thank you so much. I really appreciated your efforts. I would be grateful if you can also create a website on construction. Your videos are completely substantial and it's 100% guidance. Thank you once again
hey man im a dev student specialized in backend. CSS and HTML has always been my biggest weakness, i find those languages extremely annoying and complicated but your tutorial here made it easy and logical. thanks a lot man
Is it you Anakin?
love the tutorial. Would be great if you can include the static files like background image and logo. Awesome work!
Anyone know the dimensions of the background image and logo? If I know the width and height in pixels, I can use any free image editing program to crop a free image from pixaby or pixels.
@@ghostwavewrider 16:9 ratio pretty sure
Awesome tutorial, thank you! I was trying to figure out how to make my logo and menu allign for days, and your video helped me do it! 4:07 justify-content: space-between; is all I was missing. hahaha
You can use Sublime it has the function
@Abhinav_Playz I agree. VS Code has everything a coder needs.
I was able to create this webpage all by myself without watching the tutorial, But did learned some of the things that I didn't know before. Really useful video.
I’ve been searching for at least a year on a good tutorial and how to do it right. Thank you for making it look good and making it work 😂 👍
Thank you for the amazing video... for those who are facing problems showing the span under the button it is just because it is hidden under the background image ...
so put the z-index: 0; for banner and z-index:1; for button and the prblm is solved
🥰
thanks for that mate👍
omg lifesaver, was stressing for 20mins!!
You can improve your production speed and efficiency by just using the vs code and live server extension . It will run the code you are typing on a local server host and update it in real time as you update your code . It will help you a lot . Give it a try and thank me later ❤️
finally i found someone who did a video that is not 1 hour long, thanks man
It would be very helpful if you provide links for the images and logos used in the making.
Now hard my exams are coming focus!
Why I am tempted to your channel?
if anyone is facing problem in the last part of the video referring to the hovering over buttons and the text gets covered.just do z-index=-1 in span and z-index =0 in the button section above
Thanks Anand, this comment will help others
Thank you so much Anand.....i was stuck on that part
The pleasure is mine❤️
@@anand_prabhat Thank You so much! This helped me a lot..
Thanks!
Why is it easier than what we were taught.....I wonder why I pay to teach myself on RUclips 😭😭
Me: “There’s no way you can teach me that from scratch in 10 minutes..”
Easy tutorials: “Hold my beer...”
👏👏👏
yes boi
Easy to follow and absolutely love the design. Thank you!
Today is the first day of my html and css journey .I'm going to loving it. video is just incredible.
Hows going? How much hair did you lose?
Thank you so much for this video, you just streamlined the learning process for html and css for me and i cannot thank you enough
This is amazing. I learned CSS and HTML from many short courses but this taught me more 😂
What a fantastic project! Wonderful! Thank you!
Hello Vikash & Avinash, the content is really good, there is just one thing that I would like to point out.
Please please provide at least one sentence of explanation on each line of the code, so that we know why we are using what we are using.
Still I learned a lot from your video. Thank you so much for the great content.
Good tip but they're body language is super good and really good at explaination but good point 😊
yea comments
Thank u very much I just completed my first website for ur help tnxs alot
I am a beginner. When I watch this video I understand only 45% what you typing there .
Guys I recommend everyone who started learning also try to watch more videos like this it will help you understand and you gonna remember better of typing code what you learned from somewhere
You're the reason i am coming back to learning code otherwise i would have waited for a while .
Subscribed and bell icon is on
thank you for your easy tutorial,i have created my port folio for my freelencing account by watching your video....
thnx from our heart
You are most welcome
Thank you very much! I'm new to web development and the explanation is very clear.
Thank you so much, sending love from Morocco
Thank you too Nassima
Great Tutorials Sir
Am a beginner and this video helped me create a complete webpage like yours thank You Very much I owe you a subscription
Easy and simple projects. Really great for beginners like me. Thanks a lot. Plz, add the source code with the video.
Needed this content. Thanks to the pple who liked the video and so youtube put this video in top of my search results...
I highly recommend his Udemy course guys especially the one with 8 projects.
Another great video! Yesss
it just ctually help me in my practicle exam
im a python programmer but my school give me html work but i like it
Thanks for the tutorial. It is interesting because I am using AI but the AI always tell exactly what the next line is while I am typing. It is always correctly guessing what you are going to say =)). Pretty impressive
I just coded along with your tutorial. It was very easy to follow. I've completed the whole project. Thanks for your help!
send me the link
could u plz upload it to google drive and send the link here
if possible
How could you possibly did it I’m still trying to create I’ve my purchased logo and image
My background image url (3.01) didn't work without a quotation mark ("") like yours.
It seems the ' .content transform: translate(-50%)' moved my content all the way to the left, had to figure that 'margin-left: 50%' corrected this for me.
absolutely amazing. thank you! you make it look really easy, quite difficult to do when doing it myself but i'm sure wiht practice and more theory io'll get better
This guy is a legend my project completed in 15 min
u should provide a code in the link so that we can directly copy and run.....it will be easy for us so that we dont have to write in copy or pause the video everytime
did you find the code? i need it rn xd
can you send it
learning purposes. its better to rewrite code so u rlly get it
Abbey chutiye seekhne valo ka kya
Good design 👍 but always complete the tutorial into responsive version.
Yhhhh was about saying this
Listen ! if you want that in a responsive , you have to use CSS Grid ..
@@DrinkCola what about using css flex?
To make it responsive he can just use few expressions of Bootstrap.
I am learning so much with watching your videos . Thank you so much for sharing this amazing source of information.This one is quite helpful.
Amazing! Explained extremely well. ❤
Really easy to follow... great job!
mine is not responding
Good job nothing else to say 👍
thanks
Maybe I need 1 hour to make this web site.
But you make only 10 minutes with explaining. So awesome!!
thank you man for this video, I'm really enjoyed when i code my webpage with you and see the process
Absolutely love your videos! But can you please clarify why you added two rgbs in the linear-gradient? Why not one? 2:47
I just tried it with one and it doesn't work. So maybe because it's a gradient it has to take 2 color values
Hello, I can assist you in managing the issue. Let me know if you need anything / got a question.
I loved the video, I really like when videos are short like this one.
Glad you like it!
Thank you so much for explaining make website using HTML and CSS in such a simple and beautiful way.😍
Hey bro u know that how to write css for creating website
such a legend manyyyyy thaaaaanks to you saved my project!!!!!
Thank you so much. I have a question tho. Does the background image size matters? If so, what is the recommended size or what is the size of yours?
What size did you use? Am having some issues 😅
Would be great if you shared source code too!
The background image was taken in my country! Love the clean design.
Learning and knowing this by memory is impressive lol. After many years i guess you just get used to it.
Sir, after adding z-index:1; it's background becomes transparent after hover effect. What would i do now? And if i remove z-index then after hovering, text is not visible
me too, have you resolved it yet?
@@ducwan no but I used same code in a different project, I was able to execute the hover effect. But after many modifications too, this didn't work in this project. Idk why!
@@diptis2915 Oh, I see. I'm still trying to fix mine. =((( many thanks
Put the text color white
or other , not the same as background color
@@kzelly632 okay.. thank you I'll try
4:05 min that doesn't work the space between which i have the logo and the lists items on the same side how can i do it ?
I had the same issue man and I wish someone can help me with it
We can created separate div
Loved the way you show us
Thanks alot 💜
I learnt many new things as a beginner
really easy to learn (web design) video. Thanks from Dhaka, Bangladesh. CEO, GIGFT Genuine Institute of Garments and Fashion Technology.
Uhm can someone answer my question? Why the hover is not working on my website? Even i follow the procedure in the video?
u must have committed some error, bcz mine is working very well
Can anybody help me plz. I have added a different background image and that image is not being displayed completely(only some part) though it's fitting the entire page. I have written the same code as explained here! Does it depend on the size of the images we choose? Please reply!!!!!!!!!!!
My background image doesn't display :(
@@md7986 same
@@md7986 Any luck? My image is displaying either??
You are a good teacher sir, I like your way of teaching 😊❤️
Simple tutorial to learn HTML and CSS. Thanks a lot.
Man this is really fast and easy tutorial to create a webpage.😊
i really love the way you explained things. Thank you soo much for the video
What a amezing video it's really interesting and useful and you clearly explained about html and css from this video also thank you so much for sharing videos like this and highly recommend this channel ❤
Bro you know that you playing a right video when you hear that voice. gonna try this right now u made that Ezz for me bro thanxs
Brilliant stuff for website creating! Man Here you go!
thank you very useful.....Im done with my website now
Amazing Video, Simple and easy to follow
Awesome video man...
But I had difficulties understanding the positions,
I would be glad if you expatiate more on it
Thanks man
My Bro... Thank you so much for this tutorial, this is very helping me to not give up for my learning programming progress, now.... i can move for the next step in this begginer journey 😄
Happy to help. I will recommend you to check out this beginners tutorial too: ruclips.net/video/GAZVvpjxYQY/видео.html
This is so good thank you very much, God bless you 🥰🙏
Awesome video. Thank you for sharing this wealth of information. It was very interesting and very useful video. I’m pinning it to share!
video was good . i think you should have explained as well why you use properties, what is the purpose of using properties. etc etc
Thanks bro,I'm learning how to make a website
Thank you for giving this video, I am making website like this.
this video really helped me out and was fantastic
great work man
keep it up and make more videos like that
The best introduction tutorial ill find on css.
It's soo easy to learn more things thankyou sir❤
you have done a great job. lets get start it. God bless you
Super Splendid...so simple and straight forward....❤❤❤...let me take from your steps... what a simple markup...
With thanks
From Eswatini...
If such developers are in this world, there's no need of bootstrap, tailwind CSS and other Frontend libraries. Because, these designs are absolutely amazaing !
Nice tutorial, I have really learnt a lot from this...I am your biggest fan, thank you
You just helped me YAAAY tysm
Wow, you're the best. Subscribed.
Great Video again . Its brilliant. A bit fast though but fantastic. Thank you
Wah kya baat hai
Itna simple way 👌
Thankyou so much final today made my completed and fst design
Niceee! Thank you so much for this! Amazing!
It's really helpful sir....thank youu for this amazing video❤️
Dudem i just made it how you did it and it looks amazing! thank you so much for doing this. You make me want to learn more! god bless you!
Glad to hear it!
I love your pages
and also your speaking skills
Thanks a lot for this wonderful video.......GREAT
ty very much, we need more tutorials like this
Thank you.. Thank you so much.. For this master piece.. 😍😍😍😍😍