NOTE: The files with global in their name will effects all the html files.
Each of the pages will have their own folder with their name in it, except the home page(index.html).
For example, for the About page, we must have a different folder named About which will contain an HTML file, a JS file, a CSS file and others if necessary.
In the main folder, there is a assets folder, inside which we have, logos,image and an icon folders.
The image folder must contain only the images that will be used by that page.
The logos folder must contain logos used in that page. The logos must be Transparent and Square
The icons files must contain the icons used in that page.
We're trying to imitating what it possily would be when working a real job, hence oranizing every asset is very crutial.
For this projet, we'll be using camelCase naming convention to name everything.
cameCase is basically, converting:
first word ---> firstWord.
Naming files are crutial for knowing which files is being used by which files.
Using camelCase, we can name file in the following format.
htmlFileNameStyle.css/Script.js
htmlFileName being the html page's name that is currently being created or worked on.
Style.css representing that this file is a css file. The final file name will be: htmlFileNameStyle.css
Script.js representing that this file is a javascript file.The final file name will be: htmlFileNameScript.js
artSection.html:
<html>
<head>
<link type = "stylesheet" href = "artSectionStyle.css" >
</head>
<body>
<script src = "artSectionScript.js"></script>
</body>
</html>
Notice that the artSection.html file is using artSectionStyle.css css file and artSectionScript.js javaScript file.
Use camelCase while naming folders with more that one word in it
The globalScript.js and the globalStyle.css files will contain the codes that are being used by all the pages. For this to work, the class names for all the elements being effected MUST be same throughout all the html files.
The camelCase convention must be used for naming any classes, ids, variables and functions.
<html>
<html>
<head>
<title> Example Page </title>
</head>
<body>
<!-- Notice the way classes and Ids are being named -->
<div id="mainContainer">
<label for="userName"> Name: </label>
<input type="text" id="userName">
<label for="userAge"> Age: </label>
<input type="text" id="userAge">
<div id="buttonContainer">
<button class="formButtons">
Submit Name
</button>
<button class="formButtons">
Submit Age
</button>
</div>
</div>
<script>
//Notice how the variables and functions are being named
const mainContainer = document.getElementById("mainContainer");
const buttonArray = document.getElementsByClassName("formButtons");
function thisIsFunction(){
}
const secondFunction = function(){
}
const thirdFunction = ()=>{
}
</script>
</body>
</html>
Make sure that the names assigned to Classes, Ids, Variables or Functions makes sense in the context.The length of the name doesn't matter, be as descriptive as possible.