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
Browser compatibility
Vanilla JavaScript DOM Manipulation (w/ IE)
HTML Semantics Cheat Sheet
Material UI Icons
- https://material-ui.com/components/material-icons/
- Searchable, with copyable
import
lines
- Searchable, with copyable
Google Fonts
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.
Utilities
Code Sharing Sites
When sharing snippets of code or error messages with others, it can often be hard to efficiently parse when shared through message boards or instant message clients. The following are great ways to share your code for a more pleasant developer experience:
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
YAML
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
Rich Search Results Checker
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
Color wheel
Tools
Freely remove backgrounds from images
Compress JPEG and PNG files, has an API for automated compression
Generators
Favicons
Documents
- https://www.cookiepolicygenerator.com/cookie-policy-generator/
- https://www.cookiepolicygenerator.com/privacy-policy-generator/
Waves
Blobs
Avatars
People
Fonts
Branding
APIs
- https://jsonplaceholder.typicode.com/ is a free resource to quickly make fetch requests for placeholder data!
Learning
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
Typing WPM and accuracy trainer
Career Development
Job Resources
Networking
Libraries
I hesitate to add libraries, but some of the following may be helpful references.
Lightweight tooltip engine