info/frontend-development

mirror of https://github.com/mojpm/frontend-development.git synced 2025-01-17 20:48:40 +01:00

Go to file

dangvh 9d4e869c28 add: VueJS documentation

2020-11-05 12:01:15 +07:00

Update README

2020-11-02 15:01:47 +03:00

CONTRIBUTING.MD

Update CONTRIBUTING #4

2020-11-03 09:40:21 +03:00

CONTRIBUTORS.md

add: VueJS documentation

2020-11-05 12:01:15 +07:00

LICENSE

Create LICENSE

2020-11-02 17:36:52 +03:00

README.md

add: VueJS documentation

2020-11-05 12:01:15 +07:00

README.md

Summary

This is a collection of resources for Frontend development.

It will include a table of contents in order for you to navigate to the sections that matter the most to you.

We have made an effort to include as many free resources as possible. However we also understand that there are quality resources out there that might cost you a penny but totally worth it. We will be sure to indicate the resources that are paid.

Resources with 💵 indicate that the resource is a paid resource.

Note that you're not required to use these resources one by one. This is just a reference and not a guide. It is practically impossible to use all the resources listed in here. Use this as a reference. It is not a guide.

We Invite as many contributions as possible. Be sure to read How To Contribute

Table of Contents

Summary
Table of Contents
How the Internet Works
HTML
CSS
JavaScript
Git
React
Vue
Icons
Fonts and Typography
Illustrations
Optimization
Color Inspiration
Images and Videos
Hosting Sites
Design Inspiration
Portfolio Inspiration
Youtube Channels
Podcasts
Blogs
Interview Prep
Newsletters
Contributing
Authors

How the Internet Works

Documentation and Articles
- MDN - How does the Internet work?
- Stanford - How Does the Internet Work?
- Medium - How the Internet Works
- HowStuffWorks - How does the Internet Work?
Videos
- KhanAcademy - What is the Internet
- Youtube - The Internet: Crash Course Computer Science
- Youtube - Computer Networks: Crash Course Computer Science
- Youtube - The World Wide Web: Crash Course Computer Science

👆 Back To Top

HTML

Documentation
- MDN - HTML5 Reference
- Reference - HTML Reference
- CSS-Tricks - HTML Entity Refernce
- W3Schools - Introduction to HTML
- Cheat Sheet - HTML Cheat Sheet
- Cheat Sheet - OverAPI - Links To MDN
Courses
- FreeCodeCamp - Introduction to Basic HTML & HTML5
- W3Schools - HTML Tutorial
- Udacity - Intro to HTML and CSS
- Scrimba - Introduction to HTML
- EDX - HTML5 and CSS Fundemantals
- Youtube - HTML Full Course
- Udemy - HTML and CSS3 Course 💵
- CodeCademy - Learn HTML 💵
- Pluralsight - HTML Fundamentals 💵
- Team Treehouse - Introduction to HTML and CSS 💵
- The Odin Project - HTML & CSS
Books
Websites
- HTML5 Up - Responsive HTML5 and CSS3 site templates.
- Templated - A collection of 845 free CSS & HTML5 site templates.
- HTML5 Doctor - A great reference for HTML Elements
- HTML-5-TUTORIAL - Another Great Website for everything HTML
- HTML Validator - Check if your HTML markup is valid and contains no errors.

👆 Back To Top

CSS

Documentation
- Reference - CSS Reference
- MDN - CSS
- Extensive CSS Reference
- Getting to Know CSS
- Cheat Sheet - OverAPI - Links To MDN
Courses
- FreeCodeCamp - Introduction to Basic CSS
- W3School - CSS Tutorial
- Scrimba - Introduction to CSS
- CodeCademy - Learn CSS 💵
- Team Treehouse - CSS Basics 💵
Style Guides
Books
Websites
- Clippy - A small tool to help you using the new and powerful clip-path property.
- CSS Diner - Learn CSS Selectors through a game
- Flexbox Froggy - Learn CSS Flexbox through a game
- CSS Grid Garden - Learn CSS Grid through a game
- Can I use - Up-to-date browser support tables for front-end technologies on desktop and mobile browsers.
- CSS-tricks - A wonderful blog site for everything CSS
- Responsinator - A quick tool to check the responsiveness of a site across different devices.
- 7 Days, 7 Websites - A challenge site to build 7 websites in 7 days
- CSS Easing functions - An amazing collection of easing functions bo be used in CSS transitions and animations.
- Responsive Grid System - A quick, flexible and easy fluid grid for easy responsive web design.
- CSS reference by Codrops
- CSS for People Who Hate CSS -Excellent guide on how to write better, cleaner and more reusable CSS code.
- Cubic Berzier Function Generator - Free insights about traffic, visitors and conversions.
- CSS Layout - A collection of popular layouts and patterns made with CSS
Practice your CSS Skills
- Codepen
- JSFiddle
- CSS Deck
- Dablet
- Plunker
- Liveweave
- JS Bin
Frameworks and Libraries
- Tachyons
- Bootstrap
- Foundation
- Pure
- Bulma
- Semantic UI
- UI Kit
- Materialize CSS
- Milligram
- Skeleton
- Tailwind CSS
- Spectre
- Base
- Picnic CSS
- Mustard UI
- Dead Simple Grid
- Tent CSS
- Animate.css

👆 Back To Top

JavaScript

Documentation
- MDN - JavaScript Reference
- MDN - Operator Precedence Table
- MDN - JavaScript Event Refernce
- Cheat Sheet - OverAPI - Links To MDN
Courses
- freeCodeCamp - JavaScript Algorithms and Data Structures
- Wes Bos - JavaScript30
- W3Schools - JavaScript Tutorial
- CodeCademy - Learn JavaScript
- EDX - Programming the Web with JavaScript
- GeekforGeeks
- Udemy The Complete JavaScript Course 💵
- The Odin ProjectJavascript Course- includes some backend related content too
Books
Challenge Websites
- Codewars
- Hackerrank
- Coderbyte
- Exercism
- CodinGame
- Project Euler
- CodeForces
- HackerEarth
- TopCoder
- Coderbyte
- Pramp
- JavaScript Gekk
Snippets and cheetsheets
Style Guides
Visual Studio Code Extensions
- Snippets - Snippets for JavaScript ES6 syntax and TypeScript.
- ESLint - Code Linter that can find out any problematic patterns. You can even make your own set of rules to check and reuse logic.
- Intellisense - Can show code completion and information on a certain function, variables, and properties by hover.
- Path Intellisense -Aauto-complete the path of the file you are trying to import
- Prettier - Responsible for code formatting.
- Bracket Pair Colorizer 2 - Matches brackets with same color.
- Babel JavaScript - Syntax highlighting for today's JavaScript
- npm - npm support for Visual Studio Code
- Paste JSON as Code - Copy JSON paste as JavaScript or Typescript
- Quokka.js - Prototyping playground that displays the results of an operation inside your IDE
- Live Server - Automatically reload the web page whenever there are changes in your code.
- Settings Sync - Synchronise your editor settings using Github.
- REST Client - REST Client for Visual Studio Code
- Debugger for Chrome - Debugging tool.
Websites
- HTML DOM - Common tasks of managing HTML DOM with vanilla JavaScript
- this vs that - The differences between _ and _ in the front-end development
Articles

👆 Back To Top

Git

Courses
Tools
- Github

React

Documentation
- React Docs
- React Cheatsheet
Courses
- Pluralsight - React Getting Started
- Egghead - The Beginner's Guide to React
- Scrimba - Learn React
- freeCodeCamp - Introduction to React
- FullStackOpen - Introduction to React
- Wes Bos - React for Beginners
- EpicReact - Epic React 💵
Books
Podcasts
- React Podcast
Youtube Channels
Articles
React Tooling
Server Side Rendering
- Next.js
- Gatsby
Experts on Twitter

👆 Back To Top

Vue

Documentation
- Vue Docs
- Vue Cheatsheet
Courses
- Learn Vue by Building and Deploying a CRUD App - This course is focused on teaching the fundamentals of Vue by building and testing a web application using Test-Driven Development (TDD).
- Advanced Vue.js Features from the Ground Up - Learn how to build more accessible routing, state management, form validation and internationalization libraries from the ground up!
- Become a Ninja with Vue 3 - This course teaches how to build a complete application with Vue 3, step by step, using Vue CLI, TypeScript and the Composition API. Each exercise comes with instructions and tests to check 100% of your code.
Books
- The Majesty Of Vue.js by Alex Kyriakidis & Kostas Maniatis, Packt. (Nov 2016)
- Learning Vue.js 2 by Olga Filipova, Packt. (Dec 2016)
- The Majesty Of Vue.js 2 by Alex Kyriakidis and Kostas Maniatis, Leanpub. (Mar 2017)
- Vue.js 2 Cookbook by Andrea Passaglia, Packt. (May 2017)
- Vue.js in Action by Erik Hanchett and Benjamin Listwon (Spring 2018)
- Testing Vue.js Applications by Edd Yerburgh (Summer 2018)
- Vue.js 2 and Bootstrap 4 Web Development by Olga Filipova, Packt. (September 2017)
- Front-end com Vue.js by Leonardo Vilarinho, Casa do Código. (November 2017)
- Vue.js 2 Web Development Projects by Guillaume Chau, Packt. (November 2017)
- Full-Stack Vue.js 2 and Laravel 5 by Anthony Gore, Packt. (December 2017)
- Vue.js 2.x by Example by Mike Street, Packt. (December 2017)
- Mastering Vue.js by Oleksandr Kocherhin. (January 2018)
- Fullstack Vue: The Complete Guide to Vue.js by Hassan Djirdeh, Nate Murray, & Ari Lerner. (March 2018)
- Vue.js 2 Design Patterns and Best Practices by Paul Halliday, Packt. (March 2018)
- Vuex Quick Start Guide by Andrea Koutifaris, Packt. (April 2018)
- Full-Stack Web Development with Vue.js and Node by Aneeta Sharma, Packt. (May 2018)
- The Vue Handbook by Flavio Copes. (July 2018)
- ASP.NET Core 2 and Vue.js by Stuart Ratcliffe, Packt. (July 2018)
- Vue.js: Construa aplicações incríveis by Caio Incau, Casa do Código. (September 2017)
- Getting to Know Vue.js by Brett Nelson, Apress. (August 2018)
- Vue: Build & Deploy by Daniel Schmitz, Leanpub. (September 2018)
- Building Applications with Spring 5 and Vue.js 2 by James J. Ye, Packt. (October 2018)
- Vue.js Quick Start Guide by Ajdin Imsirovic, Packt. (October 2018)
- Vue.js Component Patterns Course by Frederik Dietz (April 2019)
- Vue.js: Understanding its Tools and Ecosystem by Dave Berning (November 2019)
- Building Forms with Vue.js by Marina Mosti (October 2019)
- Testing Vue.js Components with Jest by Alex Jover Morales, Packt (October 2019)
- Vue.js by Chris Minnick and Nat Dunn, Webucator (February, 2020)
- Become a Ninja with Vue 3 by Cédric Exbrayat (English and French versions) (May, 2020)
- Large Scale Apps with Vue 3 and TypeScript Damiano Fusco, Leanpub (September, 2020)
Podcasts
Youtube Channels
- VueNYC
- VueConf EU
Articles
Vue Tooling
- vue-dev-server - A small development server for building vue components.
- Storybook - The UI Development Environment. works with v3.2+ later.
- Font Awesome Finder - Chrome extension to search, preview and choose Font Awesome icons and copy the selected icon HTML code & Unicode to clipboard.
- vue-dummy - Placeholder Text and Dummy Images as a simple v-dummy directive.
- Bit - Manage and reuse vue components between projects. Easily isolate and share components from any project without changing its source code, organize curated collections and install in different projects.
- ComponentFixture - is a component design to develop and test other components, automatically binding their props.
- vue-cli-template-dev-server - A development server for building vue-cli custom templates.
- vue-codemods - Collection of codemod scripts that help update and refactor Vue and JavaScript files.
- codesandbox - An online IDE and prototyping tool for rapid Vue development.
- vue-dom-hints - 💡 Get hints in the DOM. Minimal Vue devtool alternative.
Server Side Rendering
- Nuxt.js
Experts on Twitter

👆 Back To Top

Icons

👆 Back To Top

Fonts and Typography

👆 Back To Top

Illustrations

👆 Back To Top

Optimization

Sizzy - A tool for developing responsive websites crazy-fast. See your page on multiple devices at once.
Who Is - Quick tool to check the availability of a domain name.
Nibbler - Website testing tool for 10 key areas including accessibility, SEO, social media and technology.
Woorank - Get a review of your website to address issues and identify opportunities to get ahead of competition.
Optimizilla - Compress up to 20 JPEG and PNG images while keeping a good level of quality.
Namecheap - Premium and cost-effective domain names and web hosting.
CSS Validator - Check if your CSS code is valid and contains no errors.
Google Analytics - Free insights about traffic, visitors and conversions.
Usability Checklist - Catch common usability problems of your website before deployment.
PageSpeed Insights - Quick tool to test your webpage for performance on all devices.

👆 Back To Top

Color Inspiration

👆 Back To Top

Images and Videos

👆 Back To Top

Hosting Sites

👆 Back To Top

Design Inspiration

👆 Back To Top

Portfolio Inspiration

👆 Back To Top

Youtube Channels

👆 Back To Top

Podcasts

👆 Back To Top

Blogs

👆 Back To Top

Interview Prep

Newsletters

👆 Back To Top

Contributing

You're very welcome to contribute to this list.

Be sure to read How to Contribute before making your contribution.

Authors

This repository exists because of the wonderful contributions made by these Contributors.

👆 Back To Top