Dev Bookmark

Dev Bookmark

400+ Free resources to learn to code in 2021, MERN, DESIGN, MEAN, FULLSTACK

400+ Free resources to learn to code in 2021, MERN, DESIGN, MEAN, FULLSTACK

You only need this post to become a Front-end Developer because this post has nearly unlimited amount of every type of resources covering everything you will need.


Blog your Journey

  • Hashnode - Hashnode is the easiest way to start a developer blog on your personal domain 🌏 for free and connect with the readers through our global dev community! 👩‍💻👨‍💻
  • Dev.to - DEV is a community of software developers getting together to help one another out.
  • Hackernoon - An Independent Tech Media Site

Must have Chrome extensions

  • DailyDev - Get the latest new about the Dev community in your chrome default tab.
  • WhatFont - Get to know which font is the website using.
  • ColorPick Eyedropper - Get to know which color is the website using by just dropping the pen.
  • Wappalyzer - Get to know the tech stack of any website
  • Web Developer - Amazing amount of tools this extensions has.
  • React developer tools - React Developer Tools is a Chrome DevTools extension for the open-source React JavaScript library. It allows you to inspect the React component hierarchies in the Chrome Developer Tools.

VS Code Must have extensions

  • NPM - This extension helps you to manage your Package.json and will provide warnings if dependencies are not installed also will help with the version control.
  • Prettier - Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.
  • Rainbow Brackets - Find that missing tag with ease by color-coding every bracket set in your environment.
  • VS Code Great Icons - Organize your environment by applying an appropriate icon set to visually identify files by type.
  • Placeholder Images - Services like unsplash.it and placehold.it are extremely useful. Now you can save time by adding placeholder images right from within VS Code
  • Vetur - The official VueJS extension
  • ESLint - The extension uses the ESLint library installed in the opened workspace folder.
  • Live Server - Launch a development local Server with live reload feature for static & dynamic pages.
  • Visual Studio IntelliCode - This extension will move the most relevant completion suggestions to the top.
  • Debugger For Chrome - This extension allows you to debug your JavaScript code running in the Chrome browser, from inside of VS Code.
  • Debugger for Microsoft Edge - Debug your JavaScript code in the Microsoft Edge browser
  • Debugger for Firefox - Debug your web application or browser extension in Firefox
  • Bracket Pair Colorizer 2 - A customizable extension for colorizing matching brackets

VS Code themes

  • One Dark Pro - Atom's iconic One Dark theme for Visual Studio Code
  • Material Theme - The most epic theme now for Visual Studio Code
  • Horizon Theme - A beautifully warm dual theme for Visual Studio Code

General Resources

image.png

Learning Resources 📘

DOCS and Cheat sheets 😁

  • MDN Web Docs - The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps.
  • DevDocs - Fast, offline, and free documentation browser for developers. Search 100+ docs in one web app.
  • DEVHINTS - A modest collection of cheatsheets.
  • FLEX - Malven - A visual cheatsheet for CSS flex layout.
  • GRID - Malven - A visual cheatsheet for CSS grid layout.

🌐 HOW DOES IT WORKS?

For HTML and CSS

  • freeCodeCamp - Free course to learn Web Development.
  • Flexbox Froggy - A game that helps you to learn CSS Flex.
  • CSS TRICKS - Flexbox - A Complete Guide to Flexbox.
  • Grid Garden - A game for learning CSS Grid.
  • CSS TRICKS - A Complete Guide to Grid - A comprehensive guide to CSS grid, focusing on all the settings both for the grid parent container and the grid child elements.
  • Learn CSS Grid - A comprehensive guide to help you understand and learn CSS Grid Layout, by Jonathan Suh.
  • Can I Use - Up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.
  • HTML Dog - Simple and to the point explanations.
  • Marksheet - Unlimited amount of tutorials
  • The ODIN Project - Amazing way of learning.
  • CSS Effects - CSS Animations.
  • Keyframes - Create basic or complex CSS @keyframe animations with a visual timeline editor.
  • Animista - Play with a collection of ready to use CSS animations.
  • Interneting Is Hard - Friendly web development tutorials for complete beginners.
  • BEM - BEM naming cheat sheet.
  • Autoprefixer - Autoprefixer is a PostCSS plugin which parses your CSS and adds vendor prefixes.
  • CSS Formatter - Online CSS Formatter, CSS Beautifier.
  • Placeholder - How To Use Our Placeholders. Just specify the image size after our URL and you'll get a placeholder image.

📝 ONLINE IDE, EDITOR

📷 IMAGE RESOURCES

  • Unsplash - Free images and photos.
  • Pexels - Free stock photos.
  • Remove Photo Data - Remove personal data from photos before sharing them on the internet.
  • LottieFiles - LottieFiles is a collection of animations designed for - Lottie - gone are the days of bugging your developer.
  • removebg - Remove Image Background.
  • Pixabay - Free image or video.

👓 ACCESSIBILITY

📄 TERMINALS FOR WINDOWS

📺 YOUTUBE CHANNELS

🖋 FONTS AND TYPOGRAPHY

  • Google Fonts - The #1 resource for free and easy-to-use webfonts.
  • FontPair - Font Pair helps designers pair Google Fonts together. Beautiful Google Font combinations and pairs.
  • Fontjoy - Fontjoy helps designers choose the best font combinations. Mix and match different fonts for the perfect pairing.
  • Fonts Arena - Free fonts, free alternatives to premium fonts, done-for-you-research articles.

🎨 ILLUSTRATIONS

  • unDraw - Browse to find the illustrations that fit your needs and click to download.
  • freepik - Free graphic resources.
  • DrawKit - Hand-drawn vector illustration and icon resources, perfect for your next project.

💧 ICONS

  • Font Awesome - Vector icons and social logos.
  • Ionicons - Open-Sourced and MIT licensed icon pack.
  • icons8 - Download free icons in PNG and SVG.
  • flaticon - Free vector icons in SVG, PSD, PNG, EPS format or as ICON FONT.
  • Simple Icons - 1463 Free SVG icons for popular brands.

Front-end Framework Learning Resources

⚡ JAVASCRIPT


⚡ REACT

Why React?

ES2015+

Routing

State Management

Redux

Bundlers

Webpack

Build Stuff

Want to goo deep in React? Visit React-Learning


🎮 APIs

  • Quotes REST API - They Said So has more than 1 million+ quotes in the database, the largest such database in the world. And Quotes API gives easy way to access the data.
  • OpenWeather - Simple and fast and free weather API from OpenWeatherMap you have access to current weather data, hourly, 5- and 16-day forecasts.
  • Public APIs - A collective list of more than 1000 Free Public and Open REST APIs for developers.
  • SWAPI - The Star Wars API.
  • JSONPlaceholder - Free to use fake Online REST API for testing and prototyping.

⚡ NODEJS

  • Node.js Tutorial - Node.js Crash Course Tutorial by Net Ninja.
  • You Don't Know Node.js

  • The Art of Node - Introductory tutorial covering the basics.

  • NodeSchool - Interactive self guided workshops you can also do on your own.
  • Node Patterns - Short books about code and networking patterns related to Node.js.
  • Learn Node - A premium training course to learn to build apps with Node.js, Express, MongoDB.
  • The Node Way - An entire philosophy of Node.js best practices and guiding principles exists for writing maintainable modules, scalable applications, and code that is actually pleasant to read.
  • Express.js Security Tips - How You Can Save and Secure Your App.
  • Awesome Nodejs - Delightful Node.js packages and resources.
  • nodebestpractices - Huge list of best practices for building node apps. Important for big projects.

😐 Learn GIT

  • Git Handbook Git, GitHub, DVCS, oh my! Learn all the lingo and the basics of Git.
  • Cheat Sheets Keep these handy! Reference sheets covering Git commands, features, SVN migrations, and bash. Available in a multiple languages.

  • Learn Git branching Try Git commands right from your web browser. Featuring some of your soon-to-be favorites: branch, add, commit, merge, revert, cherry-pick, rebase!

  • Visualizing Git Look under the hood! Explore how Git commands affect the structure of a repository within your web browser with a free explore mode, and some constructed scenarios.

  • Git-It You’ve downloaded Git, now what? Download Git-It to your machine and you’ll get a hands-on tutorial that teaches you to use Git right from your local environment, using commands on real repositories.


Prepare for Interview (Questions)


I have gathered all the resources that you will require to become a MERN or MEAN stack developer. All these resources will include Articles, Videos, Course, Websites, Tutorials, Books etc. And everything is FREE

  • MERN - MongoDB, Express, React, NodeJS
  • MEAN - MongoDB, Express, Angular, NodeJS

☢ You should know the basics of HTML, CSS AND JS


Learn MongoDB

Courses

Blogs / Tutorials / Docs / eBooks

Videos


Learn Express

▶ Videos

Tutorials / eBooks / Blogs


Learn React

Blogs / eBooks / Tutorials / Docs

Course

React cheatsheets

React Interview Questions

React Styling

  • styled-components - Visual primitives for the component age
  • emotion - Library designed for writing CSS styles with JavaScript
  • radium - Tool for React component styling

React and TypeScript


Learn Angular

Course / Videos

Tutorials / Docs / Blogs / eBooks

Cheatsheets


Learn NODEJS

  • Node.js Tutorial - Node.js Crash Course Tutorial by Net Ninja.

  • You Don't Know Node.js

  • The Art of Node - Introductory tutorial covering the basics.

  • NodeSchool - Interactive self guided workshops you can also do on your own.
  • Node Patterns - Short books about code and networking patterns related to Node.js.
  • Learn Node - A premium training course to learn to build apps with Node.js, Express, MongoDB.
  • The Node Way - An entire philosophy of Node.js best practices and guiding principles exists for writing maintainable modules, scalable applications, and code that is actually pleasant to read.
  • Express.js Security Tips - How You Can Save and Secure Your App.
  • Awesome Nodejs - Delightful Node.js packages and resources.
  • nodebestpractices - Huge list of best practices for building node apps. Important for big projects.

📖MISC RESOURCES😉

(THIS HAS ALL THE RESOURCES OTHER THEN THE ABOVE ONES, Some fundamentals and important)

JavaScript (A bit advanced)


Monetize Your Work

You can join the amazing website Buy Me A Coffee and get support and also start a membership if you're a content writer.

Link -> BUYMEACOFFEE


Thanks For Seeing this post.
If you didn't liked this post let me know in the comments

 
Share this