Blog
Useful dev and design links
A list of resources, tutorials and quizzes that I've been using to brush up on my front-end dev and design skills during recent months.
The downturn of client work over these last few months has had a silver lining of giving me the time to improve my front-end dev and design skills. Below is a list of some of the resources, tutorials and quizzes that I've been working my way through.
Front End Dev
- Hot Tips — "Hot tips are spicy lil' nuggets related to web development and tooling" by Wes Bos
- Jamstack — Best Practices, Resources and Examples
- Sit the Test — Quick quizzes for HTML, CSS and JavaScript
- Front End Interview Handbook — Practice Front-end Job Interview Questions with answers
- Learn to code at home — Learn to code at home. Build projects. Earn certifications.
CSS
- CSS Grid — Learn all about CSS Grid with Wes Bos in this free video series.
- CSS Diner — Visual CSS Selector quiz
- CSS Battle — Use your CSS skills to replicate targets with smallest possible code.
- CSS Reference — A free visual guide to CSS
- Modern CSS Solutions — Solutions for Old CSS Problems
- What The Flexbox?! — A simple 20 video course that will help you master CSS Flexbox
- Grid Garden — A game for learning CSS grid
- CSS Grid Tutorial — Learn CSS Grid For Free on Scrimba
- CSS Almanac — A reference guide to the many features of CSS by CSS Tricks
- Flexbox Froggy — A game for learning CSS flexbox
- 100 Days CSS Challenge — Recreate CSS examples
- Relearn CSS layout: Every Layout — A series of modern CSS layouts
JavaScript
- Superhero.js — a collection of the best articles, videos and presentations
- The Modern JavaScript Tutorial — From the basics to advanced topics with simple, but detailed explanations.
- JavaScript Visualizer — A tool for visualizing Execution Context, Hoisting, Closures, and Scopes in JavaScript
- JavaScript 30 — Build 30 things with vanilla JS in 30 days with 30 tutorials, free course by Wes Bos
- Codewars — Improve your skills by training with others on real code challenges
Code Standards & Styles
- Code Guide by @mdo — Standards for developing consistent, flexible, and sustainable HTML and CSS.
- Principles of writing consistent, idiomatic HTML, CSS and JavaScript — by necolas
- CSS Guidelines — High-level advice and guidelines for writing sane, manageable, scalable CSS
- Sass Style Guide — by CSS-Tricks
GIT
- Learn Version Control with Git — Free Oonline book by Git Tower
- Learn Git Branching — visual and interactive way to learn Git
- Think Like (a) Git — achieve some level of Git enlightenment
- Git Immersion — A guided tour that walks through the fundamentals of Git
UX & Design
- The Guide to Design — There are no magic formulas in design. But if you are looking for guidance, here's a starting point.
- Can't Unsee — Visual quiz to test your design eye
- UX Crash Course — 31 Fundamentals of UX (old article but still useful)
- Laws of UX — more UX design priciples
- Daily UI — Design Challenge, Inspiration, and Resources
Misc
- A Variable Fonts Primer — add nuance and artistry to your web typography
- What is Agile? — Guide to Agile principles by Atlassian
- Command Line Power User — A free video series for web developers on learning a modern command line workflow with ZSH, Z and related tools.
- Mastering Markdown — A free video series for web developers on learning a modern command line workflow with ZSH, Z and related tools.
- PHP: The Right Way — easy-to-read, quick reference for PHP popular coding standards
- The Power of Serverless — The Power of Serverless for Front-End Developers
- RegexOne — Learn Regular Expressions
- BrowserStack Summer of Learning — A 5-part webinar series on test automation
- How Browsers Work — Behind the scenes of modern web browsers (old article but still useful)