13. Useful links#
Learning Resources#
W3C Schools Online Web Tutorials – basic introduction, but not everything here is accurate
MDN Web Docs – when in doubt, look up specifications here
What is Github? video
YouTube channels#
Kevin Powell – solid coverage of core CSS and HTML
Layout Land – Jen Simmons works on the Mozilla Grid project and explains grid well
Standards#
HTML validator (validator.nu)
Can I use…? - browser support tables for modern web technologies
HTMLHEAD - A free guide to HTML5 <head> elements
Front-end Checklist – “The perfect Front-End Checklist for modern websites and meticulous developers”
Button Buddy – accessible button contrast checker
Design Inspiration#
Media Queries – for responsive design inspiration
CSS Zen Garden – dated, but a good demo of the impact of CSS on plain HTML
siteInspire – web design showcase
Land-book – a web design gallery
Skeuomorphism – great examples of skeuomorphism
Design Tools#
Figma – online layout design - limited free version available
Colors#
Smart Swatch Generator – a quick way to generate highlight colors for hover effects
Color Palette Generator from image – pull a color palette out of an image
UI gradient Generator – a “smart” generator that avoids the dead grey zone produced in many standard gradients
Tiny Helpers – a collection of free online web development tools
Icons and fonts#
Font Awesome – an icon font that makes it easy to add and format icons on your web pages
Font Squirrel – free fonts
Google Fonts – free embeddable fonts
Subtle patterns – free textures (for backgrounds)
Favicon#
SVG#
A Practical Guide to SVGs on the Web – good introductory guide to SVGs
SVG Tutorial | MDN Web Docs – lots of code samples
List of SVG filters from MDN Web Docs
Finessing `feColorMatrix` – a good resource for understanding how to create color filters
SVGOMG – SVGO’s Missing GUI. An online version of SVGO , tool for optimizing SVGs, particularly those created by graphics programs such as Adobe Illustrator
How to code SVG icons by hand – pro tip: set the viewbox to 120,120 so you can use whole numbers instead of decimals like in the tutorial
Free SVG images / illustrations#
Free stock photos#
Free stock videos#
Image editing#
Be Funky – simple online image resizing. It won’t allow you to adjust compression and optimize images, but the resizing ability is fine for this class.
Compressor.io – online image compressor
Photoscape – (Windows) an older program that I still use. I don’t like Photoscape X, so avoid that version, unless you are a Mac user and want to try it out.
Gimp – (free) open source alternative to Adobe Photoshop
remove.bg - remove image background - because cool
Animation#
Animista – generate CSS code for animations (I recommend not including vendor prefixes for this class). And, you may need to clean up the CSS. It uses a generic template.
List of CSS Animation Libraries – more libraries
[Advanced]: How to do scroll-linked animations the right way – includes JavaScript
RWD#
Viewport Size by Device – list of dimensions for common devices
My Device – get instant dimensions for your current device and compare with other devices.
Responsive Image Breakpoints – save valuable time, and generate images for your srcset.
Responsive images#
CSS Specificity#
Misc. Tools#
Autoprefixer CSS Online – parses pasted CSS and adds vendor prefixes using values from Can I Use
Emmet – write HTML and CSS quickly; available as a plugin to many popular IDEs, including Brackets. The Emmet Cheat Sheet provides a summary of commands.
Google’s Structured Data specifications – explains how to enhance web page’s appearance in search engines.
56 Unique Lorem Ipsum Generators – great for filling in content when you don’t have content yet. (Not all are SFBYU - safe for BYU - so use judgment . BYU Domains has tight filtering. Avoid Pirate Ipsum which sets off the gambling filters.)
Another list of Lorem Ipsum Generators - This one has Bob Ross. There are more, if these links don’t provide enough. Google can help find them.
Picture ipsum – just like Lorem Ipsum generators for text, but for pictures. I often use Lorem Picsum, but Bill Murray? And kittens?
Sass - Syntactically Awesome Stylesheets – CSS with super powers! I recommend it to serious front-end developers. (It has variables! And functions (“mixins”)!)
CSS Layouts#
Centering in CSS: A Complete Guide – helpful link (but opt for flexbox if it is an option)
Layout Land – YouTube channel of Jen Simmon, Mozilla designer
Useful blogs#
Eric Meyer – he combines his professional and personal blog, but he is a CSS expert