Coder Social home page Coder Social logo

fantastic-front-end-toolbox's Introduction

Fantastic Front-End Toolbox

Fantastic-Coding-Tools

Contribute

Have a tool or resource that you love and think would be helpful to others? Just send a Pull Request with the details! Please follow the simple Contribution Guidelines. Can't wait to see your suggestions!

Roadmap

  • Add Kotlin for web development resources
  • Suggestions?

Table of Contents

Cheat Sheets

  • Devhints - handy syntax & command reference for hundreds of languages and technologies
  • Vue Unit-Testing - handy reference for all things Vue testing, including Jest and Vue-Test-Utils

Code Editors

  • Atom - a lightweight, open-source editor featuring Teletype, a tool for real-time collaboration.
  • Android Studio - Google's official IDE for Android development.
  • CodeRunner - a editor for MacOS that can run code in 25+ languages out of the box and has impressive code autocompletion capabilities.
  • IntelliJ - an enterprise-level editor ideally used for writing code in Kotlin or Java.
  • VS Code - a lightweight editor that boasts comprehensive editing and debugging features, along with an extensive library of extensions/integrations.

CSS

CSS Grid

Flexbox

General Resources

  • CSS Tricks - the name should be self-explanatory :). A huge collection of CSS guides, tips, and how-tos. You'll also find some HTML and JavaScript sprinkled in with everything.

Deployment & Hosting

HTML

Icons

  • Devicons - a collection of development-related icons, such as icons for programming languages
  • Font Awesome - the web's largest collection of icons
  • Material UI Icons - a large assortment of icons based on material design
  • Octicons - a GitHub-themed icon collection

Illustrations

"Wow! That stock photo really drew me into the story of your website/app/business," said no one ever. If you want to capture your audience's attention(and apparently, you have ten seconds to do so), you'll need striking, authentic imagery and illustrations.

  • IRA Design - build your own illustrations with free pre-existing gradient images.
  • Undraw - a constantly updated collection of beautiful, free SVG images that don't require attribution.
  • Hero Patterns - a collection of repeatable SVG background patterns for you to use on your web projects.

General Development Tutorials/Curriculums

  • freeCodeCamp - a free, open-source platform for learning full-stack development. There are several 300-hour courses on subjects such as front-end development, data structures, and passing code interviews. Each course completion comes with a certificate.
  • The Odin Project - a free, open-source curriculum for learning web development. Courses on JavaScript, Ruby on Rails, HTML, and CSS. This curriculum requires you to utilize many external resources, so you'll become proficient at setting up your own coding environment and searching for valuable resources online.

JavaScript

JavaScript Boilerplate

Ever heard of JavaScript fatigue? Well it's real, folks. No one enjoys the mind-numbing process of gathering all the necessary dependencies needed to create a new app. So here are some awesome code templates that'll enable you to start your development in no time at all.

JavaScript Libraries

JavaScript Testing

JavaScript Tutorials

Vanilla JS

React JS

  • Full Stack Open 2019 - a free course run by the University of Helsinki with the main focus of building single page applications with ReactJS that use REST APIs built with Node.js.

  • React JS Crash Course - a 30,000 foot view of React from Brad Traversy; an hour-long YouTube tutorial.

  • Mastering React by Mosh - a 12-hour-long series of videos where you learn React fundamentals by building a video rental app.

  • Official React Tutorial - you will learn React by building an interactive tic-tac-toe game.

Vue JS

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries. (taken from the official Vue.js site)

  • Vue JS 2 - The Complete Guide - a Udemy course considered to be one of the most comprehensive Vue.js tutorials available; each concept is broken down into a bite-sized 2-3 minute video and hands-on learning.

  • Vue JS Crash Course - an hour-long YouTube tutorial by Brad Traversy; you will learn all about Vue.js including what it is, Vue-CLI, components, data, events, directives, etc.

  • Laracasts - Learn Vue 2: Step by Step - the most upvoted Vue tutorial on hackr.io.

  • Build an App with Vue.js - a free tutorial by Scotch.io where you'll learn by creating a lightweight event bulletin board.

Angular 2+

Other

  • Frontend Masters - a subscription-based platform for learning cutting-edge front-end technologies. Tutorials taught by world-class experts.

Mockup Tools

Reference

  • Dev.to - there are plenty of tech articles, and all for free! Just like Medium, it has tutorials, articles, opinions and more about all kinds of tech stuff.
  • Medium - some of the most helpful programming articles/tutorials I've come across have been on the Medium platform! Just search for your specific tool/language and you'll find a treasure trove of programming gold nuggets.
  • Scotch.io - fun and practical web development tutorials

UI & CSS Frameworks

  • Ant Design
  • Bootstrap 4
  • Bulma - Bulma is a free, open source CSS framework based on Flexbox.
  • Grommet
  • Material UI - React components for faster and easier web development.
  • Semantic UI
  • Tailwind CSS - Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.

fantastic-front-end-toolbox's People

Contributors

jamesctucker avatar thewmh avatar forresthopkinsa avatar scmmishra avatar vitorfreitas avatar ika-codes avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.