Links

🧰 Web Toolkit

Text Editors

• Visual Studio Code
• Atom.io

GitHub

• GitHub Desktop
• GitHub Pages

🔗 Links

A really big curated list of links all about web design and development.

Web Development

• Prepos
• Codekit

Browsers

• Google Chrome
• Firefox

📷 Emojis and Photos

• Emoji Favicons
• Unsplash

Responsive designs

• Responsivedesign.is
  A curated collection of responsive designed websites. Each site features a screenshot across 4 device widths and you can see the media queries, viewport and resources that have been used to create the site.

• MediaQueries
  A collection of inspirational websites using media queries and responsive web design.

👍 Free video courses

• CSS Grid: Let’s get Griddy with it
  Learn CSS Grid: From fundamentals to Real World in about 4 hours.

• What The FlexBox?!
  A simple, free 20 video course that will help you master CSS Flexbox!

• Learn CSS Variables for free
  This tutorial teaches you CSS Variables through eight interactive screencasts. It’s value-packed from beginning to end, and is probably the fastest way to get an in-depth understanding of CSS Variables.

• Learn CSS Grid for free
  This tutorial teaches you CSS Grid through 14 interactive screencasts. You’ll learn all the key concepts while building three awesome layouts: a website, an image grid, and an article. Plus, you’ll learn how to combine CSS Grid with Flexbox.

• Learn Flexbox for free
  This tutorial teaches you CSS Flexbox through 12 interactive screencasts. You’ll learn all the key concept in addition to building a responsive navbar and a neat image grid.

• HTML & CSS Crash Course
  Learn to build your very first web pages with this four hour course on HTML and CSS.

• Introduction to HTML
  Learn HTML5 by building your own website in less than an hour! This 15-part interactive tutorial is the perfect starting point for beginners who’re looking for an introduction HTML to web development.

️W3C Online Courses

Learn how to build Web sites using HTML5 and basic CSS, directly from W3C, creator of the latest Web standards.

1. HTML5 and CSS Fundamentals
2. CSS Basics

👍 Learn the Web

Learn the Web is a structured, curated, living guide to web development for graphic designers. Good reference materials available.

1. All Topics
2. Using Paths and Folders
3. Naming Files Rules
4. Basic typography

🛠 Carpentries

Teaching basic skills for research computing. Online workshops for Python, R, Ecology, Genomics, Geospatial Data, Working with Data, OpenRefine.

• Software Carpentry workshops
• Data Carpentry workshops
• Library Carpentry workshops
• Git for Novices
• Programming with R
• Programming with Python

📰 Free Email Newsletters

• CSS Layout News
  A weekly collection of tutorials, news and information on all things CSS Layout by Rachel Andrew
• Veerle’s Designers newsletter
  A weekly newsletter filled with design inspiration, a curated downloadable swatches color palette, quick design tips and the same resources I learn from.
• Responsive Design Newsletter
  A once-weekly round-up of responsive design articles, tools, tips tutorials and inspirational links.

📗Magazines

• Smashing Magazine
• CSS Tricks

📓 Blogs

• Stuff and Nonsense Inspired Design Decisions
• Frank Chimero
• Ethan Marcotte

📚 Books

• Web Project Guide
• The Shape of Design
• Resilient web design
• Web Typography by Richard Rutter
• A Book Apart
• Rosenfeld Media
• Learning Web Design by Jennifer Robbins
• Pro Git by Scott Chacon and Ben Straub
• Art Direction for the Web by Andy Clarke

Note: Many of these books are available at the LA Public library.

👉Layout

• Learn CSS Layout
• Layout Land
• Grab and Go Layout Patterns

🎨 More Resources and Sites

👉 W3C: Standards and Accessibility

Leading the web to its full potenial. The World Wide Web Consortium (W3C) is an international community that develops open standards to ensure the long-term growth of the Web.

• W3C
• Web Accessibility Initiative
  Strategies, standards, resources to make the Web accessible to people with disabilities
• W3C Web Design Standards
  Web Design standards for building web pages, including HTML, CSS, SVG, device APIs.

👉Fonts

• Google Fonts
• Modular Scale for Typography

Google

• web.dev
• Material Design

🦊🦊 Mozilla Developer Network

👉 CSS Grid

1. Quickly master CSS Grid
2. CSS Grid Layout

👉 Web Developer information

1. Learn Web Development
2. Getting started with the Web
3. Learn HTML
4. Learn CSS
5. Learn JavaScript

👉 CSS: Cascading Style Sheets and HTML

1. CSS Introduction, Tutorials and Reference
2. CSS Flexbox Layout
3. CSS Variables
4. CSS Shapes
5. CSS Transforms
6. CSS Animation
7. Mozilla Developer Network
8. Getting started with the Web
9. Learn HTML
10. Learn CSS
11. Learn JavaScript
12. CSS Grid
13. Playground to quickly master CSS Grid

🎮 Games

• CSS Grid Garden
• Flexbox Froggy

👍 More on CSS Grid

1. Grid by Example by Rachel Andrew
   Everything you need to learn CSS Grid Layout
2. CSS Grid Generator
3. CSS Tricks Guide to CSS Grid

🛠 Apps

👉 Learning Git

• Working with GitHub Pages
• Getting started with GitHub Desktop
• Getting started with GitHub
• Mastering Markdown
• Learning Git
• GitHub Desktop
• Git Kraken
• Git
• Git GUI Clients

👉 Browsers

• Google Chrome
• Firefox

👉 Graphic and Video Editors

• Figma
• Pixelmator
• Affinity
• Gimp, photo editor
• Inkscape, illustration
• OpenShot, video editor

👉 Server

• Set up a local testing server
• MAMP
• Laravel Valet

👉 Social developer tools

• Glitch
• Codepen

📷 Icons and Photos

• Emoji Favicons
• Noun Project
• Font Awesome
• Unsplash

👉 Development

• How to set up your Mac for Web Development in 2020
• Brew Package Manager