LibGuides: HTML & CSS Resources for LibGuides and Qualtrics Users: Web Development

Web Development

Accessibility Tools

WAVE Web Accessibility Evaluation Tool
Browser-based. Enter a URL for a site and get a report of possible accessibility issues.
ColorBlindness SimulateCorrect
Android only. Plugin for (1) simulating how a web page would appear to users with color blindness, and (2) altering the colors of a web page to correct for color blindness.
Color Oracle
Windows, Mac, and Linux. Simulate how a web site or image would appear to users with different types of colorblindness (Protonopia, Deuteranopia, or Tritanopia).
WebpageTest
Browser-based. Enter the URL of a website and get a breakdown of the speed and size of that page's components.
tenon.io
Browser-based. Accessibility checker tool.
What Does My Site Cost?
Browser-based. Enter the URL of a website and get a report of (a) the total size of that page, and (b) the approximate cost to use that page on a mobile network.

URL Shortener Services

URL shortener services create a short URL that automatically redirects to a page of choice.

Bitly
Generate shortened URLs of the form bit.ly/{random-character-string}.
TinyURL
Generate shortened URLs that begin with the domain tinyurl.com.

WYSIWYG Editors

WYSIWYG = What You See Is What You Get.

BlueGriffon
Windows, Mac, and Ubuntu. WYSIWYG HTML editor with many customization options.
Image-Maps.com
Browser-based. Easy-to-use WYSIWYG image map maker. Select the sections of the image to link, set the link behavior, then generate the HTML code for the map.
Mozilla Popcorn Maker
Browser-based. Free tool for combining and editing video and audio from the web.

Emulators & Testers

SelectorGadget
Browser-based. Interactive tool that allows you to detect which CSS selectors apply to a given item on a page. Extremely valuable tool for learning about CSS and for web scraping.
responsivepx
Browser-based. Test the responsiveness of a page's design at any height or width.

Other Tools

Voyant
Tool for visualizing digital texts (word clouds, etc.)
Online Code Beautifier
Browser-based. Expands "minified" HTML code (adding line breaks back in) so that it is human-readable.

HTML Reference

General introductions and reference for HTML.

Learn to Code HTML & CSS - Shay Howe
Want to learn HTML but you're starting from scratch? Start here.
w3schools.com - HTML Tutorials
MarkSheet.io
Nicely organized, aesthetically pleasing introduction to HTML and CSS, with an emphasis on semantic HTML. Also includes a section on the CSS preprocessor SASS.

References and tutorials for using specific HTML elements.

Float Tutorials
Dozens of tutorials showing applications of the float attribute.
Definition lists - misused or misunderstood?
Tutorial and examples of how definition lists (dd and dl elements) can be used and styled.

Table HTML Generators

Browser-based tools for creating, typesetting, or customizing tables for web.

HTML Table Generator
Nice GUI editor for creating tables; HTML syntax is automatically generated as table is created.
Truben.no HTML Table Editor
Generates HTML for basic square or rectangular table. Can also output table markup in several other languages, including LaTeX, jSON, Wiki markup, SQL, Mathematica, etc.
TextFixer.com - HTML Table Generator
Generates HTML for tables, but also includes options for including colors, rows lighting up on mouseover, etc.
TableStyler.com
WYSIWYG editor for customizing table header, footer, and body appearance. Generates CSS and HTML table skeleton, but can not populate table's contents manually.

CSS Reference

References for anyone customizing style sheets.

Web Design in 4 minutes - Jeremy Thomas
Short and sweet introduction to the thought process of styling.
Learn CSS Layout
Getting started with CSS? Start here.
w3schools.com - CSS Selector Reference
General reference for CSS selectors. Works nicely as a cheat sheet.
Tuts+: The 30 CSS Selectors you Must Memorize
Don't Use a{outline: none;}
Explanation of why NOT to turn off the outline attribute for links, and why outlines help accessibility.
Smashing Magazine: Backgrounds in CSS
Description of background attributes and what they are used for.
Learn CSS Layout - The Clearfix Hack
Quick intro to the useful clearfix class, in particular for correcting issues of images overflowing their div containers.

CSS generation tools.

CSS-matic: Box Shadow Generator
Browser-based. Easy, slider-based tools to preview and generate box shadow CSS.
CSS-matic: Border Radius Generator
Browser-based. Easy, slider-based tools to preview and generate border-radius CSS (which determines how "rounded" the corners of an object or border should be).
Tufte CSS
CSS in the style of Edward Tufte.
Google - Code Prettify
Pre-built style sheet for colorizing code examples in websites. Works with a number of languages, including HTML, CSS, Matlab, R, and SQL.
CSS Portal - CSS Sprite Generator
Browser-based tool for generating CSS sprites (graphic and code) from chosen icons.

Color Codes for Web

Browser-based tools for looking up web color codes or generating color palettes.

Adobe Kuler
Generate harmonious color schemes.
Color-Hex.com
Catalog of hex color codes. Each hex code has its own page with codes for shades and tints.
Color Brewer 2.0
Color suggestions specifically for map graphs. Can limit suggestions to only those that are colorblind-safe, print-safe, etc. Color codes can be given as hex, RGB, or CMYK.
Paletton
Generates color schemes based on color wheel and type of color coordinating scheme. Can show preview of how color suggestions could be incorporated to a web design.
CSS Gradient Generator
Select two colors (via hex, RGB, or color wheel), pick gradient directions, and generate the corresponding CSS code for the background-image attribute.
Dan's Tools - Color Picking Tool
Tinker with RGBA, HSLA, and HEX color specifications and generate the color codes in each format. Save colors to a temporary palette.
HTMLColorCodes.com - Color Picker
Color picker tool (HEX, RGB, CMYK, HSL) that also generates a complementary palette.
HTML Color Mixer
Given two hex color codes, mixes a color gradient and generates corresponding hex color codes.
HTML Color Names
List of all 140 color names recognized by modern browsers and their corresponding hex color codes.
HTML Color Picker
Get hex color codes using a color wheel, or look up a color based on its hex code. Has a nice side feature that shows several lighter and darker shades of the selector color (with associated hex color codes).
Pantone Color Finder
Lookup Pantone colors by name or by number.
Perbang.dk - RGB Color Gradient Maker
Creates several types of color gradients from two specified hex color codes or color selections. Can specify the number of levels to use for the gradient.
Colorpicker for data
Tool for generating discrete color palettes for categorical data.

Equations for Web

MathJax
Javascript package for displaying mathematics and equations in browsers. MathJax-rendered equations are compatible with screen readers and can scale up or down in size.
Formula Sheet
Stock library of formulas in HTML, LaTeX, and MS Word format. Search for a formula, then copy and paste the syntax into your document. (Warning: Formulas are user-submitted. Be sure to proofread the syntax and typesetting choices for functions.)
CodeCogs.com LaTeX Equation Editor
Browser-based. Given the LaTeX syntax for an equation, generates an image of the equation or HTML code that can be embedded in your page to show the equation. Some WYSIWYG equation editing features.
iTex2Img
Browser-based. Can enter LaTeX syntax or use WYSIWYG equation editor and save equation as an image file.
mathb.in
Browser-based. Share mathematics on the web. Enter LaTeX, Markdown, or HTML syntax for mathematical content, then generate a URL linking to that content.

Images

Optimizing Images for Web

ImageOptim
Mac only. Free, open-source software with easy click-and-drag interface for optimizing PNG, JPG, GIF, and animated GIF files. Note that this tool overwrites the original file with the optimized image, so you may wish to create backup copies of your original images.
Kraken.io
Browser-based. Image optimizer tool with free and paid options. Can optimize PNG, JPG, and GIF files. Batch upload images for optimization; select lossy or lossless options; then download individual optimized images or zipped archive of all optimized images. Free version has 1MB limit for images.
PNGGauntlet
Windows only. Free software with easy, click-and-drag interface for optimizing PNG, JPG, and GIF files. The user has the option of overwriting the original file with the optimized version, or keeping the originals and creating new files for the optimized images.

Favicon Tools

Favicon Cheat Sheet
Extremely useful reference for how to add favicons to a webpage.
Favic-o-matic
Browser-based. Automatic favicon generator: upload an image and generate favicons in a number of sizes. Can generate up to 20 different sizes of favicons. Also has a tool for checking how well your current favicon displays on different devices.
Real Favicon Generator
Browser-based. Upload an image and generate favicons in a number of sizes. Also has a tool for checking how well your current favicon displays on different devices.

Creating & Editing Images

Paint.NET
Windows only. Free, open-source substitute for Adobe Photoshop.
ShareX
Windows only. Create static screenshots (JPG, PNG, GIF) or animated screencaps (GIF or AVI). Easily upload captures to image sharing sites or social media.
yEd Graph Editor
Windows, Mac, and Linux. Draw flow charts, networks, and diagrams. Can add diagram labels (including Greek characters and mathematical symbols) using HTML. Diagrams can be exported in several raster and vector file formats.
Mondrian
Browser-based. Free, browser-based vector drawing program.
Image Quilts
Browser-based. Creates an "image quilt" by stitching together the results of a Google image search for a certain term.
Pixlr
Browser-based. Free, simple browser-based photo editor. Crop, resize, etc.
Plotly
Browser-based. Upload or enter data and create attractive, interactive graphs. Publically share graphs and data with others. APIs available for Matlab, Python, and R.
Venny
Browser-based. Free browser-based tool for creating up to four-way Venn diagrams.

Google Analytics

Tools for Google Analytics

Google Analytics Solutions Gallery
User-submitted templates for Google Analytics dashboards and custom reports. Templates can easily be added to an analytics property.

JavaScript

General JavaScript

JavaScript for Cats
A gentle intro to JavaScript for cats (also useful for humans interested in JavaScript).
MDN - JavaScript Guide
w3schools.com - JavaScript Tutorial
quirksmode.org - JavaScript
Eloquent JavaScript
Free online book (available on the web and as a PDF, EPUB, or MOBI) with JavaScript basics.

d3.js

d3.js is a JavaScript library for creating graphs, charts, and other illustrations for the web in vector (SVG) format.

d3js.org
Download the d3.js script and learn more about the project.
Intro to d3.js
Dashing d3.js - Learn how to make data visualizations with d3.js

Library Locations at the Kent Campus

Regional Campus Libraries

HTML & CSS Resources for LibGuides and Qualtrics Users: Web Development