Resources
RECOMMENDED READING
How to
- Creating links inside of Blackboard
- Rubric for blog posts
- What is Firebug and a few tips on how to use it
- WordPress A little bit about WordPress Templates and Themes
Great older articles
- How to Size Text in CSS — https://www.alistapart.com/articles/howtosizetextincss/
- Minimalist Design — https://www.webdesignerdepot.com/2009/12/minimalist-web-design-when-less-is-more/
- Content matters — https://www.alistapart.com/articles/a-checklist-for-content-work/
This is just a partial list. If you find resources that really help you to learn a task or finish an assignment, please add it to the resources forum.
Cheatsheets
- Cheatsheets at Wired.com – HTML, special characters, CSS, Unix
- jQuery cheatsheet (great use of color on this site!)
- Color charts at Wired.comWordPress changes too quickly (in my opinion) for cheatsheets to last, but here is a link to a list of 14 WordPress cheatsheets for designers & developers.
MISCELLANEOUS
Newer trends
https://www.mugscafe.org/ is a one page website built with the Divi theme in the WordPress universe, but you can do something VERY similar using Skeleton.
Explore
- Adding scripts to your site: https://www.javascript.com/ and https://www.javascriptsource.com/
- WordPress tv — for quick tips on everything WordPress https://wordpress.tv/
- Using plugins to enhance WordPress functionality: https://wordpress.org/plugins/
Note — the free accounts at WordPress.com do not allow you to add plugins - Using video to capture attention: Teaching Tip (https://iteachu.uaf.edu/wp-content/uploads/sites/238/2015/10/TT-video-engagement.pdf)
- Current methods of using video: https://www.w3schools.com/html/html5_video.asp
- jQuery more than just the user interface items we discuss/explore in class: https://jquery.com/
Suggested downloads
Updates: Web Developer for Chrome: https://chrispederick.com/work/web-developer/installed/chrome/04/
RESOURCE LINKS
Editors to download or try online
- Notepad ++ (PC)
- jEdit (Cross platform)
- TextWrangler (Mac)
jsFiddle (Online web editor)
Click on the HTML or CSS link to see results. Look around my stored example on JSFiddle.
Code validation
Check your spelling and consider using a free resource like FREE FORMATTER to check if your code is correct.
Making buttons & images
- Great button tutorial (ADVANCED) created by a former student; this explains how to use Inkspace to make buttons. Worth viewing.
- You can make your own buttons using the free GIMP graphics program (https://getgimp.com/ or https://www.gimp.org/).
- 20 Fantastic GIMP Tutorials – https://10steps.sg/tutorials/20-fantastic-gimp-tutorials-beginner-to-pro/
- https://css-tricks.com/ – Just fun to look through a few items
- https://css3menu.com/ – free css menus and buttons with css3 rounded corners, css3 gradient and css3 shadows. … simple Vertical Blue Vertical Apple Blue
Come back to this one later in the semester and try to implement the css3menu in one of your pages! - ADVANCED: https://www.31three.com/ – 31Three uses it on its portfolio examples as well, making each circle light up ever so slightly with your hovering mouse.
- ADVANCED: https://tympanus.net/codrops/category/tutorials/ and one awesome effect to try out: https://tympanus.net/codrops/2012/01/04/thumbnail-proximity-effect/