BZEROB.COM

 Code Details

Putting It All Together

The basics and a small set of tools and resources gets the job done. Each project has a handfull of design elements that have been contributed from a variety of sources.
SITE DESIGN
How the projects evolve

Building on the basics

Assembling the Pieces

html5css3w3c

Writing the code is one thing. Getting the code right and validated to the ever evolving W3C standards is another. Then you can throw in the twists and turns of the constantly expanding list of browser engines and online devices you have your work cut out for you. With that accomplished it plays nicely in most browsers and allows the sites to scale nicely on all devices especially the smaller devices such as tablets and phones which now make up a large share of the viewing devices.


Code Authoring

Writing The Code

Code Editors

Adobe Dreamweaver / adobe.com/products/dreamweaver.html - is a premium web design / development application that combines a visual panel with a code editor that features syntax highlighting, code completion, and code collapsing as well as real–time syntax checking and code introspection for generating code hints.


Notepad ++ / notepad-plus-plus.org - an open-source code editor and Notepad replacement that supports several languages. Based on the powerful editing component Scintilla, Notepad++ is written in C++ and uses pure Win32 API and STL which ensures a higher execution speed and smaller program size.

Code Frameworks

Giving It Some Structure

CSS Frameworks

Normalize CSS 7.0.0 / github.com/necolas/normalize.css - A modern alternative to CSS resets that makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.


Bass CSS 8.0.2 / basscss.com - Lightning fast modular CSS with no side effects.


Ace CSS / github.com/basscss/ace - Full-featured Bass CSS package for web apps. Ace CSS contains the core Bass modules and several addons for use in larger web apps.

Scripting Frameworks

jQuery / jquery.com - is an open-source cross-platform JavaScript library designed to simplify the client-side scripting of HTML. It is the most popular JavaScript library in use today.


PHP / php.net - is an open-source server-side scripting language designed for web development but also used as a general-purpose programming language.


MySQL / mysql.com- an open-source relational database management system (RDBMS) The SQL acronym stands for Structured Query Language.

DESIGN ADD-ONS

Giving It Personality

The web is full of resources to help you with your designs. And these are a few features I have used in my designs. I have tried to keep them simple and at a minimum. But that doesn't mean you have to side-step them altogether.

Special Fonts

Bebas Neue - dafont.com/bebas-neue.font - BEBAS NEUE is a sans serif font family based on the original Bebas Neue free font by Ryoichi Tsunekawa. It has grown in popularity and become something like the "Helvetica of the free fonts".


Roadway Regular - dafont.com/roadway.font- ROADWAY is based on U.S. highway lettering seen on New York street signs in February 2005. Two weights of highway lettering would often be used in the same street sign, a standard condensed version used for the main name and a half-size regular for less important information like ‘road’ or ‘street’.


Fontello - Icon font generator - This tool lets you combine icon webfonts for your own project.

CSS3 /JS Features

YouTube Lightbox - javascriptkit.com/dhtmltutors/youtube-api-upbox.shtml - a simple Youtube video lightbox that pops up and auto plays when the user requests a video using Youtube's Player API.

Pure CSS Modal - codepen.io/LFeh/pen/oEula - Example of a modal just in CSS. It uses the pseudo selector ":target" for modal action. This works in IE9+ and all modern browsers.


Snow Script - codepen.io/massiebn/pen/vmkwJ- Snowstorm is a JavaScript-driven snow effect that can be easily added to web pages. A single JS file provides the functionality required. No images are used for the snow effect.

jQuery Features

Filterizr - yiotis.net/filterizr - is a jQuery plugin that searches, sorts, shuffles and applies stunning filters over responsive galleries using CSS3 transitions