WORDPRESS BLOG/SITE
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
WordPress
- tutorials and support forums at WordPress.org
- Woo Commerce tutorial
- Yoast SEO tutorial
- more advanced (but 2.5 hour) Woo Commerce video tutorial
- themes:
- good plugins:
- H5P interactive content
- WP Quiz
- Slider Hero
- Hand-picked list of the best WordPress plugins
blogging resources
- 7 Tips for Writing that Great Blog Post, Huffington Post
- How to Write an Awesome Blog Post, Wordstream.com
MULTIMEDIA PROJECT
- Multimedia Communication website
- Screencast-o-matic
- SlideDoc
- 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
MORE RESOURCES
- iLovePDF.com: compress, merge, split PDFs and covert other filetypes to PDF
- Helena’s video presentation about Procreate
PROFESSIONAL WEBSITE
tools
- text editor: Brackets
- also recommended: Visual Studio Code, Sublime, Atom
- 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 Wix, no SquareSpace!!
free!
- HTML5 UP!
- 50 Free Responsive HTML5 Web Templates, by SpeckyBoy
- 20 Best Free Responsive HTML5 Web Templates, by SmashingHub
- Free Bootstrap portfolio templates
- 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
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
