PROFESSIONAL WEBSITE
tools
- text editor: Visual Studio Code
- 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!
- ColorLib
- 50 Free Responsive HTML5 Web Templates for 2021, by SpeckyBoy
- 20 Best Free Responsive HTML5 Web Templates in 2018, by Mockplus
- Free Bootstrap portfolio templates
- Templated.co
- Templatemo.com
$$$$!
web building resources
- 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
- How to Start a Student Website, by Digital.com
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
- Background textures and patterns library: tons of options, plus you can generate stripes or gradients or text backgrounds
- BG Patterns: generate a tiling background out of a small image/icon
responsive design
- Responsive Web Design (Ethan Marcotte)
- Responsive Design (articles at A List Apart)
- 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)
- 7 Things every designer needs to know about accessibility (Jesse Hausler @ medium.com)
- 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
- Easy steps to create a design portfolio
- TinyJPG: compress your JPG and PNG files so that your site loads quickly
- embedding a PDF in a webpage (not a great idea, but if you’re going to do it this method looks good)
website analytics
WORDPRESS BLOG/SITE
excellent WordPress sites
WordPress
- tutorials and support forums at WordPress.org
- good plugins:
- H5P interactive content
- WP Quiz
- Slider Hero
blogging resources
- 7 Tips for Writing that Great Blog Post, Huffington Post
- How to Write a Blog Post in 2019, Smartblogger.com
- 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
