Current best practice when building a multi-page website

To practice my refreshed HTML and CSS skills, and new Bootstrap info, I redesigned a website I haven’t revisited since 2015.

Back then, to not have to update 10 pages of individual code of a reused feature (like navbar) on an update, I used php to <?php include("nav.php"); ?> for instance, so all updates to the navbar could be done in one place for all pages using the navbar.

Is this still a common method, or is there a better way now than using PHP?

Also, is there a good resource that can run through your site/code for browser compatibility (or any other testing) prior to going live? Or maybe this can be done through my IDE (Adobe Brackets)?

Thanks in advance.

The freeCodeCamp curriculum moves towards using EJS (embedded JavaScript) in the full stack apps (or at least that’s what I used), or React.

EJS is the most similar to having PHP includes for resusable HTML.

React is a different beast, but lets you create reusable components that react to changes in state in your web apps.

If you’re focussing on front end, React is a good starting point :slight_smile:

2 Likes

It’s much the same whatever you use. Chop your site up into generic components (header, nav, footer etc). Reuse those. If your just building websites, by all means stick with PHP - you’re just rendering static pages so it’ll work great for that.

Re browser testing, yes, but it costs $$$ if you don’t want to keep signing up for a free trial period under different emails every hour (Browserstack for example). Normally very much cheaper to manually test in browsers, only costs time. Test ideally in Chrome, Firefox, IE/Edge, Android and OSX. Chrome has a pretty good emulator for mobile devices, and is excellent for a debugging Android phones/tablets. If you’re on a Mac, Safari has excellent support for debugging iPhones/Pads and XCode has a pretty good device emulator.

Note that on a Mac, you need a VM to get IE/Edge, and if you’re on Windows you can’t get Safari.

Edit: re front end frameworks like React etc, if you’re building a traditional website you don’t really need to think about them. Multi page traditional websites are basically a solved problem, and PHP does just fine, with a sprinkling of JS for the interactive parts. But if you want to start thinking about removing things like actually opening a new page every time you navigate to a different part of the site, making it more app-like, that’s where they come in: doing stuff like that without a framework tends to get hairy and you end up with a big ball of JS mess.