My JavaScript Learning Journey

Overview

Welcome to my personal repository dedicated to learning and mastering JavaScript! This is a space where I document my progress, store exercises, projects, and notes as I delve deeper into the world of JavaScript. It's a living record of my learning journey, and I hope it can also serve as a resource for others on a similar path.

Objective

The primary goal of this repository is to track my progress in learning JavaScript, from the very basics to more advanced concepts. By committing to regular updates and maintaining this repository, I aim to build a solid foundation in JavaScript programming and develop a portfolio of projects and exercises that demonstrate my skills.

Project structure

/JavaScript-learning-project
  ├── .github
  │   └── workflows
  │       └── nodejs_exercises.yml
  ├── .vscode
  │       └── launch.json
  ├── 01_basics
  │   ├── html
  │   │   └── files:html
  │   └── files:js
  ├── 02_advanced_topics
  │   └── files:js
  ├── exercises
  │   └── files:js
  ├── projects
  │   └── project_01_browser
  ├── .eslintrc.json
  ├── .gitignore
  ├── .prettierignore
  ├── .prettierrc.json
  ├── package-lock.json
  ├── package.json
  └── README.md

Tools and Plugins

• Software VS Code IDE installed
• VS Code plugins installed:
  • vscode-icons - enhances the visual experience by adding icons to files and folders, making navigation easier.
  • JavaScript (ES6) code snippets - provides code snippets for JavaScript ES6 syntax, speeding up coding and learning new syntax patterns.
  • ESLint - a powerful tool to identify and fix problems in JavaScript code, ensuring code quality and consistency.
  • Prettier - Code formatter - automatically formats code to maintain a consistent style, making it more readable and standardized.
  • GitLens - Git supercharged - enhances the Git capabilities of VS Code, making it easier to visualize code and navigate through repositories.
  • Code Spell Checker - helps in catching common spelling errors, which is crucial for writing clean and professional code.
  • GitHub Actions - used for automating workflows, which can include testing, building, and deploying JavaScript applications.
  • Live Server - allows for a real-time preview of web pages, making it easier to see the effects of code changes instantly.

Setup Instructions

1. Creating a repository on GitHub

• create new project whit JavaScript-learning-project name
  • git init
  • git branch -m master main
  • git add .
  • git commit -m "feat: create a project"
• create new repository on GitHub JavaScript-learning-project
• push an existing repository from the command line:
  • git remote add origin https://github.com/adamcegielka/JavaScript-learning-project.git
  • git branch -M main
  • git push -u origin main

2. Installation ESLint

• project initialization npm init
• install npm install eslint --save-dev
• configuration npm init @eslint/config
• install plugin npm install @typescript-eslint/eslint-plugin@latest --save-dev
• add prettier in .eslintrc.json :

"extends": [
  "airbnb",
  "eslint:recommended",
  "plugin:@typescript-eslint/recommended",
  "prettier"
],
"rules": {
  "no-console": "off",
  "no-alert": "off"
}

3. Installation Prettier

• install Prettier npm install --save-dev --save-exact prettier
• add file to project .prettierignore :

node_modules/
package.json
package-lock.json
README.md

• add Prettier rule .prettierrc.json :

{
    "bracketSpacing": true,
    "semi": true,
    "singleQuote": true,
    "tabWidth": 2,
    "endOfLine": "lf"
}

• linking Prettier with ESLint npm install --save-dev eslint-config-prettier
• add scripts in package.json :

  "scripts": {
    "prettier": "npx prettier --write .",
    "lint:check": "eslint . --max-warnings=0",
    "lint:fix": "eslint . --fix"
  },

• install react npm install react

Tutorials

• w3schools
• The Modern JavaScript Tutorial
• Learn JavaScript Full Course for Beginners - YouTube
• What is JavaScript - YouTube
• JavaScript Full Course for free - YouTube
• Modern JavaScript Tutorial - YouTube
• JavaScript Unit Testing, The Practical Guide - Udemy
• Repository for the Linkedin Learning course: JavaScript Essential Training - GitHub
• Document Object Model (DOM)

• JavaScript Unit Testing, The Practical Guide - Udemy

• 🇵🇱 Kurs JavaScript dla superbohaterów
• 🇵🇱 Kurs JavaScript - YouTube
• 🇵🇱 Kurs JavaScript Pasja informatyki - YouTube
• 🇵🇱 Kurs JavaScript od podstaw krok po kroku 7h - YouTube
• 🇵🇱 Programowanie w JavaScript od Zera do Mastera - Udemy
• 🇵🇱 Praktyczny kurs JavaScript od podstaw - Udemy
• 🇵🇱 10 projektów w czystym JavaScript - Udemy

• 🇵🇱 JavaScript, przykładowe zadania na rozmowie technicznej - YouTube;

• 🇵🇱 ESLint, Prettier i VS Code - YouTube
• 🇵🇱 ESlint, Prettier, Husky - YouTube

Useful sites

• Codepen.io
• Scrimba.com
• codewars

Author

Author: Adam Cegiełka
Happy JavaScript Learning!