Build A Responsive Multipage Education/School Website using HTML CSS & JavaScript Complete Tutorial
ฝัง
- เผยแพร่เมื่อ 28 ก.ค. 2024
- Hostinger Discount: www.hostg.xyz/SH8cs
Learn how to create a completely responsive multi-page education/school website using HTML, CSS, and javascript. This is a step-by-step beginner web development project tutorial on how to build a modern school or education website using html5, css3, and ES6 javascript.
Responsive React Portfolio Website with Theme Customization (FULL COURSE): www.udemy.com/course/react-js...
Source Code, Assets & Live Demo: www.buymeacoffee.com/egator/e...
Become a patron: / egator
This complete website tutorial will teach you how to make a responsive multipage website from scratch. This website will have a Home page, About page, a Courses page, and a Contact page with a fully functioning Contact Form.
Features:
responsive navbar with an animated menu toggle.
responsive categories section.
responsive courses section.
responsive frequently asked questions section.
responsive testimonials section (testimonials slides).
responsive footer section.
responsive achievements section.
responsive team section.
responsive contact form.
Responsive Social Media Website: • Responsive Social Medi...
Responsive Portfolio Website: • Responsive Personal Po...
Watch More Tutorials: / @egatortutorials
Assets: drive.google.com/file/d/1nmJT...
Timestamps:
00:00:00 Intro (Project Preview)
00:08:26 Project Folder and Files Structure
00:10:37 VSCode Extensions (emmet & Preview on web server)
00:11:35 Navbar HTML
00:14:10 Using Iconscout (unicons.iconscout.com/release...)
00:15:03 Browser Default Styles reset
00:17:38 CSS Root Variables
00:19:13 Importing Google Fonts (montserrat)
00:21:00 General CSS Styles and Classes
00:27:10 Navbar CSS
00:29:56 Header HTML
00:35:25 Header CSS
00:38:12 Categories HTML
00:41:45 Categories CSS
00:49:15 Navbar Styles Change on Scroll using JavaScript
00:52:13 Popular Courses HTML
00:55:45 Popular Courses CSS
00:59:46 FAQs HTML
01:03:05 FAQs CSS
01:08:20 FAQs Toggle using JavaScript
01:12:00 Testimonials HTML
01:15:45 Testimonials CSS
01:20:59 Testimonials Slide using SwiperJS (swiperjs.com)
01:27:10 Footer HTML
01:29:05 Footer CSS
01:34:13 Responsive Design for Tablets (CSS Media Queries for tablets)
01:36:50 Navbar Dropdown Menu Style
01:41:50 Navbar Dropdown Menu Toggle using JavaScript
01:46:32 Navbar Dropdown Menu Animation using CSS Keyframes
01:57:40 Responsive Design for Mobile Phones (CSS Media Queries for mobile phones)
02:05:00 About Page Achievements HTML
02:11:00 About Page Achievements CSS
02:17:32 About Page Team HTML
02:23:15 About Page Team CSS
02:31:50 About Page Responsive Design (CSS Media Queries for About Page)
02:37:08 Courses Page
02:40:45 Contact Page HTML
02:46:20 Contact Page CSS
02:55:40 Contact Page Responsive Design
03:00:28 Form Submission using FormSpree (formspree.io)
03:05:50 Adding Background Image Texture
Calm, thorough and patient, thanks for all your great tutorials
Coming back from an abrupt 3 month halt, this is exactly what I needed to refresh my memory. A straightforward, comprehensive and project oriented recap of the basics of HTML, CSS and Javascript. This is also a testament to how coding must be preceded by careful consideration and thorough planning so that you don't end up wrestling with your own code down the line.
Thanks a bunch
Wow. I'm sold.
What I like about this channel is when it provides tutorials along with explanations of every line of code that is made.
So that everyone who follows the tutorial, besides being able to make it but also understand the function of each line of code.
Thank you, thank you very much for this quality content.
Thank you..
@Egator am in love with how you explain what you are doing. I've finished watching and am getting hands on. You have gotten a subscriber 😀
I Just completed teaching my self and mann u have motivated me to sit and make a project right away and you have a very good way of doing things because of which i have set my standards high in my mind to achieve something like this ..great tutorial brother
.you got a sub!❤️❤️
Very well explained...this is by far the best tutorial video on wed dev I've seen on TH-cam
Man! you are a great tutor, this is a solid but simple approach to project. Keep up the Good work bro...
Thank you so much . I watch this tutorial and practice it with my own hands. I learned a lot of things as a beginner. Thanks again
This web educational site and its explanations really have a great value. Thanks a lot EGATOR
This is awesome build great stuff, thanks for sharing your work.
wow!! I'm impressed by your skill. The way you wrote the code in an organized manner and is definitely future proof and flexible.
Just One tip for you please don't hide subscriber count as it make viewer think of a fake account or something.
Anyway you gained a subscriber 🙌🏻😊.
Every line explained! You're an amazing tutor
Thanks a lot bruh
OMG im amazed with your work, you won a new follower. Thanks for this!!
you're the best web development teacher on TH-cam!!
This is the type of channel I'm going to start watcing.
You've got one subscriber. Really glade to find your channel though. Its depressing that more and more tutorials nowadays are either on tailwind css (really hate this approach) or just speed coding with plain css (no use of grid or other powerful css features) without really teaching anything. Really appreciate your efforts bro...!! Keep motivated and creating more useful stuff like this...!!
I love how you built it alone with Vanilla JS. That's awesome. :)🔥🔥🔥 Keep up the great work.
Completed ✅💯
Thank you soo much, learnt allot from this🙌🏻
This is Awesome, thank you so much❤
Not watched the video but the intro and you saying you would teach that.....I am in ❤❤❤❤.....Needed this.
Subscribed, bought you a coffee, watched every single minute, and every single advert. This was sooo detailed, no clickbait, No watch out for parts 2, 3 4 5.....Good Stuff. Commented on all my codes with your explanations, straight to the point and detailed. Very impressive, THANK YOU!!
bro can you give me the images because i can't pay for it ?
Wow!!! Thank you sir very much impressive you have no idea how much this helped me!
Loved you content man, Really helpful for me indeed :)
thankyou sooo much for this tutorial, i have learned many things in this video, love from India
Wow good job man this is so difficult! Great keep going
greate work! Perfect and your teaching is too good.
Dear EGATOR I have been to a few videos on youtube but yours is by far the best for explanatory and detail thorough well documented video. Thank you for your support and kindness and you have definitely got a subscriber. 👍
Love your work EDATOR. You are brilliant and the absolute best at detail descriptive material. Thank you for helping beginner developers like me. Can't wait to start your other work. 🙂👍👍
Completed 💯✅
Thank You Bro 😊
Wow EGATOR I am impressed by your Skill, at first I just Pick an Random project and saw you channel I though it was some simple channel but not now after seeing your projects , I have start doing some your projects, it was brilliant website and I am learning new thing I hope you will keep uploading the new videos
Thanks Brother... 🥰..
Your are awesome at this i understand how you teach very easily..
You are amazing bro 🥰🥰🥰🥰 keep it up
Amazing explanation. Loved the tutorial
Wow I just found this channel and I feel like I just came across a gold mine. A hidden Gem. You should have a million subs. I worked as a web developer in the early 2000s. I've been doing photography and 3D Modeling for the past 15 years or so. But I'm getting back into web developement and oh boy am I rusty. This is EXACTLY what I needed to completely go through a relearn and knock the rust off...WHILE having an awesome portfolio project by the end of it. I hope you can keep these coming! I'll build as many as you put up! I love how it's not one of those boring just one screen with a few headlines in big letters and someone saying "Hi my name is.." and a pic and that's it. You actually took us through building a whole real website!
Wow! You are one of the few that keeps me doing this. I'm honored, and I really appreciate your kind words.🙏🤩 Even better projects coming up!
you are a great man, thanks from Morocco
This is wonderful. Thanks guy
Great content. You've got yourself a new sub
That's amazing 👏 😍
For me and you because this is my first website that I have with help of you great work bro 💪 👍
Thank your Ernest, great tutorial 👍
This is nice.. I've learnt so much
Amazing 🤩 keep it up.
Thank you so much for this tutorial it was really really helpfully
wow!!, this a good tutorial . im starter to this world and i learn a lot of useful things .
they don't show this alot in the school in turkey greetings .
Exelent Video, I love your Work, thank you very much !!!
Guy thanks alot you helped me understand alot of stuff
you're always number one🤩 I love all your videos bro ♥️ I hope to be like you someday
wow this is grate, i really love this, thanks for this
Outstanding job!!
Thanks for this man!
Absolutely fantastic course! Thank you so much!
By the way, if you guys would like to make it so that the textarea is not adjustable in size by the user, use this line of code:
All you have to do is add the required style to not be able to be resized. Hope that helps!
around 2:56:00
Loving this, seems great
Thanks for including the assets link!
That was a way better than the Udemy session!
Awesome video here. Maybe I should do one similar to this too!
GREAT VIDEO, CONGRATULATIONS!
Thank You sir for this video it helped me alot in my projetc Thanks Again !
Thank you, EGATOR. I hope I meet you one day.
Thank you soo much this video is very very usefull to my project
thank you! it's nice
wowwww just wowwww i am going to share this to many of my friends
Hello, thanks for uploading such a nice video with explanation.
This is incredible , all these for Free?
You are the Best Bro.
Nice its Help me a lot
I'm so in love with your content. I can't believe saying this is how my lecturers should be teaching. I understood every bit of the code you incorporated. Thanks for the vivid explanations @EGATOR.
You’re very kind🤝
@@EGATORTUTORIALS I can't wait to explore more from your page.
@@EGATORTUTORIALS PLEASE SIR . PERFECTLY SIR. I'm hoping that running a website based on what you've taught us won't...offend anyone.
Bro You are a Genius! ❤️
thanks for the video, i like the way you explain
Thank very much you Sir ,,
You are the Best from The Best
Master
Thumbs up! Keep on rolling..
Thank you so much sir it really helpfull ❤
Oh boy!! One of the best vids on YT I learnt a lottt of javascript from this and I even made a login page thanks to ur guide I made it next to the nav bar!!! You earned a sub.
could you help me plz with how did you doawnloaded the icons cuz it seems that theyre subscriptions plz the login page and thanks
Marvelous tutorial. I'm impressed by your teaching skill. Thank you very much.
You’re welcome, Saman. I’m glad you find it helpful.
Wow just nice.. I had a lot of latency that have all been fulfilled today
nice project , thanks
from bangladesh.
with your tutor, am good now, I got a job thanks Egator
thanks , I liked , more videos pls
It's really amazing website. I have done this website.👍💯
i have just started but i can surely say this is Legit...its what i needed really
I am new in the field of programming, I have watched and downloaded a lot of videos on TH-cam but none has explained the concept explicitly as you did.
You may make another video for us on PHP and Javascript, please.
May God reward you for the immeasurable knowledge I derived from your experience.
Thank you
Did you build this website bro?
Thank you @EGATOR for this amazing video and project. Very well explained and lovely neat code. And you're Ghanaian too like so amazing. Keep up the great work. Just subscribed to the channel.
Welcome to the party, buddy🥂
good job bro thanks for share..
Thank you so much sir 🙏
@EGATOR ... Thank you for this! Very much helpful. Please can you create a full stack real Estate marketing website for brokers 🙏🏼
Nice tutorial bro
Really you deserve more subscriber
21:40 really helpful thanks for this tip, I'm beginner
Thanks for your assistance
Thank you for this great tutorial, we appreciate what you're doing here. Please can you do the backend part, where user can place an order to buy a course, something related to Udemy platform. Thank you.
Lots of love from Bangladesh
Great project...add backend for beginners please
Very nice video !
Awesome tutorial
Beautiful Beautiful
I enjoyed😃
can I add it to my resume?
you are amazing thaaaank you very much
Great tutotial boss...Do you have a course on JavaScript?
nic explanation and very nice teaing skills
Finally finished making this website! Thank you EGATOR this made me learned a lot about web development
Now I will learn PHP !
I recommend you learning Django instead of PHP, If I recall correctly Django is more secure than PHP.
@@madebydevon I just found it out, but the things is I have already started PHP since 3 weeks and learned quite a lot, on top of it it's been years since I have used python so Django will take more time to learn
great tutorial thank you❤❤❤❤
Glad it was helpful!
This is beautiful ❤❤
Awesome Channel!! I desire to you a bunch of thousands of subscriptors!
nice project thanks
I am totally grateful to God and to you for great work you have put in place to ensure others benefit from your wealth of experience. I must confess your channel remain the best place to learn web development. I followed your video from beginning to the end and I was able to get same results with you. Thanks and I really appreciate.
I'm glad you found my videos helpful, Oguntuyi.
@@EGATORTUTORIALS Sir this video is awesome but I facing during run time of testimonial slider
Because Swiper is not defined
@EGATORTUTORIALS I am totally grateful to God and to you for the great work you have put in place to ensure others benefit from your wealth of experience. I must confess your channel remains the best place to learn web development. I followed your video from beginning to end and I was able to get the same results as you. Thanks and I really appreciate it.
Sir this website is great 👍😊