PROFESSIONAL WEBSITE
tools
- text editor: Brackets
- also recommended: Visual Studio Code, Sublime
- FTP program: Cyberduck
HTML tutorials
- Learning HTML: Guides and Tutorials at Mozilla Developer Network
- HTML & CSS at Codecademy
- W3C.org: Starting with HTML + CSS
HTML/CSS templates — no drag-and-drop website builders (e.g., Wix, SquareSpace)
free!
- HTML5 UP!
- The 50 Best Free Responsive HTML Website Templates for 2024, by SpeckyBoy (scroll down to Free Portfolio HTML Templates)
- 50 Free HTML5 CSS3 Templates, by SmashingHub (use the demo option to see the templates before downloading)
- Themefisher
- Untree.co
- Templated.co
- Templatemo.com
$$$$!
web building resources
- Pixabay: photos, illustrations, videos, great stuff
- Unsplash.com: great collection of free, copyright-friendly photos
- Pexels: same as Unsplash, possibly better
- Graphic Burger: lots of graphic resources, including icons, Photoshop mockups, and other cool stuff
- Unminify.com: to “unminify” code in the templates you download
- HTML validator
- CSS validator
- Lorem Ipsum text generator
- Meet the Ipsums
- Free Widgets, by Elfsight
fonts
- Google Fonts
- The Essential Guide to @font-face, for use with the FontSquirrel webfont kit generator
- 30 Gorgeous Web Safe Fonts
icon resources
- Google icons
- text instructions for using Google icons
- video instructions for using Google icons
- The Noun Project
favicon resources
- Free Favicon gallery (or do a Google search for “favicons”)
- How to design a favicon
tiling background images
- CSS Background Patterns, by Magic Pattern
- 6000+ Free Background images, by Pixabay
- Repeating Background Images and Videos, by Deposit Photos
responsive design
- Responsive Web Design (Ethan Marcotte)
- HTML Responsive Web Design (w3schools.com)
- Embed Responsively: a handy tool if you’re embedding YouTube or other videos, or anything that comes in an iFrame
accessible design
- Web Accessibility Initiative: lots of resources, but start here, Introduction to Web Accessibility (W3C)
- WAVE Web Accessibility Tool
- download a free screen reader to hear what your website sounds like on a screen reader
design & coding inspiration & discussion
- CSS Zen Garden
- A List Apart
- Codeacademy
- TinyJPG: compress your JPG and PNG files so that your site loads quickly
website analytics
websites
MULTIMEDIA PROJECT
WordPress resources
- tutorials and support forums at WordPress.org
- themes:
- good plugins:
- H5P interactive content (info here)
- Slider Hero
Web writing guidelines
- Web Writing Style Guide, by Duke University Libraries
- Best Practices for Web Writing, by University of Maryland, Baltimore
- Writing for the Web, by Usability.gov
- Mailchimp Style Guide: Writing Goals and Principles, and Voice and Tone
excellent WordPress sites
blogging resources
- Mastering the Art of Writing a Blog Post, Nour Eldin (Medium.com)
- How to Write an Awesome Blog Post, Wordstream.com
multimedia generative AI resources
text: Claude (Anthropic); ChatGPT (OpenAI); Bing (Microsoft); Gemini (Google); Quillbot (paraphrasing tool); Liner (research helper); Pi (conversation partner)
images: Ideogram, DALL-E 3 (OpenAI), ImageFX (Google), Image Creator/Copilot (Microsoft Designer), DreamStudio, NightCafe, Leonardo, Stable Diffusion, Midjourney, Craiyon AI; Remini; DaVinci (app); Canva Magic Studio
- Best AI Image Generators, Zdnet
- The Best AI Image Generators in 2024, Zapier
videos: Sora (OpenAI), InVideo, Elai, Runway, ZMO.ai, Lumen5, Emu (Meta); Canva Magic Studio; Viggle
audio
- music generators: Suno, Udio, MuseNet (OpenAI), StableAudio (Stability.ai)
- voice generators (text to speech, some with video): Deepbrain AI, Synthesys, Lovo, Murf
other multimedia tools
- ScreenPal: use this or another screencasting program to create tutorial videos
- Knightlab: a suite of open source tools for digital storytelling; developed for journalists and media makers, but easy to use and engaging for novice users
- Juxtapose: compare two images
- try it with Goleta in 1994 and 2018
- make your own by downloading Google Earth Pro and selecting Historical Imagery
- Timeline JS: present a story that occurs over time
- can include text, image, and video to present and analyze an event
- also great for an interactive resume
- Storymap: present a story in a specific location
- try it with some photos of Goleta and this Lemon Festival video
- you can also annotate an image (rather than a map), but you need to host the image files on your own web server
- Soundcite: add soundclips to text
- here’s a soundclip you can use: http://sorapure.net/guitar.mp3 (just paste this where Soundcite prompts you for an audio URL)
- works best with WordPress; in other words, create the soundclips in Soundcite and attach them to text that you publish with WordPress
- Storyline: attach annotations to a basic line chart to tell the story behind the numbers (still in beta but works fine)
- here’s my example with numbers from the Professional Writing Minor
- Juxtapose: compare two images