Image Optimization GIF format A compressed file format for indexed images. It uses run-length encoding, which compresses a series of pixels of the same value (in the horizontal direction) as a single entry (e.g. 30 pixels of red), which saves space over specifying each pixel. This means that large blocks of [...]

HTML  – Basic Tags For the HTML tags below, please be sure you understand all tags outlined in the notes below.  Remember, if you have any questions on how to use the tag, please take a look at the example located here: HTML Example directory Also, note the name of each [...]

HTML Basics Markup, the basis of every page HTML is a markup languages composed of elements, which contain attributes (some optional and some mandatory.) These elements are used to markup the various different types of content in documents, specifying what each bit of content is supposed to be rendered as [...]

Why learn HTML? Given that tools such as Dreamweaver exist, and allow you to create web pages without knowing HTML, you might ask “why learn HTML?” There are several reasons: Dreamweaver does not always do what you want. To get the page to look right, you often need to hand [...]

How the Internet Works Take a look at the diagram below and read through the notes so you understand how the internet works. (Note that “Client” refers to the computer where the web page is viewed…) Servers The Server is where the web site files live. The web server software [...]

Web typography Traditional print designers have a huge amount of options available to them when it comes to typography, including the sheer numbers of fonts available, and options for positioning text. Typography on the web is a lot more limited, because we must design using fonts and positioning, etc that [...]

Creating a Contact Form Creating a simple contact form can be easy once you know the steps involved in creating one. Below is a how-to on creating the HTML/CSS for a contact form. Making the form active will require a script and is beyond the scope of the tutorial below. [...]

Making WordPress more like a CMS (and less like a blog) . Install WordPress on your server Add a theme Set permalinks Use more pages and less posts. (Turn off comments) Add plugins Edit the CSS Edit the templates (php) Add social media icons Use widgets Customization 1. Installation on [...]

Strategize your plan for the layout Below is the HTML and CSS “starter” code for each of the major column layouts. Normally your design will fall into one of these 3 main structures: 1, 2, or 3 column layout. From there your design may get more complex then the illustrations [...]

What is Accessibility? Accessibility is treating everyone, no matter what their ability, the same. Most discussions of accessibility first talk about disability. This implies that people with a disability deserve special treatment. This isn’t what accessibility is about—it’s actually a symptom of the way people have traditionally built buildings, web [...]

CSS Navigation Menu: Drop Down Creating a Navigation Menu with drop downs is not hard once you understand the CSS. In this intermediate tutorial we’ll go through the necessary code; both HTML and CSS, you’ll need to understand to build this navigational menu and others like it. We’ll also show [...]

CSS Navigation Menu: Basic Creating a Navigation Menu using CSS is not hard when you know the basic steps involved. In this basic tutorial we’ll go through the necessary code; both HTML and CSS,  you’ll need to understand to build this navigational menu and others like it. We’ll also show [...]

Two Column CSS Layout (Part 1-2) Part 1 covers organizing your files, creating an HTML and CSS file and linking the .css file, and adding content to a two column web page including navigation, images, and text.  Part 2 covers adding CSS (presentation) to a two column web page including [...]

One Column CSS Layout (Part 1-3) Part 1 covers organizing your files, creating an HTML and CSS file and linking the .css file in preparation for building a one column web page. Part 2 covers adding content to a one column web page including navigation, images and text.  Part 3 covers [...]

The Basics of CSS This video tutorial covers the basics of CSS, what is CSS? Basic CSS Properties, Anatomy of CSS, and demonstrates how to link a CSS file in a basic HTML page using a simple text editor like TextEdit.

The Basics of HTML This video tutorial covers the basics of HTML, what is HTML? Basic Tags, Anatomy of HTML tag, and demonstrates how to code a basic HTML page using a simple text editor like TextEdit.

File Organization (Website Directory Structure) This video tutorial covers the basics of organizing your website files. Organize first before you start building your website.

The basics of web design can be simplified into 5 subjects: the grid, color palette, navigation, design principles, and typography. The Grid Color Palette Navigation Design Principles Typography The Website Eight Hour Day Design boutique created by designers Nathan Strandberg and Katie Kirk. http://www.eighthourday.com There’s so much to love about [...]

A motion graphics piece about the history of the internet that’s not only informative, it’s also well-designed.

Jason Santa Maria explains why things on the Web look the way that they do. This is a “must watch” video. SVA Dot Dot Dot Lectures: Jason Santa Maria from MFA Interaction Design on Vimeo.