DEV Community

Cover image for Share some frontend resources!
Nick Taylor
Nick Taylor Subscriber

Posted on • Edited on

Share some frontend resources!

I have a bunch of resources in this post

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!

Top comments (45)

Collapse
 
5t3ph profile image
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
Collapse
 
vaibhavkhulbe profile image
Vaibhav Khulbe

Awesome list! πŸ”₯

Collapse
 
carballo profile image
Carballo

Thanks for sharing!

Collapse
 
esspetess profile image
Yih Sev

htmldom.dev/ is awesome

Collapse
 
alin11 profile image
Ali Nazari

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

Collapse
 
abdisalan_js profile image
Abdisalan • Edited

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/

Collapse
 
nicolasansom profile image
Nicola Sansom

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

Collapse
 
nickytonline profile image
Nick Taylor

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

Collapse
 
gabe_ragland profile image
Gabe Ragland

Thanks for sharing usehooks :)

Collapse
 
nyamador profile image
Desmond

Pesonal Website Inspiration:

Nyamador.me

Collapse
 
abdisalan_js profile image
Abdisalan

Looks very cool 😎

Thread Thread
 
nyamador profile image
Desmond

Thank you :)

Collapse
 
pp profile image
PaweΕ‚ Ludwiczak

jakearchibald.github.io/svgomg/ - love this tool for optimizing SVGs!

Collapse
 
nickytonline profile image
Nick Taylor

Definitely! πŸ”₯ For those interested, we run all the SVGs that are on DEV through this.

Collapse
 
5t3ph profile image
Stephanie Eckles

Oh yes, can't believe I forgot this in my list, I also use it all the time

Collapse
 
alecodesdancer profile image
Alejandra Melendez

My favs fronted resources are websites that teach you with games.
Here are some of them:
To learn CSS Flexbox

flexboxfroggy.com/
flexboxdefense.com/

To learn CSS Grid
cssgridgarden.com/

To learn basic (and advanced) CSS
flukeout.github.io/

Collapse
 
paulocarvajal profile image
Paulo

A tiny tool I built on Vue to learn Flexbox myself (and Vue too):
flexiting.com/playground

Collapse
 
nickytonline profile image
Nick Taylor

Love Flexbox Froggy!

Collapse
 
rose profile image
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!

Collapse
 
nickytonline profile image
Nick Taylor

Taste the rainbow

Collapse
 
vaibhavkhulbe profile image
Vaibhav Khulbe

That being said...here are 50 random/lesser-known resources πŸ”₯:

  1. GitHub logo dypsilon / frontend-dev-bookmarks

    Manually curated collection of resources for frontend web developers.

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

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

Give me GIF

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

Have a good day frontenders!

Collapse
 
richytong profile image
Richard Tong

For React devs: this little snippet gives you a JSX-like interface in pure JavaScript, no transpilation required

const e = type => (
  props = {}, children = [],
) => React.createElement(type, props, ...children)

Usage

const P = e('p')
const Div = e('div')
const Button = e('button')

const Clicker = e(({ message }) => {
  const [clicked, setClicked] = React.useState(0)
  return Div({
    id: 'clicker',
    style: styles.div,
  }, [
    P(null, [`${message}: clicked ${clicked} times`]),
    Button({
      onClick: () => {
        setClicked(clicked + 1)
      },
    }, ['click']),
  ])
})

ReactDOM.render(
  Clicker({ message: 'You got this!' }),
  document.getElementById('root'),
)
Collapse
 
vonheikemen profile image
Heiker

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

tiny-helpers.dev

Collapse
 
pinkrada profile image
pinkrada

Yay!!!

Collapse
 
dmahely profile image
Doaa Mahely

Bookmarking this for the near future 😁 I'm currently working on my UI design skills to be a better frontend dev. One thing I find myself always getting back to is this awesome Flexbox guide on CSS Tricks.

Collapse
 
jitmanewtyagi profile image
Jitmanew Tyagi