External resources

Rule of thumb

If you have an idea in mind, there is a good chance someone else has already thought of it and shared it online. Look for a solution online , try to understand what the code effectively does, and only then implement it.

It is also ok to not understand everything right away. Try to get an abstract understanding of what you copy paste, and try to alter, tweat, or improve it. You'll learn a lot more by getting your hands dirty.

Useful resources

Guides and references

• W3 Schools: HTML, CSS, JS — good introductory guides to the subject.
• MDN: HTML, CSS, JS — authoritative docs with examples.
• A friendly introduction to SVG – a great introduction to SVG on the web.

Coding playgrounds

• JSFiddle — free online editor for HTML, CSS, and JS. Ability to save and share code.

Font convertion tools

• Transfonter — convert fonts to WOFF/WOFF2 for the web.
• Fontsquirrel — convert fonts to WOFF/WOFF2 for the web.

Media file compressors

• ImageOptim — optimise images, remove metadata, and convert to WebP format.
• HandBrake — optimise videos for the web and convert to WebM format.

Favicon generators

• RealFaviconGenerator — generate icons and HTML tags.
• favicon.io — generate icons and HTML tags.

Files and scripts

• Modern CSS Reset (altered) — normalizes default styles across browsers.
• Batch resize and convert images — resizes and converts images using ImageMagick. Follow the guide on the Responsive images page to use it.

Online tools for animations and transitions

• Cubic Bezier— a tool for creating cubic-bezier timing functions (easings).

Handy JavaScript libraries

• Swiper.js – customisable, vanilla JavaScript carousel/slider/slideshow.
• Scrollama.js – lightweight, dependency-free, vanilla JavaScript library for creating scroll-driven animations.
• Lozad.js – lightweight, dependency-free, vanilla JavaScript library for lazy loading images.
• Neodrag.js – lightweight, dependency-free, vanilla JavaScript library for rendering elements draggable.