gabysantosw/resources

Where I keep track of learning resources and my journey into web development.

Resources

Mostly tools but also guides / tutorials / courses, always updating it.

📚 Course (📋 Read, ▶️ Video)

📖 Book

📌 Tutorial / blog post / guide

📧 Newsletter / tutorials by email

• Sections:
  • Design - Development - Others
    • 🔹 Subsections
      • ➖ Specific Topics

---

Design

---

🔹 Typography

➖ Learn:

• ▶️ Improving web and mobile typography - 5 guidelines - by Sketch Together Youtube

• Beautiful Type - inspiration and font pairings examples

• 📌 The typographic scale

• Font Pair - font pairings inspiration from googlefonts

➖ Assets:

• Google Fonts

➖ Tools:

• 🔧 Modular Scale

• 🔧 Type-Scale

• 🔧 Layout Grid Calculator

---

🔹 Color

➖ Converters:

• Convert A Color - inputs and outputs a single color in hex, rgb, hsl and cmyk, 900-50 complete palette

➖ Palettes:

• Color Review - test accessibility, contrast

• Accessible Brand Colors - test

• Curls

• Material Palettes - good when a complete palette is needed, multiples tones.

• Material Design Color Tool - uses the material design palette, has accessibility testing, limit of 8 colors

• Color Hunt - for inspiration, interesting colors, base for a palette

• Color Koala - for inspiration, interesting colors, base for a palette, has a filter for light/bright/dark colors and a desired hue

• SchemeColor - interesting color palettes by concepts / brands, get a palette from image

• Color Spark - single color/gradient inspiration

• Color Box

➖ Gradients:

• uiGradients - inspiration, interesting colors

• Web Gradients by Itmeo - inspiration, interesting colors, can copy the css in hex

• CSS Gradient - visual gradient generator for complex gradients, outputs the css code in rgba

• Gradient Hunt - inspiration, interesing colors, copies css in rgba

➖ Others:

• Khroma - AI to explore colors and their combinations with typography, poster, gradient, images. Still in beta

• 🔧 Cool Backgrounds - Generate backgrounds with effects

• 🔧 Blob Maker

---

🔹 Media Assets

➖ Icons:

• 🔧 Favicon - to create an .ico file to use as a website's icon

• iconmonstr

➖ Videos:

• Mixkit

---

🔹 General

• 📚 📋 Hack Design - Design course with many resources

• 📌 How my design came to live - design process and struggles

---

🔹 Web Design/UI/UX

➖ Courses:

• The Gymnasium - Courses about design and development
  • 📚 ▶️ UX Fundamentals ~ 3-6h
  • 📚 ▶️ Information design and visualization fundamentals ~ 3-6h
  • 📚 ▶️ Writting for web and mobile ~1h
  • 📚 ▶️ Atomic design and pattern lab ~1h
  • 📚 ▶️ Prototyping for digital products and websites ~1h

• Balsamiq Learn - has UI/UX courses and resources
  • 📚 📋 Intro to UI Wireframing
  • 📚 ▶️ Psychology of UI Design ~ 3h

• Design Code - has mostly paid courses on design and code.
  • 📚 ▶️ Design System in Figma

• ▶️ Design Systems by Christopher Deane Youtube Playlist

➖ Books:

• 📖 Atomic Design

➖ Guides:

• Material Design

• Women Made It - design tools, books, podcasts, blogs made by women

• Humane by Design - design best practices

• Microsoft Inclusive Design

• Ind.id Labs - guides, projects and practices for good and ethical design

• 📌 Begginer's Guide to Interaction Design

• InVision Ecourses

• 🎮 Method of Action - games to learn design

➖ Articles:

• 📌 10 cheat codes for designing UI

• 📌 Is your product designed to be calm? - designing unobtrusive and with respect, guidelines to follow

• Design Ethically

• Designing Mindfulness

• Dark Patterns - BAD design examples

• 📌 Web design crash course - by Ali Spittel

• LearnUI
  • 📌 The HSB Color System

• Lapa Ninja - collection of free design resources, books, inspiration

• UX Booth - articles for everything UX

• Design Principles

• Degreeless Design

• Responsive Web Design Resources

• Style Guide - resources, examples, tools

• Protorypr - resources, blog - CONSTANTLY CHECK

• 📌 Creating a UI style guide for better UX

• Design Systems - Examples made by figma

• Good UI

• UI Goodies - resources, tools

• Figma Freebies

• Pattern Lab

• Learn UX Courses

• Design System Manager - Learn - by InVision

• Creating atomic components in Figma

• Useful animations for a web UI

• UI Recipes

• Designspiration

• Call to Idea

• Mobile Design Patterns

• UX Tricks - blog and some free/paid ebooks

➖ Tools:

• 🔧 Checklist Design - collection of UI/UX best practices

• 🔧 Overflow - turn your designs into playable user flow diagrams that tell a story

• Codrops

• 99designs Blog

• Collect UI

---

Development

---

🔹 General

• Google Dev Web Fundamentals

• One Page Love - inspiration

• Awwwards - top websites

• Jet Brains

• Octoverse

• Stackoverflow Trends

• npm trends

• FFF - interesting web animations

• Front-end Checklist

• Scrimba

---

🔹 Markdown

• Markdown Cheatsheet

• Emoji

• Alt-codes

---

🔹 HTML

➖ Learn:

• ▶️ Structuring and Organizing HTML5 Forms - The Gymnasium - HTML ~ 1h

➖ Others:

• 🔧 HTML Escape - outputs escaped html, useful for pasting code, website has other of tools too

• HTML5 UP - free templates, good for inspiration

---

🔹 CSS

➖ Learn:

• Daily CSS Design - Amazing illustrations made with CSS

• 📧 Daily CSS Images - 50 day CSS challenges, it seems to be discontinued

• 📌 CSS skeleton screens

• Bugsnag Blog - Various tutorials and guides about web development
  • 📌 Responsive Typography with REMs Part 1/3

• 📌 Rachel Andrew's Blog - everything CSS

• 📌 How to create better themes with CSS Variables

• 📌 Custom Property (CSS Variables) controlled fluid type sizing

• 📌 Experimental layouts with CSS shapes and clip-path

• 📧 Piccalilli - email newsletter about UI

• 📌 Write better CSS: from hell to heaven, p1

• 🎮 CSS Diner - learn and practice css selectors

• 💻 Generative Art with CSS

• 📌 Snippets by CSS Tricks

• 🎮 CSSBattle

• 🎮 CSS Surgeon - learning css transformations

➖ Flexbox & Grid

• 🎮 Flexbox Zombies

• 🎮 Flexbox Froggy

• 🎮 Flexbox Defense

• Grid to Flex - practical uses for flexbox and css grid, comparations between them

• Learn CSS Grid

• Grid by Example

• 📌 Enhancing CSS Layouts: floats, flexbox, grid - tutorials, examples, patterns

• 📌geddski - creator of flexbox zombies & other games, articles about css, ui, etc

• 📌 CSS Grid admin dashboard

➖ Animations:

• Animate.css

➖ Challenges:

• ⏫ Frontend Mentor

• ⏫ Frontloops Markup - challenges without solutions are free

• ⏫ 100 Days Of CSS

• ⏫ CSS Zen Garden

➖ Preprocessors:

• Getting Sassy with CSS - slides and exercises

➖ Assets:

• CSS3 Patterns Gallery

➖ Shapes:

• 📌 The shapes of CSS -> guide to create multiple shapes with css

• 📌 CSS border radius can do that? - to create interesting figures with border radius

➖ Libraries:

• tailwindcss

➖ Articles:

• 📌 You dont need JavaScript for that

---

🔹 SVG

• Hero Patterns

• SVG Backgrounds

• SVG Minify

• Avataaars - svg avatars generator

---

🔹 Javascript

➖ Courses:

• Scotch - courses, tutorials, guides, books and blog. free and premium content

  • 📚 📋 10 Need to know JS concepts
  • 📚 ▶️ Getting started with JS for web dev ~5h
  • 📚 📋 Javascript Algorithms
  • 📚 ▶️ Javascript Foundations - The Gymnasium - JS ~ 3-6h

➖ Books:

• 📖 You Don't Know JS Series
  • 📖 Up & Going
  • 📖 Scope & Closures
  • 📖 this & Object Properties
  • 📖 Types & Grammar
  • 📖 Async & Performance
  • 📖 ES6 & Beyond

• 📖 Eloquent Javascript

• 📖 Javascript Grammar - visual guide (release was free)

➖ Tutorials:

• The Modern JavaScript Tutorial

• JavaScript the Right Way - javascript guide for all levels, tips and good practices

• JavaScript Teacher - tutorials, guides, videos

➖ Challenges:

• ⏫ HackerRank
  • 10 days of JavaScript

• ⏫ Codewars

• ⏫ Edabit

• ⏫ Exercism JavaScript Track

➖ Tools:

• 🔧 JSHint - analyses js code for best practices / errors

➖ Service Workers:

• 📌 What are service Workers?

• 🎮 Service Workies

➖ Node

• ▶️ Introduction to Node.js - The Gymnasium - JS ~ 1h

➖ Testing

• Mocha

• Chai

➖ React

• 📌 Semantic JSX

➖ Libraries

• Marked.js -> parser and compiler to handle markdown data and rendering

---

🔹 Regular Expressions

• RegexOne - regex interactive tutorial

• Regexr - test, visualize, understand regex

• regex101 - test, visualize, understand regex

• RegExper - regex visualization

• 📌 Converting objects keys from snake_case to camelCase with JavaScript

---

🔹 Code Playgrounds

• jsbin

---

🔹 Code Challenges

• Advent of Code

---

🔹 HTML, CSS & JS

• 📚 ▶️ Modern Web Design - The Gymnasium - HTML, CSS, JS ~ 3-6h

• 📚 ▶️ Responsive Web Design Fundamentals - The Gymnasium - HTML, CSS, JS ~ 3-6h

• ⏫ Frontloops Elements - challenges without solutions are free

• 📌 Memory game with plain/vanilla JS, HTML, CSS

• App Ideas

---

🔹 Code UI

• Defining a Modular Type Scale for a web UI

• SuperHi tutorials - video and tutorials section, superhi has paid courses on development with design

• Little Snippets - code snippets

• CSS Code Snippets

• Code my UI

• Mobile web problems and how to avoid them

• This is Responsive - pattens and resources for creating responsive web experiences

• Simple does not mean ugly

• Accssible - writing about CSS and design, tutorials and articles

• ⭐ My 8 tips & tricks for UI development

• ⭐ UI practices that work all the time

• Pintab - design and development resource list

---

🔹 General

• P1tx JS ready v3.0

• The Gymnasium - Courses about design and development

• App Academy Open - free full stack curriculum, based on videos and interactive exercises
  • 📚 ▶️ Welcome To Coding
  • 📚 ▶️ Intro to Programming
  • 📚 ▶️ Software Engineering Foundations
  • 📚 ▶️ Ruby
  • 📚 ▶️ SQL
  • 📚 ▶️ Rails
  • 📚 ▶️ JavaScript
  • 📚 ▶️ React
  • 📚 ▶️ Full Stack Project
  • 📚 ▶️ Job Search
  • 📚 ▶️ GraphQL

• DevDojo - Has paid courses but some free videos, articles and tutorials

• Material Design Developer Tutorials - codelabs

• Alison - Some free courses with certifications but seems to be outdated

• Fullstack Academy - offers paid bootcamps, got the prep for free
  • 📚 ▶️ Prep Workshop

• Google Web
  • 📚 Progressive Web Apps Trainning
  • 📚 Web Fundamentals

• web.dev - still in beta

• 📌 Smashing Magazine - Articles on everything web dev and design

• 📌 A List Appart

• Code Talks - last talks about development

• Coderwall - reddit for coders

---

🔹 Code Examples

• TodoMVC - examples for building todo apps in various frameworks, some with database examples too

---

🔹 Accessibility

• Alt-texts: The ultimate guide

• ⭐ Webaud.it - checklist to follow form proper formating, performance, accessibility and security

• The A11y Project

• W3C Intro to Accessibility

---

🔹 REST

• Insomnia - OS REST client and APIs debugger

---

🔹 Tools

• npm

• Browsersync

➖ Build

• Webpack

• Parcel

• createapp.dev - generates package.json and webpack.config.js for webpack, for parcel it generates the package.json. also generates the other dependencies files (like the .babelrc file)

• Brunch

---

🔹 Git & GitHub

• The Gymnasium - Courses about design and development
  • 📚 ▶️ Intro to Git and GitHub

• Gitbook - free hosting for documentation-like websites from github, good for notes, resources and allows more styling

• How to optimize your GitHub portfolio

---

🔹 Testing

• Lighthouse
  • Online testing

---

🔹 Interviews

• Interview Cake - paid guidance for programming interview
  • 📧 7 day email course + weekly programming problem

---

🔹 Deployment

• Deployment with Codepen Projects hosting - free but can't choose domain name with free accounts

---

🔹 Databases

• Front-end Devs guide to GraphQL

---

🔹 Collaboration Projects

• Chingu

---

Others

---

🔹 Domains

• Namecheap

---

🔹 Work

• User Testers - earn money testing websites

• 📖 Guide to Freelancing - by Bonsai and InVision

• Women Who Design - job board and design ladies to follow

• Toptal

• We Work Remotely

• Remote friendly companies list

• RemoteHub

• Remotive

• Job Fluent

• Joppy

---

🔹 Productivity

• The Gymnasium - Courses about design and development
  • 📚 ▶️ Defeating busy - learn to plan, manage, etc

• Notist - slide maker

---

🔹 SEO

• Buildvisible - blog and resources about SEO mostly

• Begginers guide to SEO

---

🔹 Commerce

• Commerce Layer

• Pilon