Here's some resources for learning Front End Web Development:
Theory
- Hardboiled Web Design Fifth Anniversary Edition by Andy Clarke
- css-architecture: 8 simple rules for a robust, scalable CSS architecture
- HTML & CSS Is Hard | A friendly web development tutorial
Atomic Design
- Atomic Design Book - Thorough book by Brad Frost about the mental model of breaking apart modular components using a biological analogy of Atoms, Molecules, and Organisms.
BEM
- BEM 101 | CSS-Tricks
- Battling BEM (Extended Edition): 10 Common Problems And How To Avoid Them - More in depth usage of BEM and the nuance required to wield it effectively
Organization
- SMACSS - Really only use this as a starting point for thinking about the cascading series CSS duties. Moving to more purely component-driven architecture (with the help of build tools), makes this a little obsolete eventually. Still good to know.
Techniques
- That's Real-Life Responsive Web Design: Meet The Brand New Smashing Book 5 – Smashing Magazine
- Learn to Code and Help Nonprofits | Free Code Camp
Topics
Delivery
Pattern Lab
- Making And Maintaining Atomic Design Systems With Pattern Lab 2 – Smashing Magazine
- Pattern Lab: Taking Our Workflow from a Linear to Parallel Process | Phase2 Technology by Yours Truly - How we used Pattern Lab 1 that used Mustache templates alongside Drupal 7 that use PhpTemplate. This approach has been improved with Pattern Lab 2 and Drupal 8 thanks to Twig templates, but the concept still holds true.
Tools
- CSS Reference - A free visual guide to the most popular CSS properties
- Documentation Viewer: