General Web Design Guide

THIS IS A DEVELOPMENT PAGE: this page outlines general recommendations and does not require strict adherence Portal:Software - Portal:Programming

General Structure

This page is set as a general guideline for consistency across our web development. This article does not cover in depth; Server Side Scripting, Image Formatting or other more advanced web design, however it serves as a suitable base for those project types.

Assets

For a normal project, you should expect to have the following assets:

• HTML files
  • ex. index.html
• CSS files
  • ex. styles.css
• JavaScript Files
  • ex. main.js
• Image Files
  • ex. logo.png, photo.jpg
• Meta Data Files
  • ex. web manifest, favicon.ico, robots.txt

Directory Structure

The root directory of your project (your project folder) will be listed as root/

The main HTML file of your project should always be called root/index.html
Web servers will automatically display this file, when accessing the root directory in a browser

Your main CSS file (stylesheet) should always be called root/styles/styles.css

The main style must be imported in the HTML file, more on this further in the article

The main JavaScript file should always be called root/scripts/main.js

Image files should always be placed in root/images/

Meta Data files (such as favicons, robots.txt, APIs for search engines, etc..) should always be placed in root/

Note that APIs should almost always be imported into index.html as a CDN

The name of the root directory should be formatted as such:
<site name>_<date stamp>_<release type>.zip

Dates are formatted: mmddyyyy

Release Types

• bleeding - fresh off the grill, most recent code push, not thoroughly tested
• release - fully ready, tested and deployed
• indev - incomplete code, missing several features
• patch - meant to be extracted to the root directory to fix a bug/add a feature
• depreciated - outdated and out of use, kept around for archival and development purposes