Repo to document my learning progress on HTML, CSS, JavaScript, Node.js, Salesforce LWC, etc. …

Quick links to my notes files:

• html_notes.md
  • Tag Syntax
  • Doctype & Basic Layout
  • Meta Tags
  • Headings, Paragraphs, Typography
  • Formating
  • Links and images
  • List and tables
  • Forms & input
  • Inline & block level elements
  • Divs & spans, classes & ids
  • Entities
  • Html semantic tags
• css_notes.md
  • Implementing CSS
  • CSS Selectors
  • Fonts
  • Colors
  • Backgrounds & borders
  • Box model, margin & padding
  • Float & alignment
  • Links & buttons
  • Navigation menu styling
  • Inline & Block Styling
  • Positioning
  • display none & visibility hidden
  • Order of precedence
  • :focus
  • Responsive Design
  • Em & Rem units
  • vh & vw units
  • Flexbox
  • Flex alignment & order
  • background-color transparency
  • Target selectors
  • nth-child Pseudo Selectors
  • before & after pseudo selectors
  • box-shadow
  • text-shadow
  • css variables
  • Keyframe animation
  • Time-step animations
  • Transitions
  • Transform
  • CSS Grid
  • Grid rows
  • Spanning columns & rows
  • auto-fit & minmax
  • Grid template areas
  • Grid media queries
  • Sass
  • Environment setup with Node-Sass
  • Variables & partials
  • Nesting & structuring
  • @extend
  • Functions & mixins
  • Functions
• javascript_notes.md
  • Add JavaScript to your HTML file
  • alert()
  • console.log()
  • console.table()
  • console.error()
  • console.warning()
  • console.clear()
  • console.time()
  • Variables
  • Data types in JavaScript
  • typeof
  • Type conversion
  • toString()
  • Converting to number
  • Type coercion
  • Numbers & the math object
  • String methods & concatenation
  • Template Literals
  • Arrays
  • Mutating Arrays
  • Object literals
  • Dates & times
  • If statements & comparison operators
  • Logical operators
  • Switches
  • Functions
  • General loops
  • The window object
  • Scope
  • The DOM (outsourced into => dom_notes.md)
    • What it is
    • document
    • DOM selectors for single elements
    • DOM selectors for multiple elements
    • Traversing the DOM
    • Creating elements
    • Removing & replacing elements
    • Event listeners and the event object
    • Mouse events
    • Keyboard & input events
    • Event bubbling & delegation
    • Local & session storage
  • Object Oriented JavaScript (outsourced into => object-oriented-javascript.md)
    • Constructors & the "this" keyword
    • Built in constructors
    • Prototypes
    • Prototypal inheritance
    • Object.create()
    • ES6 classes
    • Sub classes
  • Asynchronous JavaScript (outsourced into => asynchronous_js.md)
    • What is asynchronous programming?
    • Ajax & XHR intro
    • XHR object methods & working with text
    • Working with Ajax & JSON
    • Data from an external API
    • REST APIs & HTTP Requests
    • Callback Functions
    • ES6 Promises
    • The Fetch API
    • Arrow functions
    • Async & Await
  • Error handling with try … catch
  • Regular Expressions (outsourced into => regex_notes.md)
    • What are regular expressions
    • Evaluation Functions
    • Metacharakter Symbols
    • Character Sets & Quantifiers
    • Shorthand Character Classes
  • Iterators & Generators
  • Symbols
  • Destructuring
  • ES6 Maps
  • ES6 Sets
  • JavaScript Patterns (outsourced into => js-pattern_notes.md)
    • What are patterns?
    • The module pattern
    • Revealing module pattern
    • The singleton pattern
    • Factory pattern
    • The observer pattern
    • The mediator pattern
    • The state pattern
  • Modules
  • Misc
• javascript-practice_notes.md
  • UI Variables
  • Load event listeners
  • Check for valid input
  • Filter for a specific value
  • Load something from local storage
  • Remove something from / clear local storage
• js_extra_notes.md
• VS-Code_notes.md
• nodeJS_notes.md

Project source: Modern JavaScript From The Beginning
Project folder: taskList
Description: Website to manage tasks. You can add, remove and clear all tasks. The site has a filte option, to show only tasks that match a certain string. Tasks are stored in and loaded from local storage.

Project source: Modern JavaScript From The Beginning
Project folder: loancalculator
Description: Little math app to calculate the monthly and total payment plus the total interest of a loan when provided with the loan amount the interest rate and the years to repay. A little extra feature is a spinner shown to the user after submitting the details, which simulates fake calculation time (UX feature).

Project source: Modern JavaScript From The Beginning
Project folder: numberguesser
Description: The Number Guesser is a small game that lets you enter a number between 1 and 10. You have three attempts to guess the correct number (random number which is set when loading the page). The game notifies the player when won, lots, or when the guess was not correct, but further attempts are remaining.

Project source: Modern JavaScript From The Beginning
Project folder: booklist
Description: Basic application that allows the user to enter books with the three values title, author, and ISBN. The entered books are stored in local storage and loaded from there when entering the page. There are two versions of the app in the folder – an ES5 version, using constructors and prototypes and an ES6 version, using classes.

Project source: Modern JavaScript From The Beginning
Description: Example project, showing how to fetch data from three different sources: A textfile a JSON file and an external API. There are two versions of this project, one with regular functions and one using arrow functions.
Project folder: fetch_data_from_three_sources
Project folder: fetch_data_from_three_sources_ARROW

Project source: Modern JavaScript From The Beginning
Project folder: chuck_norris
Description: The generator fetches a specified amount of Chuck Norris jokes from an external database, using Ajax.

Project source: Modern JavaScript From The Beginning
Description: Custom HTTP library to make all kind of requests. There are three versions of this project to cover all the different concepts around this:

Project folder: easyhttp

Project folder: easyhttp_es6

Project folder: easyhttp_es6_async-await

Project source: Modern JavaScript From The Beginning
Project folder: github_finder
Description: Very cool little project, using bootswatch.com for the UI styling and the fetch API (async/await) to get user information from GitHub. The app has a nice search functionality which fires API requests to GitHub on each keyup event – so the results are changing with every letter you type in.

Project source: Modern JavaScript From The Beginning
Project folder: weatherjs
Description: Small weather application, using bootswatch.com for styling and the openweathermap.org API to receive weather data. I have exchanged the original API with the open weather map as the one from the tutorial wasn't public any longer. You can change the location of the weather shown, the last location will be stored in local storage.

Project source: Modern JavaScript From The Beginning
Project folder: userform
Description: Basic input validation with regular expressions.

Project source: Modern JavaScript From The Beginning
Project folder: profilescroller
Description: Tinder-style app using an ES6 iterator with and Bootstrap for the styling. The users come from randomuser.me.

Project source: Modern JavaScript From The Beginning
Project folder: tracalorie
Description: One of the larger projects from the course, using the JavaScrip Module Pattern. The app adds up meals and their calories, calculates the total calories and stores the added meals in local storage. You can edit or delete meals and also clear them all.

Project source: Modern JavaScript From The Beginning
Project folder: microposts
Description: Nice little CRUD application, using ES2015 modules, JSON server and a Babel/Webpack compiler setup. You can post, edit and delete posts. The project covers the concept of state.

Project source: Traversy Media YouTube Channel
Project folder: search_app
Description: Nice little search App, using the Wikipedia API. The app has some focus on accessebility features and is using JavaScript modules and the ES6 module syntax (export/import). Sass is used for the styling, the app is responsive to screen size. Neat app without much functionality, but complete in its scope.

Project source: freeCodeCamp.org on YouTube
Project folder: rock-paper-scissors
Description: Good looking basic version of this classic game. It generates computer choices with the help of Math.random, has some logic who won the game and two counters to display the current score. I've replaced the graphics from the tutorial with open source emojis from openmoji.org. The code-base in my folder is under construction .. played with it, added some extra logic, without really completing it.

Project source: Traversy Media YouTube Channel
Project folder: drag-n-drop
Description: Small project with focus on the HTML Drag and Drop API. The outcome is a game, where you have to bring the top ten richest people in order via drag 'n' drop. You can check if your order is right or wrong by clicking a button. There is a lot of DOM manipulation involved, a lot of class changing to assign different colors, pre-configured in the CSS.

Project source: JavaScript Math Games Projec on Packt
Project folder: math_game
Description: The outcome of this project is a little math game, which generates a specified amount of questions, containing selected math operator and number ranges. The logic behind the project is very cool, I'll partial re-use it in an own project, the tutorial though was rather jumpy and not that easy to follow. Readability and structure of the code could be better, but I'll leave it as it is in the folder and change that in my own project.

Project folder: neofetch_style_website
Description: My own website – it's basically a static website in the optical style of the neofetch command line application. The website offers a color-scheme choice (saved in local storage), is somewhat responsive and has some JS pop-up windows from the WinBox.js library integrated, which I did not touch except for the styling. The inspiration for that project came from the Terminal Style Landing Page video on the Traversy Media YouTube channel.

Project folder: sortable_game-list
Description: Little fun application I did after completing the drag 'n' drop tutorial to practice some stuff. The game fetches Lucas Arts adventures from a JSON file and asks the user to order those titles after their publishing date. The user can check the order and see which titles are ordered correctly and which not. The publishing years are shown, when the order is finally correct – also drag 'n' drop gets disabled and a ticker appears, which shows additional platform information for each game.

• Letter Symbols
  • good and thematic grouped collection of symbols with their appropriate HTML codes
• Node.js API reference
  • documentation for all integrated node modules