top
- HTML TutorialW3Schools
- Introduction to HTMLCode Academy basic is free.
- Introduction to HTMLBasic and advanced HTML coding are covered. Examples and quizzes are available along with a list of HTML references.
- W3C Validator ServiceChecks for errors in HTML.
- CSS Box Model (W3Schools)Shows the basics of how margin, border, and padding affect the width of an element.
- CSS CreatorCSS Creator is a site for Web development, covering CSS as well as HTML and JavaScript. It includes a forum where users can seek help from other users. There are also a news feed, a tools section, and a site check area to validate code.
- CSS TutorialW3Schools
- CSS Zen GardenCSS design inspiration and templates
- Learn CSSCode Academy basic is free.
- OmatsuriTools for generating triangles, gradients, color shades, and more in CSS.
- Smooth Box Shadow GeneratorDrag levers to develop the perfect box shadow code.
- Accessible Web SitesTips for coding accessible web sites that meet ADA requirements. From the University of Louisville.
- Adobe XDUX/UI design tool for use on both macOS and Windows. Part of the Adobe Creative Suite, but free to use.
- Affinity PhotoInexpensive commercial alternative to Adobe Photoshop. Perpetual license. Available on macOS and Windows.
- CanvaCanva is an online graphic design tool that also offers free stock photos. One advantage of using Canva is that you can quickly turn an image into a custom graphic
- CodePenCodePen is a social development environment for front-end designers and developers. Use to test bits of code. Get inspiration from other designers. (Use Firefox.)
- A List ApartA List Apart explores the design, development, and meaning of web content, with a special focus on web standards and best practices.
- SketchCommercial web design tool for macOS
- Smashing MagazineGood source for articles about web design. Also hosts training events.
- DaFontArchive of freely downloadable fonts. Browse by alphabetical listing, by style, by author or by popularity.
Be aware that there may be usage restrictions for the fonts you select. - Font SquirrelProvides access to fonts that can use for commercial uses.
- Java TutorialsThis guide include hundreds of complete working examples, and dozens of lessons.
- Oracle Technology Network for Java DevelopersWebsite featuring Java links, Blogs, technologies, and tutorials
- Introduction to Programming Using JavaFree online book., 7th edition.
- Invent with PythonLearn Python by creating games.
Color and Image Resources
- Accessible Images For When They Matter MostCovers: image types and alt text, color, contrast, and experiences of users with color blindness or low vision.
- Accessible Web SitesTips for coding accessible web sites that meet ADA requirements. From the University of Louisville.
- Meyer Web Color BlenderGreat for finding a lighter or darker version of the brand colors. Just add the brand color in one box and white (#ffffff) or black (#000000) in the other and choose a number of midpoints.
- PictonesExtract colors from a photograph and get the RGB or Hex colors.
- BrowserShots
View your website in many different browsers.
- CheckMyColours
Check to see if your website has enough contrast for viewers with color deficits.
- Colr.org
Create color schemes.
- Coolors
Color scheme generator. Has a Chrome extension and an iOS app.
- Copyscape Plagiarism Detector
Look for copies of your website.
- Dungeons & Developers
A fun RPG tree that walks you through the skills and languages necessary to become a web developer.
- Font Awesome
Online web icon font, with free and premium options.
- Google Fonts
Free fonts.
-
What Does Royalty Free Mean? A Complete Guide To Royalty-Free Content
This guide from PIKWizard, a company that sells stock photographs, is very useful.
- PexelsSearch through thousands of royalty free images on Pexels. You can use all images on Pexels for free, even for commercial use.
- PixabayPixabay is a vibrant community of creatives, sharing copyright free images and videos. All contents are released under the Pixabay License, which makes them safe to use without asking for permission or giving credit to the artist - even for commercial purposes.
- ReshotPlatform for photographers to share a sampling of their best work for free use in creative projects.
- StockSnap.ioFree high resolution stock photos. free to use for both personal and commercial projects.
- UnsplashAll photos published on Unsplash can be used for free. You can use them for commercial and noncommercial purposes. You do not need to ask permission from or provide credit to the photographer or Unsplash, although it is appreciated when possible.
Important Note: Sites such as Pexels and Pixabay allow users to reuse their images even for commercial use. However, when putting an item on a physical product (such as a t-shirt) the image must be altered in some way, such as adding a logo, text, etc. to add value to the image.
Refer to their Terms and Conditions sections for full information.
- Bing ImagesSelect FILTER, then limit your results by LICENSE to find images available for reuse without copyright restrictions.
- Google ImagesSelect TOOLS, then limit your results by USAGE RIGHTS to find images available for reuse without copyright restrictions.
- PixabayPixabay is a vibrant community of creatives, sharing copyright free images and videos. All contents are released under the Pixabay License, which makes them safe to use without asking for permission or giving credit to the artist - even for commercial purposes.
- PexelsSearch through thousands of royalty free images on Pexels. You can use all images on Pexels for free, even for commercial use.
- UnsplashAll photos published on Unsplash can be used for free. You can use them for commercial and noncommercial purposes. You do not need to ask permission from or provide credit to the photographer or Unsplash, although it is appreciated when possible.
Creating Data-Driven Web Sites by Call Number: EBSCO eBook
The digital marketing handbook : a step-by-step guide to creating websites that sell by Call Number: EBSCO eBook
E-Commerce Website Optimization by Call Number: EBSCO eBook
Mastering the Faster Web with PHP, MySQL, and JavaScript by Call Number: EBSCO eBook
Sams Teach Yourself HTML, CSS, and JavaScript All in One by Call Number: MO Valley QA76.76.H94 K96 2019
Web Design Playground by Call Number: MO Valley Prof Reserve
Infographics for Dummies by Call Number: MO Valley P93.5 .B385 2014
Attribution
This page is based on the "Web Design" guide created by Terri Holtze at University of Louisville, and is used by permission. The original guide may be found at https://library.louisville.edu/web-design.