Resources

Learning development isn’t just about building demos, taking courses, and reading books! There is an incredibly deep and wide pool of information that you will need to be able to retrieve information from, and things are constantly changing!

The resources below may be helpful to reference or utilize as compliments to your learning process, or as a handy way to double-check yourself, or to give you a bit of inspiration for a problem or design you may be working on. If you have any suggestions that you would like me to add to the list, please send me a message!

---

• References
• Utilities
  • Design Applications
  • Validators / Linters
  • Site Performance
  • Color
  • Tools
  • Generators
• APIs
• Training
  • Code Challenges
  • Typing
• Career Development
  • Job Resources
  • Networking
• Libraries

References

Browser compatibility

• https://caniuse.com/

Vanilla JavaScript DOM Manipulation (w/ IE)

• https://htmldom.dev/

HTML Semantics Cheat Sheet

• https://learn-the-web.algonquindesign.ca/topics/html-semantics-cheat-sheet/

Material UI Icons

• https://material-ui.com/components/material-icons/
  • Searchable, with copyable import lines

Google Fonts

• https://fonts.google.com/

Design Inspiration Sites

As a quick disclaimer, be mindful to not confuse aesthetics with functional design! Many inspiration sites are NOT client work and only exist on these platforms.

• Behance
• Lapa Ninja
• Onepagelove
• Dribbble

Utilities

Design Applications

• https://framer.com
• https://www.invisionapp.com/
• https://www.adobe.com/products/xd.html
• https://www.figma.com/

Validators / Linters

Validators and linters can be used to check if a certain file type is correctly structured to ensure that it can be read, and may help clean up formatting and spacing.

JSON

• https://jsonlint.com/

YAML

• https://codebeautify.org/yaml-validator/

GitLab CI Lint

• https://docs.gitlab.com/ee/ci/lint.html
  • I couldn’t find any direct pathways to the linter. If you create a GitLab repo with the intent of using CI, the instructions above will show you how to access the linter, and you can create a bookmark from there!

Site Performance

Page Compression Checker

• http://www.gidnetwork.com/tools/gzip-test.php

Rich Search Results Checker

• https://search.google.com/test/rich-results

Color

Color palettes and generator from images

• https://mycolor.space/
• https://coolors.co/
• http://colormind.io/
• https://www.canva.com/colors/color-palette-generator/
• https://www.canva.com/colors/color-palettes/

Color tool

• https://www.0to255.com/

Color wheel

• https://www.canva.com/colors/color-wheel/

Tools

Freely remove backgrounds from images

• https://www.remove.bg/

Compress JPEG and PNG files, has an API for automated compression

• https://tinypng.com/

Generators

Favicons

• https://favicon.io/favicon-generator/
• https://realfavicongenerator.net/

Documents

• https://www.cookiepolicygenerator.com/cookie-policy-generator/
• https://www.cookiepolicygenerator.com/privacy-policy-generator/

Waves

• https://getwaves.io/

Blobs

• https://www.blobmaker.app/

Avatars

• https://getavataaars.com/

People

• https://blush.design/
• https://www.humaaans.com/
• https://illustratio.us/

Fonts

• https://fontjoy.com/
• https://www.fontpair.co/

Branding

• https://app.brandmark.io/

APIs

If you want to get some hands-on learning with APIs, the Noops Challenge is a great place to get started!

Below is a list of easy-to-use APIs to play around with. There is also a massive list of public APIs on GitHub.

• https://ghibliapi.herokuapp.com/
• https://numverify.com/documentation
• https://github.com/15Dkatz/official_joke_api

Training

Code Challenges

• https://coderbyte.com/
• https://exercism.io/
• https://www.hackerrank.com/
• https://www.codewars.com/
• https://www.frontendmentor.io/

Typing

Typing practice for code

• https://typing.io/
• http://www.speedcoder.net/

Typing WPM and accuracy trainer

• https://monkeytype.com/

Career Development

Job Resources

• https://www.dice.com/
• Remote Vacancies (US)

Networking

• https://www.meetup.com/

Libraries

I hesitate to add libraries, but some of the following may be helpful references.

Lightweight tooltip engine

• https://popper.js.org/