How To Make Website Using HTML & CSS | Full Responsive Multi Page Website Design Step by Step 

You Indians are genius and you are so generous to share your knowledge. Much appreciation from Philippines 🇵🇭.

Honestly you have taught me more in a hour than my own university has taught me in 3 months. You make it so easy to learn and to understand. You're a life saver; Thank you ! Subscribed=YES

I am a self taught Coder. I completed so many udemy courses but I think you have teach me so many things in one hour. I like practical things. Thank you 😊

This is where it all began for me! 2 years later, and after going deep in to react for the past year, I have landed my first internship as a web dev. Keep working dudes! 🎉

Man, I must tell you that you are just great when it comes to Web Development. Haven't seen anyone who makes Web Development easy to understand like you do, since I started Learning Web Development. Have gotten so much from your Web Development projects and I must thank you for that and I encourage you to continue making tutorials like those, we love then 👍

1 hour, 11 minuts and 58 seconds spend the best way possibe. I did know some HTML, CSS and Javascript before i clicked on this video but how you showed how easy it is to make a beautiful website to both phones and computers with the tools you've already gather is incredible. You are a god among men

I have been a developer for almost 2 years but my designs kinda still sucked when I looked at them so today I just search for better designs n color and found this master piece. When I finally nail my next design n get paid I'm coming for support. Thank you so much sir.

I'm extremely grateful for this video, man. I'm not the sharpest tool in the shed when it comes to coding, but this the most comprehensive tutorial I've seen this far, and it's just one hour. You rock, dude.

I owe all of my tech ability to random Indian guys on YT.

I have watched numerous videos about website building, as I have learnt HTML, CSS, jQuery, JS, PHP but was looking for some ideas, and to see someone making a site step by step. This video is FAR THE BEST of all of what I've seen. Hats off!

I just want to say THANK YOU. I can honestly say I've learned more here than I did in my college course that had a 8k dollar price tag. I can't thank you enough. Also, I purchased the source code and I'm a very happy customer. I will most definitely spread the word and continue using your products brother. Thank you!

00:00 📜 Introduction to Website Design Introduction to creating a responsive website using HTML and CSS. Overview of the website design we will be creating. Mention of multiple pages and key elements. 05:02 📂 Preparing the Project Files Setting up the project files and folder structure. Mention of image resources for the project. Creating the initial HTML and CSS files. 06:01 🎨 Styling the Header Styling the website header section. Adding a background image with a gradient overlay. Styling the navigation menu and logo. 16:45 📄 Adding Content to the Header Adding a title, text, and a call-to-action button to the header. Styling the header content. Making adjustments for responsive design. 21:46 🍔 Creating a Responsive Navigation Menu Implementing a responsive navigation menu using media queries. Adding icons for menu open and close functionality. JavaScript functions to show and hide the menu. 30:37 🔧 Adding JavaScript for Toggle Menu JavaScript is added to handle the toggle functionality of the menu. The code ensures that clicking on the menu icon opens the menu, and clicking on the close icon closes it smoothly. 32:04 📚 Creating the "Course" Section A new section for displaying available courses is created in HTML. CSS styles are applied to make the course section responsive and visually appealing. 36:25 📊 Making the "Course" Section Responsive Media queries are used to make the course section responsive for smaller screens. CSS adjustments ensure that the content looks good on different devices. 40:21 🏢 Creating the "Campus" Section A new section representing the global campus is added to the HTML. CSS is applied to style and make this section visually appealing. 44:59 🌍 Adding Location Overlays in the "Campus" Section CSS is used to add location overlays and create an interactive effect when hovering over images in the campus section. 49:14 🏢 Designing the "Facilities" Section A new section highlighting various facilities is added in HTML. CSS is applied to style this section and make it visually appealing. 54:28 🗣 Constructing the "Testimonials" Section A "Testimonials" section with user reviews is added to the HTML. CSS styles are applied to format and make the testimonials visually appealing. 58:46 ⭐ Styling Star Icons in the "Testimonials" Section CSS is used to style star icons in the testimonials section, including their colors and sizes. 01:02:07 📢 Creating the "Call to Action" Section A "Call to Action" section encouraging users to contact for courses is added to the HTML. It includes a title and a "Contact Us" button. 01:03:00 🌐 Creating the Call to Action Section Created a call to action section at the end of the webpage. Added a background image and styled it for visual appeal. Adjusted text size for smaller screens to maintain responsiveness. 01:06:21 📜 Designing the Footer Designed the footer section with an "About Us" title and description. Added social media icons (Facebook, Twitter, Instagram, LinkedIn) and a "Made with Love" message. Styled the icons and text for a visually appealing footer. 01:10:13 ❤ Completing the Webpage Demonstrated the completed webpage, highlighting its responsive design for both large and small screens. Emphasized that the entire webpage looks visually pleasing and functions effectively across different devices.

I would really thank @Easy Tutorials for helping me with "What to do after studied all the HTML and CSS topics?" and I got my answer, thank you so much so that I could really practice everything that I have learned so far. Your designing style is best it's very precise and perfect.

Over 9 months of reading various resources on building website now, your EASY 1 hour video solved the whole problem. You're a problem solver. Thanks to you all at EASY TUTORIALS.

Great tutorial! Thank you so much. For anyone who is following along the tutorial and working if you have issue with both text-box and nav-link getting displayed below is the answer. The header tag in the index.html file should have this property "overflow:hidden" else both text-box and nav-link will get displayed on the small device screen.

People watching it in 2024 💀>>>>>>>

Just a note: you need to add "html, body {overflow-x: hidden;}" in the media query in order to prevent the user from being able to scroll to the nav-links bar when it is has a negative right value.

👉 Get code for complete website: www.buymeacoffee.com/easytutorials/e/36317

I've learned more from this tutorial, than from the last months at school!

I finished this course in over a week and I am very happy to have accomplished this. Thanks a lot for sharing and showing things so easily. I wish you showed how to host the website so that I could share it with others.

Omg, that's impossible !!! you are the best youtuber and you are so generous to share your knowledge. Much appreciation from Cambodia 🇰🇭 Thank you so much for helping us understand how to develop a website step by step.

for the people who can't review the background-image... i've found the solution: take care of "spacings" between the elements. If there's a space between linear-gradient and (colorcode), it will fail. So, for example, it is NOT linear-gradient (colorcode), it IS linear-gradient(colorcode) and, it is NOT url (images/banner.png); it IS url(images/banner.png);

I made the page successfully now feeling like pro developer. Thanks for the Amazing content

This man is literally explaining everything bit by bit ... Just awesome for a beginner to fully understand. clear explanations and concise. I recommend 🌟

Hey guys! The icons don't work because you now need an account with Font Awesome! Create an account then they'll give you a script that you put in the header! NOT the link our teacher is telling us to do! Hope this helps!

I believe this was a really well put tutorial. I am buying your course for sure! Some feedback: Try to explain the use of each item and properties more regularly, it will make beginners understand what is going on.

This is so well done and well explained.. I was so stressed about how am I going to create a website with the layout I wanted.. And I'm so glad I found this video😭 your explanations are so organized that I understood each thing thank you so much for this. A life saver indeed!

Hello man! You're a genius.. Thank you ever so much for sharing your knowledge with us. There are no any other detailed videos like yours on RU-vid. I am proud to be Indian because my fellow countrymen and women are using their knowledge to help the whole world in such a positive way. I created a website with the help of your videos while studying at a college in London, and my professor shortened my course by a whole year, promoting me to a higher level! Once again, thank you very much.

I'm on my 3rd day trying to follow everything and understand. Thank you so much🙏 this is really fun, I didn't think I would ever make a website before

I have just bought you a coffee. I have watched the entire course and I think you are the one to follow. You are brilliant to say the least. Everything well explained at every step. I have bought the source code and will deconstruct it to learn from it. Thank you the effort in bringing this wonderful tutorial to us newbies, who are willing to learn from examples. Thanks from the UK.

Honestly you have taught me more in a hour than my own university has taught me in 3 months. You make it so easy to learn and to understand. You're a life saver; Thank you !

i am the one who din'd bought source code and copied from the video only the home page took 3 hrs.Hats off to this man for this amazing work

You helped me create my first website resume ever with bootstrap, css and HTML, i love you so much, you have saved me. PS: maybe start putting paypal or cashapp link so people can donate to you!

This is more than what Universities and Colleges offer for students in a semester. Great work!

How many are watching in 2024 😅

If you are a beginner and haven't subscribed to this channel yet, I don't what you are waiting for. He is really good at it.

At this time, I have learned by you. You are so much great man.

You are a lifesaver. I never comment on videos but you literally saved me cause I was losing my mind trying to figure out how to do this!! thank you so much

much appreciate the content, biggest fan from Poland! Thanks!

how many are watching or watched in 2023🙋

Thank you very much for your help. I was able to follow along. This tutorial helped me to develop a website for a school/orphanage. I adapted some things to the needs of the school, but I really thank you. I only took two web design courses in college. I can tell you are a SME (Subject Matter Expert). I really appreciate you taking the time to do this. I'm looking forward to the next one.

Best tutorial I have ever seen. This was 1000% helpful. Thanks so much 👏🏽

great tutorial! only thing i recommend is NOT putting a width on a section, rather give it a padding of 50px on all sides. If you were to put a background color on section that has a width of 80%, then the background of lets #777 will not fully cover the whole section as there will be white spaces in the side, but if you put padding: 50px 50px 50px 50px; and put a background of whatever color, the color will then cover the whole section and not leave any spaces at the sides. better to use padding for a section than width.

This is what i made for my HND final project. Love from Sri Lanka 🇱🇰

This guy taught me entire course in such matter of seconds thanks big man

Hello. Thank you for the time you take to make this tutorials so we can learn and follow your layout. If you are using VSC as your editor you can try: (not sure about other editors) background-image: linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1)),URL("../images/banner.jpg); This is just my example, now the image should show up in your browser. Put 2 full-stops before your image.

Great Tutorial , watched all 6 parts and learned alot. Thank you.

Hands down, tNice tutorials is THE best beginner video I've watched. Others want to brag about all the sample, loops, etc they have. You keep

for the broken icons: you need to have the code from font awesome 5 instead of 4 in your header the icons themselves need to be font awesome 4 like in the tutorial 👍

I'm not even done watching but I'm loving the way the video is going....really understandable and effective

Thank you my able Tutor. I'll forever appreciate. you're a Genius.

Thank you so much for this. As a very beginner, I've been struggling for a while, now this is really friendly for my skill level right now, and it really give me hope that I can understand this Frontend development . Thank you. God bless you. This is priceless to me.

Thank you so much for helping us understand how to develop a website step by step. I must say your code writing is very neat and organized

Thanks a lot, I am going to show off with my web design skills at my lecture on Tuesday :)

First tutorial I've watched on this channel. It's amazing, I never knew I'd learn so much in one video! Concepts were straightforward, fun and easy to understand. My only complaint was the speed. It was hard to catch up with typing, and he would switch screens without warning. I had spent a lot of time going back and trying to find the spot in the video where he last finished off. But other than that, its a fantastic tutorial! You gained another subscriber

It took me hours to make this website. Faced errors so i had to start from zero. icon error, That london image was aligned in center instead of left But finally made it And ending was exciting, I felt really happy after making it ;)😅

I am running short of words to thanks to you. I just wanna say that you are a " Great Teacher" Thank you so much for providing us an easiest way to learn and improve our coding skills. once again Thank you so much Sir

You are a genius man❤️. I have learnt so much from this tutorial and please keep sharing your knowledge with us😇

Good stuff man, learned a lot especially that hover effect on campus title, coming from the bottom and fix in the center, great

Thank you so much for your patient, detailed steps. I did this stuff 20 yrs back and about gave up cause I never knew of these editors, nor these techniques. I'm very impressed with the results to far. My page has a maturity I'd never built before.

Nice tutorial, I would recommend this to my friends...

Ain't we lucky to have you Mr.easyTutorials?! 💕

aah yes i've been needing a tutorial i finished everything else XD

finally a video that shows me what goes where in CSS and HTML accordingly

what a wonderful video! Thank you so much. I still was having problems with the icons though, my website didn't show them properly. I used lineicons instead and it worked very well^^

you should start explaining why you do things when you do them, would be much better

How is it when you building a "Course" page, your and tags in CSS do not affect and in "Home" (index.html) page? Thanks!

Please buy this guy a cup of coffee he deserves it. I enjoyed doing this so much. Thank youuu!

I feel like I learned months of material in a matter of hours. Thank you so much for this.

Thank you so much ..... I learned a lot, I'm so happy I build a complete website template 🙌😊👌😍✨👏👍

Thank you for simplifying things, great video!

The lights in the subscribe botton when you said the word subscribe is just wow

U make our lockdown special ❣️

i learned so much from you, thank you so much!

So hey! Iam a high schooler and we have coding class i am kinda new for this things and i though offffff it gonna be hard and we have assignment thatwe have to submit ina week which is creating web sites with presentation i was about to cry but thanks to u i am doing great i think mine will be the second best in class since there is an amazing student ,but all i have to say god blesssssssss you with all of my heart u are like the best out here it is really easy thanks soooo much again. Subscribed too !much love from africa

Hello. Thank you very much for this great course. I am a big beginner in CSS and HTML and I was able to follow the whole course and I liked it a lot. I still encountered a problem with the integration of the icons downloaded from the link "Font Awsome icons". Both for the menu and for the stars in the comments section of Christine Berkley and David Byer, the icons do not display well. Please help me to finalize the site.

Hello easy tutorial I have tried to reproduced the website but I have been facing two problems. 1) the icons are not displaying in the website and when I submit the message on contact page I am told that the page is not working and HTTP ERROR 405. I desperately need your help to solve them.

I love your video, It´s really comprensive. Thank you, and greetings from Guatemala, America Central.

Sir the way you are teaching Universities and college Teachers don't teach this what is needed thanks for this great efforts stay blessed live long

please can you a brief project on Html ,CSS, JavaScript and React JS

i try to put the background in css file and it wont pop up in the website could you help me with it?

Hi, I am learning how to create icons and base on your teaching use fontawesome icons but when I type display:none on CSS is not working. Can you tell me why? Many Thanks your for taught me

If someone want to inhance his css skills then this video is for you guys. I have learnt new things that I have never heared

Great tutorial. I love how you explained every detail with code. I was able to do my own website homework with the help of this tutorial.

OMG, You're Great Teacher! Awesome content! Thank You Soooooooooooooo Much for teaching us🙏🏻 = love your tutorials❤️❤️❤️

Thank you so much for the tutorial, it's super helpful! Much apprecation for you!

great Video! Thank you for your work! I learned more from u and this video than from my teacher in programing in this whole year!

Someone, please help me. I tried to make this website but the commands are not working the background image, and menu option commands are on the right side, and the color is white Please help me

thank you my due assignment can now be completed

I wanted to take a moment to express my heartfelt gratitude for the incredible content you've shared on your RU-vid channel, especially your course on building websites using HTML, CSS, and JavaScript. Your videos are not only informative but also incredibly engaging and easy to follow

Awesome, this is exactly what I was looking for. I have watched a lot of your videos and it really helps me. I just hope every next video you can turn on the subtitles like this so I can see what it means too.

Hello sir please consider my problem, I have been making it following all steps but when it reach to making campus course images to be arranged horizontal they appear vertical all three yet have followed your steps. Please help asap🙏🙏🙏🙏🙏🇰🇪

I'm thankful for your videos, but I have small question about pictures on 43:50. Pictures are not coming in a row with small size, instead they are coming in a column one after each other. But the code is matching... will appreciate if u can help :3

why I can't see my icons. I've added them as he did but I keep getting small boxes???

A great tutorial, I learned a lot, thank you very much! 😍

Hi, thank you so much for the tutorial but I have been facing a certain problem. Why isnt any of my icons appearing such as the menu and close icons? I've been redoing the same steps thrice but the icons are still not displayed, only a box-like shape appears. Would love to receive any suggestions to solve this problem. Thank you!

I'm going to watch only Indian Tech Tutorials from now on! Thanks alot from Italy 🇮🇹.

I don't understand what iìmdoing wrong, I can't see the banner image when I'm doing all the steps you did 😕

Living legend, GOAT himself

Hello, I'm having a bit of trouble at 26:34 as the icons are being displayed on the full screen no matter what I do... I've tried to write other codes to hide it but it simply isn't working. Any advice?