How to Include one HTML file into Another without any Framework or Library | HTML CSS JS Project

This projects shows how to include one HTML file into another without and library or framework in order to avoid code repetition.
It also shows how to make js file stitched in from another file into HTML file make work.
Chapters
0:00 - Introduction
1:19 - Demo
1:58 - Html Code
6:46 - Styling Code
12:15 - Include one HTML file into another
17:11 - Make JS code work included from another file
#includeHTML, #includeHTMLwithoutFramework #includeHTMLintoAnotherHTMLfile

[mikeball]

Fantastic tutorial. Clearest way I heave ever heard this described. People always assume basics, you explained everything just in case. Thank you

[smeeegheeeed]

The content returned like this isn't read by Search Engine indexing so links, text content, image alt tags are never seen dramatically reducing the pages SEO potential. The alternative would be to use a HTML pre-processor to built the final HTML content before deploying to the production server.

[HiiCode]

what if the navbar.html have it own personal javascript file. i have try it many time and after using the navbar on the another page that navbar personal javascript wont work

[teto]

Really nice and simple explanation🙂 Thanks.

[thomasstocker]

that is not good practice as most browsers will block that Ajax call due to cross-origin policy

[kennyrobertson]

Hey, thank you very much for your hard work. I need some help highlighting the active page in the navbar. Can you please help me? Thank you.

[sairabano]

I always love to watch your videos
Very simple n easy to understand
Thanks alot

[ajdrag]

Very nice. I was using a method where the HTML code was actually embedded in the js but I like this way much better. Thank you.

[chchab]

Very useful explanation. I just ask a question, how to do if you replace ce script code by a js file in your navbar file ?

[svrthardware]

You have done a ✨Amazing job 🎊Thanks a lot 🎉 for this video it really helped me

[hiennham]

but my javascript like <script src="index.js"></script> how i can import it ?

[PocketSurvey]

Thanks so much for this well explained video. I wonder if you have any ideas as to why I get 403 Forbidden when running on a real server (Krystal)? It works perfectly in the VS Code server!

[neerajbisht]

Its Not working..what is the issue?? I run your given code but nav is not showing in the page.

[ali_vijdan]

great job, I'm facing a similar problem where I need to use external js file with a component, like the navbar in your tutorial, so how can I use external js file with this navbar to show the alert?

[caterinaromano]

To insert the page header that is inside another page, how should you do it?

[leviuzodike]

When you import the javascript for the button to work, does it only apply to the nav stuff or could it potentially affect the whole page? For example, if you happened to have another li that was a child of an object of class menu('.menu li') outside of the navbar in index.html, would clicking it still trigger the behavior of an alert window and going to the home page? If so, how can we make sure the javascript only works for the html code that it was imported with?

[fbilgrami]

This is such a complicated way to explain the simplest concept. You dont have to wast 90% of the time talking about the contents of dummy pages. Just tell people about one HTML page being including in another. The basic contects of your menu will do and then JavaScript that is needed. You do appear to have sound knowldge of HTML. I am just suggesting making your tutorial simple. All the best

[DinandPower]

Thank you, It works nice. Only the mobile menu does not work (the menu is there, but no items show up. Does any-one know the solution for that?

[shifathossain]

the javascript is not working for me. It says "cannot read properties of textContent". Please help me!

[studymaterial]

but when i transfer navbar.html file into navbar folder and index.html file into mainpage folder it is not working?