remember : don't use more than 2 or 3 fonts (well, if you're a designer, you'll know what to do with more fonts), and never, please, never include Comic Sans MS in those 3 fonts.
- google fonts : free & ready to use on the web
- adobe fonts : not free, but a ton of stuff, if you're willing to dive into design, may be worth it
- font awesome : icons as fonts
- font pair : helps you pairing fonts together
- typo samples : samples of fonts in action together
- font face ninja : must have extension, that allows you to spy on fonts
- better web type : a free web typography course for web designers & web developers - for those who want to dive deeper in typography & webfonts
- design is all about the type : great article about design & typography
golden rule : no more than 3 colors, completed by a gray scale. don't hesitate to get inspiration from other websites, re-inventing the (internet's)wheel in 2019 can de difficult.
- color hunt : nice color palettes brought to you by designers (useful if don't have any clue about colors !)
- coolors : color palette generator - use it with caution, most of the palettes are really nice, but it's still randomly generated !
- colorable : tool to verify the color accessibility of your color scheme (#WebAccessibilityFTW)
- sip : color picker (15 days of free trial)
- color zilla : color picker for web browser (chrome & firefox extensions)
- cool hue : nice gradients
- UI gradients : nice gradients, bis repetita
- picular : google, but for colors
- color box : color generator
- color highlighter for sublime text: allows you to preview the color in the text editor
- front end checklist : helps you don't forget anything when launching a new project
- css tricks
- mdn documentation : most thorough documentaion (works for html, css, javascript), use it without
- specifity calcutor : tool to better understand the specificity rules of css
- code guide : standards for developing flexible, durable, and sustainable HTML and CSS.
- CSS handbook : reeeally complete guide for CSS
- flexbox zombies : kill zombies using flexbox
- flexbox defense : stop the incoming enemies using flexbox & css
- flexbox froggy : guide the frog to the lilypad using flexbox properties
- Lapa Ninja : landing page inspiration
- Awwwards : the awards of design, creativity and innovation on the internet
- dribbble : show and tell for designers
- one page love : cool one pagers
- httpster : inspiration resource showcasing totally rocking websites made by people from all over the world. (<- my fav one)
- UI movement : community of design enthusiasts who share and discuss the most interesting and unique UI designs.
- good UI: approved patterns for a good UI
- call to idea : more & more inspirations
- muz.li : last one for inspiration
- icon store : free icons made by designers
- noun project : icons for everything
- nucleo app : application to collect, customize and export all your icons.
- simple icons : free SVG icons for popular brands
- bootstrap : bootstrap library
- material design : google design librairy
- code to go : snippets for common JavaScript use cases
- Codrops : cool animations
- sidebar : reeeally cool newsletter, 5 design links everyday in your mailbox
- 8 point grid system : the 8-point grid explained
- CSS diner : another little game to help you familiarize with css
- Flex : a tool to visualise flexbox