front-webdev-resources

A selection of useful front webdev resources

2 years after

Front Web Development Resources

All these resources were useful to me, so ... Let's share them ! Everything is in English, except these with a :fr: .

Guidelines

CSS

JS

Fonts

  • FontSquirrel --> Generate a webfont from your font files.
  • Google Fonts --> A collection of webfonts easy to import.
  • FontAwesome --> A collection of font icons that can be customized by CSS.

Videos

Linters

Browsers compatibility

  • Browserl.ist --> Display compatible browsers from a browserslist string.
  • Browserhacks.com --> CSS & JS selectors to target a specific browers.
  • Flexbugs --> Cross-browser flexbox issues and workarounds for them.
  • CanIUseIt.com --> Display browser support tables for CSS & JS properties.
  • BrowserStack --> Test your website on any device and/or browsers from the cloud.

Package managers

  • NPM --> The most used package manager for JavaScript.
  • Yarn --> A young JS package manager by Facebook, faster and more secure.

Automating tasks

  • Webpack --> Build you webapp like a god.
  • Gulp --> Automate a lot of tasks for you.
  • Font Magicien --> Generate all the @font-face.
  • PostCSS --> Transform your style by JS with a large number of plugins.
  • Autoprefixer --> Parse CSS and add vendor prefixes (e.g. Internet Explorer).
  • CSSNano --> CSS minifier.
  • Uglify --> JS minifier.
  • Babel --> Transpile lastest ES to readable JS for all browsers.

Learning

  • Codecademy --> The best place to learn for me, with interactive courses.
  • OpenClassRooms :fr: --> Some good guides in french.
  • Try Github --> Learn Git basics with interactive challenges.
  • Grafikart :fr: --> Various tutorials, sometimes with videos.

Misc

  • RegexHub --> Some useful regex patterns.
  • Git Cheatsheet :fr:
  • GitIgnore.io --> Create .gitignore. for specific OS, IDE, language.
  • EditorConfig --> Help to maintain consistent coding style between editors (& users).
  • Regex101 --> An amazing tool to test & debug regex.
  • CodePen --> Test and share your code online (preprocessor like Sass & Babel are available).

Enlarge your RSS feed

Related Repositories

spellbook-of-modern-webdev

spellbook-of-modern-webdev

A Big Picture, Thesaurus, and Taxonomy of Modern JavaScript Web Development ...

WebDevStudyResources

WebDevStudyResources

(MarkDown) - An ordered list of the courses and info I've found most helpful ...

webdev-resources

webdev-resources

Some nice links, tools and articles for web development with HTML/CSS/Javascript ...

frontend-dev-bookmarks

frontend-dev-bookmarks

A huge list of frontend development resources I collected over time. Sorted from ...

awesome-docker

awesome-docker

:whale: A curated list of Docker resources and projects ...