loading...
Cover image for Share some frontend resources!

Share some frontend resources!

nickytonline profile image Nick Taylor (he/him) ใƒป1 min read

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

pic
Editor guide
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
leanseverino1022 profile image
Lean Severino

htmldom.dev/ is awesome

Collapse
vaibhavkhulbe profile image
Vaibhav Khulbe

Awesome list! ๐Ÿ”ฅ

Collapse
carballo profile image
Carballo

Thanks for sharing!

Collapse
alin11 profile image
Ali Nazari

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

Collapse
abdisalan_js profile image
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/

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 (he/him) Author

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
hiboabd profile image
Hibo Abdilaahi

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 ๐Ÿ‘€๐Ÿ”–

Collapse
nickytonline profile image
Collapse
pp profile image
Paweล‚ Ludwiczak

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

Collapse
nickytonline profile image
Nick Taylor (he/him) Author

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 (he/him) Author

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
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
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
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
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 ๐Ÿ˜…

Collapse
nickytonline profile image
Collapse
jitmanewtyagi profile image
Collapse
seanolad profile image
Sean

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.

Collapse
nickytonline profile image
Nick Taylor (he/him) Author

Any idea how it compares to popper.js?

Collapse
seanolad profile image
Sean

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.

Collapse
sergix profile image
Collapse
seanolad profile image
Sean

Bruh, that's real funny.

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

Collapse
vaibhavkhulbe profile image
Vaibhav Khulbe

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

Collapse
hemant profile image
Hemant Joshi ๐Ÿ˜ผ

I recently updated my github with a mind-map

This is what I feel ultimate for full stack
Preview
 image

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

Collapse
rhymes profile image
rhymes

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

css.gg/

Collapse
lauragift21 profile image
Gift Egwuenu

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

HTML

Collapse
nickytonline profile image
Collapse
shadowwarior5 profile image
Collapse
uzumakinarut0 profile image
Kumar Swapnil

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

Collapse
voralagas profile image
Pravin Poudel

icodeeveryday. com