DEV Community

Cover image for Share some frontend resources!
Nick Taylor (he/him)
Nick Taylor (he/him)

Posted 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!

Discussion (45)

5t3ph profile image
Stephanie Eckles

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

This is a super nifty tool to find the closest named CSS color:

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

A very fun game to learn about available CSS selectors and how to use them:

A cheatsheet for window.location by @samanthaming :

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

  • 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
leanseverino1022 profile image
Lean Severino is awesome

carballo profile image

Thanks for sharing!

vaibhavkhulbe profile image
Vaibhav Khulbe

Awesome list! 🔥

alin11 profile image
Ali Nazari

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

abdisalan_js profile image
Abdisalan • Edited on

For my fellow React Developers:

A11y Style Guide

Some Personal Sites for Inspiration!

nicolasansom profile image
Nicola Sansom

The looks to be a brilliant resource for accessibility thanks for sharing!

gabe_ragland profile image
Gabe Ragland

Thanks for sharing usehooks :)

nickytonline profile image
Nick Taylor (he/him) Author

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

nyamador profile image

Pesonal Website Inspiration:

abdisalan_js profile image

Looks very cool 😎

Thread Thread
nyamador profile image

Thank you :)

hiboabd profile image
Hibo Abdilaahi

I haven't finished using this but I thought 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 👀🔖

nickytonline profile image
Nick Taylor (he/him) Author

Hackerman from Kung Fury putting on a Nintendo Power glove

pp profile image
Paweł Ludwiczak - love this tool for optimizing SVGs!

5t3ph profile image
Stephanie Eckles

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

nickytonline profile image
Nick Taylor (he/him) Author

Definitely! 🔥 For those interested, we run all the SVGs that are on DEV through this.

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

To learn CSS Grid

To learn basic (and advanced) CSS

paulocarvajal profile image

A tiny tool I built on Vue to learn Flexbox myself (and Vue too):

nickytonline profile image
Nick Taylor (he/him) Author

Love Flexbox Froggy!

vaibhavkhulbe profile image
Vaibhav Khulbe

That being 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. 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
  27. CSS Layout
  29. Namecheap x Codecademy
  30. Level Up Tutorials | Web Development & Design Tutorials
  31. AppLibsList | Collection of Libraries, Tools and Components for ReactJS
  32. - 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
  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!

rose profile image

Has anyone mentioned 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!

nickytonline profile image
Nick Taylor (he/him) Author

Taste the rainbow

vonheikemen profile image

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

pinkrada profile image


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.

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)


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`]),
      onClick: () => {
        setClicked(clicked + 1)
    }, ['click']),

  Clicker({ message: 'You got this!' }),
jitmanewtyagi profile image
Jitmanew Tyagi
kewbish profile image
Emilie Ma

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

nickytonline profile image
Nick Taylor (he/him) Author

Geordi Laforge in a sweater saying “No problem”

sergix profile image
Peyton McGinnis
seanolad profile image

Bruh, that's real funny.

nickytonline profile image
Nick Taylor (he/him) Author

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

vaibhavkhulbe profile image
Vaibhav Khulbe

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

seanolad profile image

Tippy.js. For styling and controlling your tooltips. I really like it. It makes tooltips look like a better option to creating my own popup divs.

nickytonline profile image
Nick Taylor (he/him) Author

Any idea how it compares to popper.js?

seanolad profile image

Popper.js and Tippy.js are both made by github, which is cool btw, but the main difference seems to be that tippy.js is for the looks and properties of the tooltip, but popper.js seems to add a more dynamic feel to the tooltips, and also reduces on the style aspect of the tooltip.

carloslfu profile image
Carlos Galarza • Edited on

@nickytonline @seanolad . It is explained here by the Popper.js documentation and here by the Tippy.js documentation. Popper.js is positioning engine (a more raw solution) and it used by Tippy.js for positioning their ready to use tooltips. With Popper you have all the control whether with Tippy you have styles and other features already built.

hemant profile image
Hemant Joshi 😼

I recently updated my github with a mind-map

This is what I feel ultimate for full stack

similarly for Junior and Mid level devs is in the repo.....

If this was helpful to you feel free to star/ fork and follow me on github

Happy DEVing

shadowwarior5 profile image
Konstantin Meiklyar
lauragift21 profile image
Gift Egwuenu • Edited on

I worked on a project that involved curating frontend resources for beginners.

GitHub logo devcenter-square / Learning-Resource-Path-Front-End

⚡️ This repo serves as a resource for developers to leverage on their Journey into Front End Development.

Learning Resource Roadmap - (Front-End Development)

This repo serves as a resource for developers to leverage on their journey into Front End Development.

This is a visual roadmap for beginners venturing into the World of Software Development. In order not to feel overwhelmed by how much you need to know to be a Front End Developer. This roadmap serves as a guide through out your journey. You can follow through this guide and be assured you are on the right path.

Resource types:
🎮 - Interactive
📚 - Book
📹 - Video
📝 - Article
🎤 - Podcast
👩‍💻 - Community
💰 - Paid Resource
🎁- Free Resource
🏆 - Exercises

Beginner Level Front End Development


nickytonline profile image
Nick Taylor (he/him) Author


A kangaroo playing an electric guitar

rhymes profile image

This site contains 700+ customizable CSS, SVG, and Figma UI icons available in SVG Sprite, styled-components, NPM, & API :-)

uzumakinarut0 profile image
Kumar Swapnil • Edited on

These are some of the awesome resources that I get to read in recent months. It' totally worth to have a look at them.

voralagas profile image
Pravin Poudel

icodeeveryday. com