Web Development: Organizing Files and Folders

When you begin to build your website, it's a very clever idea to organize  your files and folders efficiently.

You should have:

• A site root folder, inside of which you have:
• An index.html file - that's the HTML for your homepage
• A CSS folder
• An images folder
• A JavaScript folder. 
• Other .html webpages for that website.

For Loops in JavaScript

Below is an example of  a for loop from JavaScript. Have a look and see if you understand how it works: 

var fruits = ["peach", "orange", "Apple"];

for (var i = 0; i<fruits.length; i++)
{
//we are now inside our loop.
document.write("value of i is: " + i);

//this is the html for a new line.
document.write("<br>");

document.write("the fruit at i is: " + fruits[i]);

document.write("<br>");
}

Note on DreamWeaver CC Libraries

When inserting images from the CC library in Adobe DreamWeaver, it's usually better to 'Download Linked' or Download Unlinked' images than to 'Insert Linked' or 'Insert Unlinked'. The reason; if you  insert a linked or unlinked image, it will be changed if anyone changes the image in Adobe's CC library.  However, if you download the image, the image is now inserted on your website independently.

JavaScript Logical Operators (and Boolean)

• && (AND)
• || (OR)
• ! (NOT)

If you were to find out if two values were true or false, you would use AND. 

For something to be true, both the values would have to be true. 

For example, requesting if:

true && true = true
true && false = false
false && false = false 

|| (OR) is requesting if one of the values is true. For example: 

true || fsadf = true
false || true = true
false || false = false 

! (NOT) is a negation, so requesting if:
!true = false (something not true is false)
!false = true (something not false is true)

You can also combine logical operators.  For example:
 !(true && true) = false (because true AND true is true, and negating it is false) 

For more on operators, go to https://jamesymcjamesface.blogspot.com/2020/04/javascript-operators.html

JavaScript Operators

With JavaScript, a number is just a number (unlike in Python where you have integers, float and complex numbers).

The operators that can be used with numbers in JavaScript are:
+ Addition
- Subtraction
* Multiplication
/ Division
% Modulus (the remainders from division).

Note: if you say:
var x = 5
var y = 3
x + y  = 8

But if you say:
var "x" = 5
var "y" = 3
x + y = 53

In the latter, it returns 53, because you have defined x and y as strings by placing them in quotation marks.

There are other special variable operators: 
++ (This will increment the variable by 1): x = 5... x ++ = 6
-- (This will decrease the variable by 1): x = 5... x-- = 4

Comparisons:
== (equal to)
=== (equal value and type) this is unique to Javascript, and will return if the var is equal in number and type.  For example, if  you ask if "5" === 5, it will return 'false' as one is a string and the other is a number. However, if you ask if "5"==5, it will return 'true' despite the fact that they are different types.
!= (not equal to)
!== (not equal value or not equal type)
> (greater than)
>= (greater than or equal to)
< (less than)
<= (less than or equal to)

See about JavaScript logical operators at https://jamesymcjamesface.blogspot.com/2020/04/javascript-logical-operators-and-boolean.html

JavaScript - Reserved Words

Some words are reserved in JavaScript and cannot be used as variable names.  Some common examples are:

• case
• catch
• for
• let
• private
• this
• with
• in 
• do

 Using these words as variables (var) will present you with an error for your code.

Reset Your CSS Styles for All Browsers

It is a very good idea when creating a new webpage to reset all styles for the browser.  This ensures that all browsers are starting off on the same footing when they read your CSS an HTML files, and ensures a level of consistency across all browsers.

Code for this can be found at mayerweb.com:

https://meyerweb.com/eric/tools/css/reset/

There, you can also find an excellent blog piece by Mayer, about why this is necessary. 

Content/Border Box Model (CSS)

Border Box Model

The padding occurs inside your content box (that is, inside the area your text or other content is contained) and it puts a 'pad' around it.

The margin occurs outside of your content box. This is an area that divides your content box (including any padding) from other content boxes.

A border occurs between the padding and the margin.

Border box is useful to use on its own instead of padding and margin, especially if you are doing responsive web design.

Using 'em' for sizing images in CSS

'em' is a relative measurement in CSS - relative, literally, to the px size of a letter 'm' in your text. This makes it a useful metric for sizing and resizing images for different situations, and still maintaining their proportion relative to the rest of your webpage.

There is also something called Root em - 'rem' which is useful for responsive websites.  It asks 'what was the original size of 'em' in order that it can correctly proportion the website.

However, a good rule-of-thumb is to use ordinary pixels (px) as a measurement for various elements on your webpage - at least starting off.