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.

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.

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.