web-dev-studio/resources.md

Find here a growing collection of links collected by Joana Chicau:

SOURCE CODE EDITORS (very shortlist)

• Sublime Text

• Visual Code Studio

Remote Collaborative Code Environments

• Live Share - Visual Code Studio

• Radicle is a peer-to-peer stack for building software together

• Shared Collaborative Online Tool

• Glitch Teams

• Live Weave — Team Up

WEB CONSOLE:

• Guide to Console Commands

WEB PROTOCOLS (www and HTPS) and STANDARDS:

• How does the Internet work?;

• w3 History

• Web Glossaries

• Fighting phishing browser — HTTPS and SSL certificates

• Domain Games: Pseudonymity, anonymity and linkability

• Behind Data — Metadata

• Who makes the standards?

• Screen Sizes

WEB Hosting

• About Hosting;

• GitHub Pages and more info on how to set it up on Github;

• Green Energy Run UK Web Host;

• Radical Servers;

WEB Publishing Alternatives:

• HotGlue

• BLOT

• SmallVictories

HTML

• w3schools Basic Intro HTML;

• Intro to HTML Document and website structure

• Basic Web Page — sum up;

• What’s in the head? Metadata in HTML;

• Semantic HTML and Document Outline;

• HTML Semantic Elements (header, nav, section, footer..);

• Special Characters List;

• Image Formats, Image as Links and More;

• Video Formats;

• Audio Formats;

• More detailed information on adding video and audio content;

• Difference between ID and Classes;

• Create Links;

• Validator;

• A basic HTML Cheatsheet;

• HTML CheatSheet extensive reference list - notice that the markup language may change so this PDF is not future proof ;)

CSS

• Hello CSS;

• CSS reset

• CSS Units

• Font Formats

• Box Model

• FlexBox

• Positioning Elements

• Z Index

• Selectors

• Prefixes

• Grid

• Grid Layouts Examples

• CSS Grid Garden

• CSS Cheatsheet

• CSS Validator;

• CSS Patterns;

Animations

• Animate CSS Library

• Animatable CSS Library

• Web Effects CSS and Libraries

• More CSS Animation Galleries

Canvas

• W3 Canvas Drawing + JS Animations

• Moz Canvas Drawing

• HTML 5 Canvas Video Tutorial

Web Design

• Design + Development: exploring collaborations in code

Media Queries and Responsiveness

• Responsive Layout Design

• Responsive Images

• Responsive Design Podcast

• Media Queries

• Summary CSS Media Queries

HTML Boilerplate examples

• HTML5 Boilerplate - mobile-friendly HTML template

• Skeleton - responsive boilerplates

WEB TO PRINT

• Basic CSS Print Media Query tutorial

• Print CSS

• Advanced CSS @Page rule tutorial

• Pre-Post-Print;

• pdfkit;

• e-flux journallayout-generator; by developer Adam Florin — > Prawn pdf project;

WEB FONTS

• On Web Typography;

• Practical Typography

• Free Fonts;

• By Womxn;

• Use Modify;

• Manufactura Independente;

ICONS

• Embed Links to Icon Libraries: Font Awesome, Bootstrap ...;

• Font Awesome;

• Material API;

• The Noun Project;

• Maki Icons

• Animated web icons;

• Emojis;

• Customizable free SVG icons;

• Animated Icons Library;

COLOURS

• Advanced Colorful Goodies

• Brand Colors

• Mesh Gradients

• 0to255

JavaScript

• Tutorials

• Awesome JS — list of resources

• List of JS Libraries

Javascript Libraries

• jQuery

• jQuery UI

• Paper.js

• Fabric.js

• Three.js

• babylonjs

• D3.js - Data Driven Documents and Animated Info-graphics;

• Moving Letters

• Textillate

• Anime.js

JS GAMING Libraries

• List of Javascript Game Engines

WebVR

• WEB VR info developers

• Frame.io

• Mozilla Hubs for Developers

CMS (Content Management Systems)

open source examples shortlist

• Flat file CMS

• GrapesJS — multi-purpose Web Builder Framework

• Bolt + PHP-based Symfony framework

• Microweber — drag and drop website builder and CMS

• WYSIWYG CMS

Database-driven CMS examples

• Fork

• WordPress Setting Up Custom Themes

• Bones – An HTML5, Mobile-First starter theme for rapid WordPress development

• Underscores — ultra-minimal CSS starter theme for WordPress

• MediaWiki

• How to start a Wiki

• Intro to Semantic MediaWiki

other examples

• MongoDB

• Readymag - browser based design tools

Editors examples

• Editor.JS

• Tiny Cloud — WYSIWYG editor JS library

• TinyMCE — customizable text editor

SSG (Static Site Generators)

• SSG comparison cheatsheet 2020

• Jekkyl

• Jekkyl + GitHub

• PELICAN

• HUGO

Front-End Frameworks

for building websites and applications (free open source)

• Bootstrap

• React-Bootstrap

• Vue;

• Bootstrap-Vue

• React;

• React Native — focus on mobile

• Angular + W3 ref.;

• Gatsby

• List of SSG and Frameworks

E-commerce (just a few examples)

• BEP — an ecommerce platform with no backend

• BELUGA.JS open source React + Node

• MiniCart

APIs (Application Programming Interfaces)

• List of public API's

• Introduction to Populating a Website with API Data - Use Case

CROSS BROWSER (in)-compatibility;

• Can I use?;

• Browser Hacks;

UX Design & Prototyping & Usability Testing

• Prototyping Tools

• UX mag;

• Laws of UX;

• Resources and Techniques;

• Design Method Toolkit;

• Wireframing

• Paper prototyping

• Design Systems

Accessibility links:

• Checklist — The Web Content Accessibility Guidelines (WCAG)

• WAVE Web Accessibility Evaluation Tool

• Easy Checks – A First Review of Web Accessibility;

• Web Accessibility Statement;

• Designing for Web Accessibility;

• Inclusive Designs

• Color Filter;

• The Lenses of Accessibility

• Accessible Web Animation

• Web Dev Accessibility

• Accessible Website Design for Blind

• Collection Web accessibility;

• GOV.UK accessibility guidance

'Sustainable' Web Dev

Tools

• Calculating Digital Emissions
• Ecograder
• Website Footprint

Design Resources

• Lowtechmag WebDesign
• BBC planet 4 Design System
• w3 Community SustyWeb
• Sustainable Digital Design

Optimizing for Web Sustainability

• Image srcset
• Web Fonts
• WOFF2
• Webfont Generator
• Variable Fonts
• Subsetting fonts

SEO

• SEO Resources

Licenses

• Open Source Licenses

• Licenses on Github

• Not for Any* A toolkit on Open Source Licenses

Miscellaneous ✨

• Open source, experimental, and tiny tools roundup

---

---

And many more tools.. Find Open Source By Searching, Browsing and Combining 7,000 Topics Across 59 Categories And 346,452 Projects