Web Design Resources

A list of design-related web sites that you can explore to enhance your experience in the class. This list is frequently updated.

Stock Photos
Unsplash.com Hundreds of thousands of pictures contributed by photographers. Credit isn't required, but it would be nice if you would give some exposure to the photographers. High resolution images browsable by categories or searchable by keywords.
Pixabay Nearly 900,000 free high quality images. Allows you to choose sizes for downloading.
Pexels.com Pexels provides high quality and completely free stock photos licensed under the Pexels license. All photos are nicely tagged, searchable and also easy to discover through our discover pages.

No-fuss Creative Commons downloads. Also, each image has swatches with RGB's of the main colors in the image.

Beautiful and rich looking images. I do not see a way of filtering, but there is a way to browse categories.

Creative Commons Creative Commons is a type of licensed attribution where authors can specify that their work can be used in a certain way. You usually do not have to request permission or payfor the images. However, keep in mind that Creative Commons works are protected by copyright law.
Nappy Many free images of black and brown people.
WikiMedia It's quite interesting.
FreeImages.com For sure, we have an embarrassment of riches with free stock photos. Here yet another one.
FreePik Includes collage Vectors, photos and Photoshop files. Must give credit for free files. Searchable by FREE.
Stockphotosecrets.com This is a good source for pay. It costs $99 for 200 per year, plus 69 for additional images. If you're a professional designer, you'll find these types of quality websites worth the money.
Snipstock.com PNG and Photoshop images. The small and medium sizes are free.
iconmonstr.com Nice and straightforward. Icons are simple and download as SVG files.
VectorGrove.com Combination of free and paid vectors. It prompts a few times for attribution, but does not require registration.
pxhere.com Another creative commons site, but you have to log in to download for large pictures. However, if you want a fairly large file to be used within our webpages, simply right click and Save As.
publicdomainpictures.net I learned about this one from ATC textbook. Seems great!
Wallpaper style backgrounds Large images to be used on websites as well.
CanStock Photos Good pricing and a variety of photos.
Punchstock.com Stock photos that are good for practicing. Otherwise cost $79 each.
Flickr.com If you get an account, you can "right click" to save pictures.
stockvault.net Free high resolution pictures
Freedigitalphotos.net Looks like only the small versions are free.
stockio.com Thousands of free Photos, Vectors, Icons, Fonts and Videos. You can find premium pictures as well.
PNG Images, with isolated backgrounds (mostly photo-realistic)
rawpixel.com Free and premium, and it's good you can filter based on "free." It does require signing up and it's worth it for the quality of images.
Pngtree.com Png, vector, and Photoshop files. Downloadable in different sizes. However, must log on to download.


It prompts a couple of times for attribution, but doesn’t force you. The red/pink button tells you the resolution and format.
PngHost.com Quality designs, but registration needed.
Freepngs.com Seems to be associated with SnipStock
FreePik #two| Includes collage Vectors, photos and Photoshop files. Must give credit for free files. Searchable by FREE.
cleanpng.com This is a trouble-free website. It does not require a password and does not have a lot of popups.
PNGImg.com The quality of this site seems to have deteriorated. The only reason I'm keeping it here is to remind myself how bad it is. The images have huge amounts of dead space, which means you constantly have to crop them. Also, it is not easy to navigate once you search. Finally, too many popup windows.
PNGWing.com It is difficult to download. Seems tricky and misleading. In fact, when you try to download it takes you to a circus full of clowns.
FreeIcons This is one of the best sites I've seen. Once you find your desired icons, it cleanly gives you the choices of sizes and other options
FlatIcon You can filter for free icons. No login is needed. There are choices of sizes from 16 to 512 px.
IconFinder Over 6 million. They are good! and they offer choices of sizes from 48 to 512. No logon needed.
Web Design Elements
Transparent Patterns Fabulous! The patterns are semitransparent. Therefore you can change the color on the fly.
Subtlepatterns.com Good place for modern seamless backgrounds, over 375 of them. Weakness is that they are not categorized, but you can search on keywords.
Website Bullets A website with simple bullets fit for many occasions. They are correctly sized and not flambouyant.
CSS and other generators sites
cssmenumaker.com Truthfully, some of the ones listed below are from the late 90's. However, this is a newer type of menu generator that uses CSS rather than images.
CSS3Generator Very nice. It has about 12 different techniques, and attempts to give you a view of your choice as you type in parameters.
CSS3 Maker It has a modern and friendly interface, and generates visual results quickly.
Colorzilla.com/gradient-editor This only does one thing - gradients. However, it provides indepth options for creating and editing gradients.
CSS3gen.com This does the same techniques as the others, including animation. Admittedly, most of these techniques can be just as easily created by typing from scratch. However, for speed of generating, they may be useful.
html-css-js.com Comprehensive website including generators as well as general reference.
Webcode.tools The Ultimate Web Code Generator. The CSS3 is especially useful and time-saving.
Older web art

These three sites are older, but you may find them useful for a quick embellished heading or design element:

Tutorial and reference sites
HTML Elements Reference This Mozilla site is authoritative and handy
Vanseodesign.com Includes design principles topics and many others. A repository for his prolific wrting about a variety of design topics.
htmlprimer.com/ Contains easy-to-read tutorials. Also contains a user forum where you can ask questions of others.
webdesign.about.com/cs/html www.about.com is a very comprehensive site.  It contains lots of material relating to web site development.  One of its most useful areas deals with design tips and principles. 
www.w3schools.com At W3Schools you will find all the Web-building tutorials you need, from basic HTML to advanced coding and scripting.
www.htmlhelp.com This is a solid and authoritative site that offers help on a wide range of topics. The site does not look fancy, but provides great information in a reference manner. It focuses on material that helps you to create sites that work in all browsers.
Special Characters listing From an HTML reference website. Nicely organized and easy to find.
Special Characters from W3C This is a nicely displayed and organized chart and comes directly from https://dev.w3.org/html5/html-author/charref
Special Characters
(from a Univ of Texas site)
Special characters.  This is just one of the many sites that provides a convenient list of special characters. Thanks to University of Texas.
CSS references
CSS3 Generator Automatically generates common CSS3 styles
Free web hosting
Text Editors and HTML Editors
Notepad++ Features include opening multiple files, drag & drop, toolbars, numbering lines, etc. There are two versions--Lite and Pro.
Brackets.io Free from Adobe
Colors (hex and RGB lists)
easycalculation.com Hexadecimal color chart
Color Chart - 100 plus, colors RGB to Hexadecimal color converter
Another Color Chart Wikipedia's entire color page
HTMLcolorcodes.com/color-names When you're practicing HTML, and don't feel like looking up colors
Cookwood.com Hexadecimal equivalents - from 0 to 255
Color Schemes


Best for exploring existing schemes and downloading text version. Click “Explore” then “View”. Then copy the hex color.


I happened upon another site that might become my favorite. It has about a dozen colors on the top row. You click on the one that you want as a dominant color. Then it generates many palettes for you to choose from.

I also like the fact that you can simply download as text and paste into your .CSS file.

html-color.codes Found this in 2022 and immediately fell in love with it. It has many features, but one of my favorites is seeing a variety of similar hues next to each other. Would be great for choosing monochromatic scheme.

An old site, but great for choosing monochrome scheme. Scroll down to the main color area.

Reds: www.december.com/html/spec/color1.html
Greens: www.december.com/html/spec/color2.html
Blues: www.december.com/html/spec/color3.html
Purples: www.december.com/html/spec/color4.html
Blacks: www.december.com/html/spec/color0.html

Adobe Colors

Click “Explore” to see schemes. Must copy & paste each hex color individually.


A user-friendly website with attractive palettes based on pictures. You can go to this page to see tagged descriptions of palettes.


For choosing colors based on a picture.


Gain quick confidence with your choice of colors. Use this tool to generate color schemes of good-looking, well balanced and harmonic web pages.

Overall, a useful and sophisticated website. Best to read the brief instructions on using it.

Multimedia (Audio & Video)
online-convert.com Quickly convert various types media online. No software installation needed. Free
www.lipsum.com Generates placeholder text. Also tells the story behind "Lorem Ipsum Dolor Sit Amet"
www.blindtextgenerator.com Generates placeholder text
www.websitehostingrating.com This is a useful reference for web hosting. It appears to have objective ratings and is updated frequently.