DEV Community

Cover image for Share some frontend resources!

Share some frontend resources!

Nick Taylor on June 16, 2020

I have a bunch of resources in this post Frontend Developer Resources 2020 Nick Taylor ・ Jan 6 '20 ...
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
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
Nick Taylor

Geordi Laforge in a sweater saying “No problem”

Collapse
 
sergix profile image
Peyton McGinnis
Collapse
 
seanolad profile image
Sean

Bruh, that's real funny.

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

Collapse
 
vaibhavkhulbe profile image
Vaibhav Khulbe

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

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
Nick Taylor

Hackerman from Kung Fury putting on a Nintendo Power glove

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

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
 
carloslfu profile image
Carlos Galarza • Edited

@nickytonline @seanolad . It is explained here popper.js.org/docs/v2/tippy/ by the Popper.js documentation and here atomiks.github.io/tippyjs/v6/motiv... 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.

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
 
lauragift21 profile image
Gift Egwuenu • Edited

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
Nick Taylor

Nice!

A kangaroo playing an electric guitar

Collapse
 
shadowwarior5 profile image
Konstantin Meiklyar
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
 
uzumakinarut0 profile image
Kumar Swapnil • Edited

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