I have been reading about web development since the beginning of the pandemia, so I will give my opinion based in my very little experience and knowledge.
Since I started, i tried to follow this open-web philosophy (privacy, openness, no tracking etc).
I don't want any Google (tracking) on any page, and I prefer to have as light a page as possible.
You need not to worry about these Google links. there is no tracking there. It is just a link to specific fonts, just in case if the client has no this font installed in his device. So, when someone visits your page, these lines of code picking proper font from external server for proper display of content.
You are sending request to their servers, they will save at least your IP request there.
There is no need to do that. You can just download the font and use it in your own server.
Check it out here
https://google-webfonts-helper.herokuapp.com/fontsIdeally, I want to copy this above all HTML pages I have, which means copying it millions of times.
The problem with that approach is that Ctrl C CtrlV one million times is not effective. Additionally, you will have to update your navigation bar one day. Will you Ctrl C and V again?
I made a small .html file for the navigation bar in my website, and I just load it with JS in my every page. Then i can just update my nav.html file
And it uses a whole list of stylesheets:
<link rel="stylesheet" href="assets/tether/tether.min.css">
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/dataTables/data-tables.bootstrap4.min.css">
<link rel="stylesheet" href="assets/animatecss/animate.min.css">
<link rel="stylesheet" href="assets/dropdown/css/style.css">
<link rel="stylesheet" href="assets/theme/css/style.css">
<link rel="stylesheet" href="assets/mobirise3-blocks-plugin/css/style.css">
<link rel="preload" as="style" href="assets/mobirise/css/mbr-additional.css"><link rel="stylesheet" href="assets/mobirise/css/mbr-additional.css" type="text/css">
...
I see BPIP uses several external scripts too:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.7/dist/css/bootstrap-select.min.css" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.7/dist/js/bootstrap-select.min.js"></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-155135847-1"></script>
I'm not familiar with this, is this the standard accepted thing nowdadays? Do users not care about external tracking? Or am I just too concerned?
It is bad for privacy and for page loading times. But it is good to keep your libraries updated. Personally, I download everything and I run it in my own server. I don't care about updates.
I'd like to add a submenu under the top-menu though, like examplens made
here. under "MERIT", but it might make it a lot larger and more complicated to make changes (to so many pages) later.
How would I start editing this? Just manual with an editor, or is there a better GUI method to do so? Again: total n00b here when it comes to designing things.
This is called a dropdown.
Bootstrap is a very nice design language, which you will probably like.
You can just copy this code here and start using and editing it:
https://getbootstrap.com/docs/4.5/components/dropdowns/#single-buttonYou just have to load the dependencies libraries (jquery, bootstrap css and bootstrapbundle.js, then download them to your /css or /js directories).
See a working example:
https://jsfiddle.net/jaqkznyo/1/You just need this code:
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Merit
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Sent Merit</a>
<a class="dropdown-item" href="#">Received Merit</a>
<a class="dropdown-item" href="#">More Merit</a>
<a class="dropdown-item" href="#">deMerit</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Merit History</a>
</div>
</div>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://getbootstrap.com/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-LtrjvnR4Twt/qOuYxE721u19sVFLVSA4hf/rRt6PrZTmiPltdZcI7q7PXQBYTKyf" crossorigin="anonymous">