loading...

Discussion

markdown guide
 

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
 
 
 
 

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

 
 

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

 
 

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

 
 

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

 
 
 

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

 

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

 

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/

 
 

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

 

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

 

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

 

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!

 
 

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!

 

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

tiny-helpers.dev

 
 

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.

 

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'),
)
 
 

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

 
 

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.

 

Any idea how it compares to popper.js?

 

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.

 
 

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

 

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

css.gg/

 

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

 
 
 
 

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-...