Share some frontend resources!

I have a bunch of resources in this post

Frontend Developer Resources 2020

Nick Taylor ・ Jan 6 '20

#javascript #css #html #a11y

but what's some frontend developer resources you have come across recently? It doesn't matter if you're a beginner or a seasoned pro. Share!

Comments

[Nick Taylor]

I came across a Tweet today with a great free resource from MDN, front-end web developer learning pathway. Thanks for sharing @benmvp!

Ben Ilegbodu 🏀

@benmvp

MDN has a frontend web developer learning pathway:

developer.mozilla.org/en-US/docs/Lea…

Add up all the time it takes for each section and it's 572 hours of learning or ~15 business weeks!

It's nice to have something like this I can route people to. Shout-out to the team for this!

16:44 PM - 16 Jun 2020

5 15

[Vaibhav Khulbe]

MDN did a great job with this. It'll be quite reliable for newbies!

[Stephanie Eckles]

I currently can't live without 11ty (static site generator):
11ty.dev/

This is a super nifty tool to find the closest named CSS color:
enes.in/sorted-colors/

Here's a great list of ways to manipulate the HTML Dom with vanilla JS:
htmldom.dev/

A very fun game to learn about available CSS selectors and how to use them:
flukeout.github.io/

A cheatsheet for window.location by @samanthaming:
dev.to/samanthaming/window-locatio...

My mission this year is to create free resources for the community:

• ModernCSS.dev has in-depth tutorials to help upgrade your CSS skills
• I'm also offering a free web development course for absolute beginners with the first part complete and available here on DEV, and the capstone series currently in production

[Vaibhav Khulbe]

Awesome list! 🔥

[Yih Sev]

htmldom.dev/ is awesome

[Carballo]

Thanks for sharing!

[Ali Nazari]

Many thanks! Helped me. And shared with many others.

[Hibo]

I haven't finished using this but I thought interneting-is-hard.com was a cool beginners resource. Also, I'll be bookmarking this as I don't have much front end experience so I'm basically here to snoop 👀🔖

[Nick Taylor]

[Vaibhav Khulbe]

100 websites to bookmark for your next dev/web project 👩‍💻

Vaibhav Khulbe ・ Mar 26 '20 ・ 5 min read

#javascript #webdev #react #tutorial

That being said...here are 50 random/lesser-known resources 🔥:

1. 

   Essential Frontend Resources in 2019

   Zahin Alwa ・ Sep 22 '19 ・ 3 min read

   #html #css #javascript #react

2. dypsilon / frontend-dev-bookmarks

   Manually curated collection of resources for frontend web developers.

3. Frontend Mentor Resources
4. Free Frontend
5. UNeed - Frontend
6. 

   20 Top Frontend Developers Tools in 2020 | by Shanika Wickramasinghe | Medium

   Shanika Wickramasinghe ・ Jan 26, 2020 ・ 9 min read

   Medium

7. HTML5 UP
8. Appy Dev
9. Easings - Generate Cubic Bezier Easing Curves
10. Cheatography.com: Cheat Sheets For Every Occasion
11. Google Open Source
12. Codementor | Get live 1:1 coding help, hire a developer, & more
13. The ultimate web designer developer course
14. Dark CSS theme generator | Night Eye
15. HTML DOM - Common tasks of managing HTML DOM with vanilla JavaScript
16. Web Skills
17. Awesome React | LibHunt
18. Magic Animations CSS3
19. GraphQL Editor - Ultimate schema designer, ide and online graph maker. Create graph and deploy mock backend
20. Codrops | Useful resources and inspiration for creative minds
21. Eloquent JavaScript
22. React Libraries in 2020 - RWieruch
23. Neumorphism/Soft UI CSS shadow generator
24. Multicolor CSS Gradients, JPG Downloads, 100% Free! | Gradienta
25. .dev
26. Free HTML Website Templates and HTML UI Kits - HTMLTEMPLATES.CO
27. HTML, React, and Vue.js landing page templates for startups - Cruip
28. instant.page
29. CSS Layout
30. brumm.af
31. Namecheap x Codecademy
32. Level Up Tutorials | Web Development & Design Tutorials
33. AppLibsList | Collection of Libraries, Tools and Components for ReactJS
34. roadmap.sh - Frontend
35. Techtalks
36. CSS { In Real Life }
37. The Modern JavaScript Tutorial
38. Front-end Developer Handbook 2019 - Learn the entire JavaScript, CSS and HTML development practice!
39. newline | Learn to program React, Angular, Vue, Ethereum, and Node.js with projects
40. React Resources
41. Reactiflux
42. Get Waves – Create SVG waves for your next design
43. CSSWAND
44. webgems
45. Upmostly - Learn JavaScript and React the Right Way
46. Implementing a Mockup: CSS Layout Step by Step
47. Free Frontend
48. Blobmaker
49. Short, instructional screencast video tutorials for web developers on @eggheadio
50. Vue Mastery | The Ultimate Learning Resource for Vue.js Developers

If you've read here you're so hungry for more resources!

I usually share them on my weekly dev newsletter. You can subscribe to Dev Weekly here.

Have a good day frontenders!

[Emilie Ma]

Thanks to you and everyone in the comments for sharing your resources - I have a bunch of new stuff to check out 😅

[Nick Taylor]

[Konstantin Meiklyar]

watcherapp.online/ 🙂

[Abdisalan]

For my fellow React Developers:
usehooks.com/

A11y Style Guide
a11y-style-guide.com/style-guide/

Some Personal Sites for Inspiration!
abdisalan.com/
wattenberger.com/blog/
flaviocopes.com/
taniarascia.com/

[Nick Taylor]

Yeah @gabe_ragland 's usehooks.com is a great resource. Thanks for sharing!

[Desmond]

Pesonal Website Inspiration:

Nyamador.me

[Abdisalan]

Looks very cool 😎

[Desmond]

Thank you :)

[Gabe Ragland]

Thanks for sharing usehooks :)

[Nicola Sansom]

The a11y-style-guide.com/style-guide/ looks to be a brilliant resource for accessibility thanks for sharing!

[Heiker]

A collection of free single-purpose online tools for web developers...

tiny-helpers.dev

[pinkrada]

Yay!!!

[Rose]

Has anyone mentioned colorzilla.com/gradient-editor/ yet? I used to use this all the time for gradients with multiple color stops. These days a lot of other tools handle it for you as well but It's still occasionally handy for quickly generating gradient CSS!

[Nick Taylor]

[Peyton McGinnis]

The best framework-less and lightest UI library out there.

[Sean]

Bruh, that's real funny.