Boilerplate Page Code Resources

Daily Use

Pomodoro Tomato Timer | Productivity | Prioritization
Delegation |

Top Bootstrap Resources

* Bootstrap Quick Start *
* Bootstrap Custom Components and Templates *
* Bootstrap Custom Components and Navbars *
* Bootstrap Custom Components and Starter Template, Grid and Jumbotron *
Bootstrap 4 Layout Container | Bootstrap 4 Layout Grid Rows
* Bootstrap Layout * * Shay Howe CSS Positioning *

Top 20 Resources in General

HTML 5 Boilerplate | CDNJS | Font Awesome
Visual Studio Code | Emmet
* Dev Hints Emmet Cheatsheet * | Scotch IO Emmet |
** Emmet Web Dev Simpified YT ** | Emmet Cheat Sheet

A common but confusing way of distinguishing between efficiency and effectiveness is the saying "Efficiency is doing things right, while effectiveness is doing the right things." This saying indirectly emphasizes that the selection of objectives of a production process is just as important as the quality of that process.

* Coggle Project Thoughtmap * | Wireframe | Canva | Sketchpad |
Placeholder | Pexels | Icon Monster
HTML 5 Semantic Elements |
Layout | Layout Templates | JavaScript Template Literals
Shay Howe Box Model

Reminder: Think Through class and Id names

Build Header and Navigation with JavaScript Template Literals

Z Template Literal | ZTL2
JavaScript Boilerplate
* Vanilla JavaScript Boilerplate *
* Development Process * | * Outline Design and Development *

* Project Workflow Steps and Phases*




Testing and Validation


Close Out

Wants and Needs Assessment

Needs Assessment Checklist | Planning Guide (Part 1) | ** Survey Form Example ** Wikipedia User Needs Analysis


Roadmapping University of Cambridge | Roadmap Templates

Project Thought Map

Think Through class and Id names
** Coggle it ** | Thought Map Internal

Project Plan

Project Plan


** Wireframe cc **

Layout Grids, Rows and Columns

Canva | Colorlib | Idealware | Mockflow | Moqups | Figma Layout-Grids
Canva Golden Ratio


W3 Schools Html | MDN Semantic Elements
MDN Elements Reference

Get Bootstrap

* Bootstrap CDN * | Bootstrap Starter Template | Bootstrap Getting Started
Layout Overview | Grid Mix and Match
Bootstrap Horizontal Alignment | Alignment | Themes

Generic CSS

Shay Howe Box Model | w3 Box Model | CSS Tricks Box Model
CSS Layout TOC | CSS Reference io | MDN CSS Reference

CSS Flexbox and Grid Row

Youtube Flexbox Tutorial | Box Sizing Border Box |
Codepen Flexbox Examples | MDN Grid Row CSS | ** Grid by Example ** |
CSS Tricks Grid Guide |

Content Creation and Content Curation

Juicer Fresh Daily Content | Curata | Constant Contact Blog | Medium Content Curation


Font Awesome Cheat Sheet | Google Fonts | Bootstrap Typography |
Adobe Fonts


Color Hex | *Colour | Coolors Themes | Color Hunt | ** Canva Color Themes **


Placeholder | Pexels | Pixabay | Google Dev Image Optimization | Kraken IO | Litmus Image Compression |
Images Guide

DNS Registrar MX Records

DNS Lookup |

Website Hosting

Dream Host |

SFTP Settings

Notes and Reminders for set up and DNS

  • FTP Server/Hostname
  • FTP Username
  • FTP Password
  • FTP Port
  • Microsoft Visual Studio Code

    more notes

    Gather Assets Mis en Plac

    Functionality Contact Us

    w3 Contact Up Demo | Form Get Demo | Codepen Demo | Bootstrapious Demo |
    * Form Spree Demo * | Traversy Youtube Contact Us Form Demo | Dreamhost Email Setup | Wufoo Secure |

    Daily Top Favorites

    Write Box | A Soft Murmur Rain Sounds |
    Youtube Daily Calm |

    JS Console
    moment().format('dddd MMMM Do YYYY, h:mm A')

    H1 Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, earum.

    H2 Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint, laudantium.

    H3 Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate, pariatur.

    H4 Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis, optio.

    H5 Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil, asperiores.
    H6 Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis, eos.