How To Make Website Using HTML And CSS | Website Design With HTML And CSS 

when i hear this accent, i know that video is going to be excellent

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.

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 🥇🏆

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

One of the best tutorials out there on creating a static website. extremely beautiful and informative. Thanks mate!

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

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

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)

love the tutorial. Would be great if you can include the static files like background image and logo. Awesome work!

Easy to follow and absolutely love the design. Thank you!

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 😂 👍

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

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

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

It would be very helpful if you provide links for the images and logos used in the making.

Today is the first day of my html and css journey .I'm going to loving it. video is just incredible.

finally i found someone who did a video that is not 1 hour long, thanks man

What a fantastic project! Wonderful! Thank you!

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

Now hard my exams are coming focus! Why I am tempted to your channel?

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

Thank you very much! I'm new to web development and the explanation is very clear.

thank you for your easy tutorial,i have created my port folio for my freelencing account by watching your video.... thnx from our heart

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

Easy and simple projects. Really great for beginners like me. Thanks a lot. Plz, add the source code with the video.

Thank u very much I just completed my first website for ur help tnxs alot

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.

Thank you so much, sending love from Morocco

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.

thank you man for this video, I'm really enjoyed when i code my webpage with you and see the process

Me: “There’s no way you can teach me that from scratch in 10 minutes..” Easy tutorials: “Hold my beer...” 👏👏👏

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

Amazing! Explained extremely well. ❤

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

Another great video! Yesss

Why is it easier than what we were taught.....I wonder why I pay to teach myself on RU-vid 😭😭

Loved the way you show us Thanks alot 💜 I learnt many new things as a beginner

i really love the way you explained things. Thank you soo much for the video

I highly recommend his Udemy course guys especially the one with 8 projects.

I just coded along with your tutorial. It was very easy to follow. I've completed the whole project. Thanks for your help!

This is amazing. I learned CSS and HTML from many short courses but this taught me more 😂

Thank you so much for explaining make website using HTML and CSS in such a simple and beautiful way.😍

Good design 👍 but always complete the tutorial into responsive version.

Really easy to follow... great job!

You are a good teacher sir, I like your way of teaching 😊❤️

Maybe I need 1 hour to make this web site. But you make only 10 minutes with explaining. So awesome!!

Good job nothing else to say 👍

Absolutely love your videos! But can you please clarify why you added two rgbs in the linear-gradient? Why not one? 2:47

this video really helped me out and was fantastic great work man keep it up and make more videos like that

Simple tutorial to learn HTML and CSS. Thanks a lot.

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.

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?

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

Man this is really fast and easy tutorial to create a webpage.😊

I loved the video, I really like when videos are short like this one.

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

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 ❤

Would be great if you shared source code too!

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

This is so good thank you very much, God bless you 🥰🙏

Needed this content. Thanks to the pple who liked the video and so youtube put this video in top of my search results...

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 ?

Uhm can someone answer my question? Why the hover is not working on my website? Even i follow the procedure in the video?

Awesome video. Thank you for sharing this wealth of information. It was very interesting and very useful video. I’m pinning it to share!

Awesome video man... But I had difficulties understanding the positions, I would be glad if you expatiate more on it Thanks man

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

The background image was taken in my country! Love the clean design.

Great Video again . Its brilliant. A bit fast though but fantastic. Thank you

video was good . i think you should have explained as well why you use properties, what is the purpose of using properties. etc etc

Amazing Video, Simple and easy to follow

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 !

really easy to learn (web design) video. Thanks from Dhaka, Bangladesh. CEO, GIGFT Genuine Institute of Garments and Fashion Technology.

Learning and knowing this by memory is impressive lol. After many years i guess you just get used to it.

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 😄

Wow, you're the best. Subscribed.

Brilliant stuff for website creating! Man Here you go!

Niceee! Thank you so much for this! Amazing!

The video was really simple and beautiful to watch.

Your video tutorials are awesome and helpful.

You just helped me YAAAY tysm

such a legend manyyyyy thaaaaanks to you saved my project!!!!!

Nice video for a very very beginner like me, but im hoping that you also explain what are those or the purposes of each tags for in html and at the css file.

Super Splendid...so simple and straight forward....❤❤❤...let me take from your steps... what a simple markup... With thanks From Eswatini...

This guy is a legend my project completed in 15 min

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

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!

This was very informative and helpful! Thank you.😃

Thanks a lot for this wonderful video.......GREAT

you have done a great job. lets get start it. God bless you

It's soo easy to learn more things thankyou sir❤

Its really awesome bro. In another video plz add how to add the content on home, bedroom, kitchen through button. I am waiting for it. It helped me a lot thank you once again.

too good , too much helpful, and too much easy........

Thank you for giving this video, I am making website like this.

Brother amazing video... For a beginners it's very usefull keep going expect more videos....

The best introduction tutorial ill find on css.

Wah kya baat hai Itna simple way 👌

Thankyou. You are my sir. ❤️ This work is excellent. I give to this channel 🌟 🌟🌟🌟🌟. Thanks sir. Love from sri lanka 🇱🇰 ❤️

Thanks man i was just looking for something like this.👍 #New_Subscriber😀