learn-js

So you want to be a front-end web developer?

HTML

• Displays the content of the website (text, images)
• Start with HTML basics (MDN)
• You can play with HTML right in your browser on JSFiddle

CSS

• Defines what the content looks like (colors, sizes, alignments, spacing, etc)
• Read Getting started with CSS (MDN)
• You can play with CSS right in your browser on JSFiddle

JavaScript

• Makes content interactive
• Learn from The Modern JavaScript Tutorial
  • The bare minimum is JavaScript Fundamentals section
  • I suggest to go through the whole tutorial
• IDE / editor
  • For a quick start you can try online editor CodeSandbox (it is surprisingly good)
  • My personal favorite is WebStorm (not free)
  • Other very popular (and free) choice is Visual Studio Code

Node.js

• JavaScript can be also run server-side
• It can run a server to serve your website, work with files, connect to databases and much more
• You need to download and install it in your machine
• Read the tutorial to get started
• Official docs are a great reference if you need to find something

Yarn

• Package manager to install libraries or software (alternative to npm which comes with Node.js)
• You need to install it on your machine
• Packages are usually downloaded from node package manager registry
• Learn the yarn workflow
• Command line docs provide a great reference
• You will be able to install existing package to make your life easier
  • yarn add lodash to your project to get access to various utility functions to work with arrays, objects, functions, etc.
  • or you can yarn add pg to connect to postgres database

React

• A library for building user interfaces in JavaScript
• Start with official tutorial: Intro to React
• Official docs are great source too

Next.js

• Framework built on top of React to make things easier
• Start with official tutorial to learn how to create a Next.js app
• Official docs to better understand the framework

Git

• Tool for sharing the code with other developers
• Find the must-have basics in Git Handbook
• Hand-on with git in interactive tutorial: Learn Git Branching
• Graphic apps
  • It is necessary to understand how git works (you should learn basics by using the terminal)
  • You can make your everyday life easier by using graphic app
  • My favorite is Sourcetree. (Note: there is a this serious bug related to husky - a solution is here).
• It is not necessary to know all the commands (official docs https://git-scm.com/doc), no one knows them all
• Remote repositories for your projects: GitHub.com
  • for sharing code with others
  • also for cloud backup
  • there other alternatives (eg Bitbucket or GitLab) but Github is the most popular especially for open-source projects

Learn more

If you are have an issue you are most likely not first - search Stack Overflow to find answers to your problems.

If you are using a library, read its docs first! Its usually on project website or in GitHub repo.

Remember, a few hours of trial and error can save you several minutes of looking at the README.

-- @iamdevloper

I would try to avoid w3schools.com, MDN (Mozilla Developer Network) provides much more accurate references, tutorials and examples.

More resources

• microsoft/Web-Dev-For-Beginners - 24 Lessons, 12 Weeks, Get Started as a Web Developer
• practical-tutorials/project-based-learning - Curated list of project-based tutorials
• lydiahallie/javascript-questions - A long list of (advanced) JavaScript questions, and their explanations
• trekhleb/javascript-algorithms - Algorithms and data structures implemented in JavaScript with explanations and links to further readings
• TheAlgorithms/JavaScript - Algorithms and Data Structures implemented in JavaScript for beginners, following best practices.
• airbnb/javascript - A mostly reasonable approach to JavaScript
• mbeaudru/modern-js-cheatsheet - Cheatsheet for the JavaScript knowledge you will frequently encounter in modern projects.
• verekia/js-stack-from-scratch - Step-by-step tutorial to build a modern JavaScript stack.