How to create multiple Html subpages without writing redundant code?

Question

everyone currently I am working on a project which a Financial web application. But as I'm moving forward code redundancy is increasing & particularly for HTML code.

I have multiple Html pages on my website such as Dashboard, EditProfile, AccountStatistics, etc. For Eg.

1. DashBorad - enter image description here
2. EditProfile - enter image description here
3. AccountStats - enter image description here

Now judging from the above pics you guys can see every time we navigate from one page to another only the main section content is changing but the body structure & design of the website remains the same.

Problem: If i want to create a new page I have to include code for header, sub-header, sideBar, footer which is repetitive. I just want the main-section code to change. For eg - Made one file like Body.html which contains code for header, sidebar, etc & every time I want to create a new page then only code for the main-section has to written which be can later merge with the body.

How can we achieve this?

(Tech used - Html, Css & JavaScript)

Note: I can also attach code if anyone wants more clear understanding!

Thank You! Cheers to coding :)

Answer 1

You can use Frontend Frameworks like React/Vue. Depending on if it's a static site, you can use stuff like Jekyl/Hugo. If you want to go the SSR way, then you have Angular Universal/ ASP.NET Core/ PHP way.

Depending on your use case, you can't really go wrong either way. If you're new, pick either one and get started Learning.

Have fun!

Answer 2

This is an excellent use-case for a library like ReactJS (and other similar alternatives). Using React you can define 'components' for your header, sidebar and other common parts of your webpages that can be reused in different places. You can also update each of these components separately.