This repository is intended as a way to collaborate on creating a list of free and open source tools that can be used to learn and teach web literacy.
Web Literacy is defined by the Mozilla Webmaker group as a "the skills and competencies required to read, write and participate effectively on the web" (for more info, read the Webmaker whitepaper). Relevant skills associated with web literacy are outlined in the Mozilla Webmaker Web Literacy Map. Web literacy is a fundamental part of being literate in today's information landscape.
The tools listed on this page have been chosen because they are free to use and offer quality instruction and guidance on creating content for the Web. I prefer open source tools and many of those I use in the classroom are open source partly because they offer licensing that allows for freer use. However, not all of the included tools are open source- there are many great proprietary tools out there that are free to use and allow for people to learn valuable and important skills.
The tools are broken down into sections- tutorials, references, validators, software, code playgrounds, and lessons.
This is certainly not an exhaustive list and EVERYONE is encouraged to contribute their ideas either through a pull request, by contributing to the comments in one of the open issues (or by creating a new issue) or by participating in the Ost.io discussion. As a caveat- I am still learning how to use Github (and somewhat failing, at that) and this is a work in progress. Therefore, I encourage you to contact me via email with any concerns- twm2(at)humboldt.edu.
| Name | URL | Description | Type |
|---|---|---|---|
| Try jQuery (Code School) | http://try.jquery.com/ | Learn the basics of using jQuery and quite a bit about the DOM tree as well | Instruction: video, written Work: exercises |
| Codecademy | http://www.codecademy.com | Basics of how web pages are constructed | Instruction: Written w/ simple tasks Work: exercises & projects |
| Dash (General Assembly) | https://dash.generalassemb.ly | HTML, CSS & JS basics | Instruction: Written w/ simple tasks Work: projects |
| Code Combat | http://codecombat.com/ https://github.com/codecombat/codecombat | Learn Python, JavaScript and more in a game! | Instruction: game, quest-based Work: it's a game! |
| Grok Learning | https://groklearning.com/csedweek/ | Python introductions | Instruction: written w/ simple tasks Work: projects |
| Coursera | https://www.coursera.org/courses?categories=cs-programming | Learn a variety of languages- synchronous and learn at your own pace options | Instruction: varied, video and project-based Work: varied, project-based |
| Khan Academy | https://www.khanacademy.org/computing/cs | Uses JavaScript to teach fundamentals of programming- not specific to web development | Instruction: Video Work: exercises |
| Mozilla Developer | https://developer.mozilla.org/en-US/ | References, tutorials and tools to learn HTML, CSS, JS and more | Written references and tutorials with suggested exercises |
| MS Virtual Academy | [http://www.microsoftvirtualacademy.com/?cmpid=W_MSS_MKTG_MVA_FY14_MVA] (http://www.microsoftvirtualacademy.com/?cmpid=W_MSS_MKTG_MVA_FY14_MVA) | Tutorials on a wide variety of CS topics | Instruction: videos (lengthy) Work: quizzes to assess comprehension |
| Teaching Privacy | http://teachingprivacy.icsi.berkeley.edu/youre-leaving-footprints/ | Privacy & Surveillance topics | Instruction: primarily text w/ links to external videos, sites and games Work: informational only |
| Name | URL | Type |
|---|---|---|
| W3Schools | http://www.w3schools.com | HTML, CSS, JS, jQuery, etc. |
| Stack Exchange | http://stackexchange.com/ | Everything imaginable |
| WebAim | http://webaim.org/ | Accessibility |
| Name | URL | Type |
|---|---|---|
| WAVE | http://wave.webaim.org/ | Accessibility |
| W3C HTML | http://validator.w3.org/ | W3C standards compliance |
| W3C CSS | http://jigsaw.w3.org/css-validator/ | W3C standards compliance |
| JuicyStudio color contrast analyzer (Firefox) | https://addons.mozilla.org/en-US/firefox/addon/juicy-studio-accessibility-too/ | Accessibility - color contrast |
| Chrome Extension | https://chrome.google.com/webstore/detail/color-contrast-analyzer/dagdlcijhfbmgkjokkjicnnfimlebcll?hl=en | Accessibility - color contrast (visual representation) |
| Name | URL | Type | License |
|---|---|---|---|
| Notepad++ | http://notepad-plus-plus.org/ | Text editor | FLOSS - GPL |
| Programmer’s Notepad | http://www.pnotepad.org/ | Text editor | FLOSS |
| FireBug (Firefox extension) | https://getfirebug.com/ | Inspector, debugger, editor, console... | FLOSS - BSD |
| Dragonfly | http://www.opera.com/dragonfly/ | Similar to Firebug | FLOSS - Apache |
| Chrome DevTools | https://developer.chrome.com/devtools | Similar to Firebug | FLOSS - CC BY 3.0 US |
| Colorzilla (FF/Chrome) | FF: http://www.colorzilla.com/firefox/Chrome: http://www.colorzilla.com/chrome/ | Freeware |
| Name | URL | Type | License |
|---|---|---|---|
| JSBin | http://jsbin.com | Online IDE for JS, HTML, CSS and several JS libraries and frameworks | FLOSS (freemium) |
| Bootply | http://www.bootply.com | Similar to JSBin but with emphasis on Bootstrap framework; includes several templates | freeware (?) |
| jsFiddle | http://jsfiddle.net | Similar to JSBin (no Bootstrap) | Freeware |
| Mozilla Thimble | https://thimble.webmaker.org | Online IDE for HTML/CSS/JS | FLOSS |
| Name | URL | Description | License |
|---|---|---|---|
| Mozilla Webmaker Training | https://training.webmakerprototypes.org/en/ | Learn to teach Web Literacy | FLOSS |
| Mozilla Webmaker lesson plans | https://jess.makes.org/thimble/MTMyMzM2ODQ0OA==/mobile-design-kit | Lesson plan kits - use existing, remix or create your own from templates | FLOSS |
| Mozilla Wiki Teaching resources | https://wiki.mozilla.org/Webmaker/Teach/WebmakingResources | List of lots of useful resources | FLOSS |
| Chrome browser extension (Chrome) | https://developer.chrome.com/extensions/getstarted | Build browser extension to grab photos of cute puppies and kittens. Must get your own Flickr API key here: https://www.flickr.com/services/api/misc.api_keys.html | ? |
| Chrome browser extension (LifeHacker) | http://lifehacker.com/5857721/how-to-build-a-chrome-extension | ? |