## Main root {#Main-root}

```
<html> … </html>
The HTML <html> element represents the root (top-level element) of an HTML document, so it 
is also referred to as the root element. All other elements must be descendants of this element. 
Example: 
<!DOCTYPE html>
<html lang="en">
 <head>...</head>
 <body>...</body>
</html> 
```

## Document metadata {#Document-metadata}

```
<head> … </head>
The HTML <head> element contains machine-readable information (metadata) about the 
document, like its title, scripts, and style sheets. 
<link>
The HTML External Resource Link element (<link>) specifies relationships between the current 
document and an external resource. This element is most commonly used to link to stylesheets, 
but is also used to establish site icons (both "favicon" style icons and icons for the home screen 
and apps on mobile devices) among other things. 
<meta>
The HTML <meta> element represents metadata that cannot be represented by other HTML 
meta-related elements, like <base>, <link>, <script>, <style> or <title> 
<style> … </style>
The HTML <style> element contains style information for a document, or part of a document. 
<title> … </title>
The HTML Title element (<title>) defines the document's title that is shown in a browser's title 
bar or a page's tab. 

Example: 

<!DOCTYPE html>
<html lang="en">
 <head>...</head>
 <body>...</body>
</html> 
```

## Sectioning root  {#Sectioning-root}

```
<body> … </body>
The HTML <body> Element represents the content of an HTML document. There can be only 
one <body> element in a document. 
Example: 
<html>
 <head>
 <title>Document title</title>
 </head>
 <body>
 <p>This is a paragraph</p>
 </body>
</html>
```

## Content sectioning  {#Content-sectioning}

```
<address> … </address>
The HTML <address> element indicates that the enclosed HTML provides contact information 
for a person or people, or for an organization. 
<article> … </article>
The HTML <article> element represents a self-contained composition in a document, page, 
application, or site, which is intended to be independently distributable or reusable (e.g., in 
syndication). 
<aside> … </aside>
The HTML <aside> element represents a portion of a document whose content is only indirectly 
related to the document's main content. 
<footer> … </footer>
The HTML <footer> element represents a footer for its nearest sectioning content or sectioning 
root element. A footer typically contains information about the author of the section, copyright 
data or links to related documents. 

<header> … </header>
The HTML <header> element represents introductory content, typically a group of introductory 
or navigational aids. It may contain some heading elements but also a logo, a search form, an 
author name, and other elements. 
<h1> to <h6> … </h6>
The HTML <h1>–<h6> elements represent six levels of section headings. <h1> is the highest 
section level and <h6> is the lowest. 
<main> … </main>
The HTML <main> element represents the dominant content of the <body> of a document. The 
main content area consists of content that is directly related to or expands upon the central 
topic of a document, or the central functionality of an application. 
<nav> … </nav>
The HTML <nav> element represents a section of a page whose purpose is to provide 
navigation links, either within the current document or to other documents. Common examples 
of navigation sections are menus, tables of contents, and indexes. 
<section> … </section>
The HTML <section> element represents a standalone section — which doesn't have a more 
specific semantic element to represent it — contained within an HTML document. 
Example: 
<address>
 <a href="mailto:jim@rock.com">jim@rock.com</a><br>
 <a href="tel:+13115552368">(311) 555-2368</a>
</address>
```

## Text content {#Text-content}

```
<blockquote> … </blockquote>
The HTML <blockquote> Element (or HTML Block Quotation Element) indicates that the 
enclosed text is an extended quotation. Usually, this is rendered visually by indentation (see 
Notes for how to change it). A URL for the source of the quotation may be given using the cite 
attribute, while a text representation of the source can be given using the <cite> element. 
<dd> … </dd>
The HTML <dd> element provides the description, definition, or value for the preceding term 
(<dt>) in a description list (<dl>).
<div> … </div>
The HTML Content Division element (<div>) is the generic container for flow content. It has no 
effect on the content or layout until styled using CSS. 
<dl> … </dl>
The HTML <dl> element represents a description list. The element encloses a list of groups of 
terms (specified using the <dt> element) and descriptions (provided by <dd> elements). 
Common uses for this element are to implement a glossary or to display metadata (a list of 
key-value pairs). 
<dt> … </dt>
The HTML <dt> element specifies a term in a description or definition list, and as such must be 
used inside a <dl> element. 
<figcaption> … </figcaption>
The HTML <figcaption> or Figure Caption element represents a caption or legend describing 
the rest of the contents of its parent <figure> element.
<figure> … </figure>
The HTML <figure> (Figure With Optional Caption) element represents self-contained content, 
potentially with an optional caption, which is specified using the (<figcaption>) element. 
<hr>
The HTML <hr> element represents a thematic break between paragraph-level elements: for 
example, a change of scene in a story, or a shift of topic within a section. 
<li> … </li>
The HTML <li> element is used to represent an item in a list. 
<ol> … </ol>
The HTML <ol> element represents an ordered list of items, typically rendered as a numbered 
list. 
<p> … </p>
The HTML <p> element represents a paragraph. 
<pre> … </pre>
The HTML <pre> element represents preformatted text which is to be presented exactly as 
written in the HTML file. 
<ul> … </ul>
The HTML <ul> element represents an unordered list of items, typically rendered as a bulleted 
list. 
Examples: 
<dl>
 <dt>Denim (semigloss finish)</dt>
 <dd>Ceiling</dd>

 <dt>Denim (eggshell finish)</dt>
 <dt>Evening Sky (eggshell finish)</dt>
 <dd>Layered on the walls</dd>
</dl>
<figure>
 <img src="/media/examples/elephant-660-480.jpg"
 alt="Elephant at sunset">
 <figcaption>An elephant at sunset</figcaption>
</figure>
<ol>
 <li>Mix flour, baking powder, sugar, and salt.</li>
 <li>In another bowl, mix eggs, milk, and oil.</li>
 <li>Stir both mixtures together.</li>
 <li>Fill muffin tray 3/4 full.</li>
 <li>Bake for 20 minutes.</li>
</ol> 
```

## Inline text semantics  {#Inline-text-semantics}

```
<a> … </a>
The HTML <a> element (or anchor element), with its href attribute, creates a hyperlink to web 
pages, files, email addresses, locations in the same page, or anything else a URL can address. 
<abbr> … </abbr>
The HTML Abbreviation element (<abbr>) represents an abbreviation or acronym; the optional 
title attribute can provide an expansion or description for the abbreviation. 
<br>
The HTML <br> element produces a line break in text (carriage-return). It is useful for writing a 
poem or an address, where the division of lines is significant. 
<cite> … </cite>
The HTML Citation element (<cite>) is used to describe a reference to a cited creative work, and 
must include the title of that work. 

<code> … </code>
The HTML <code> element displays its contents styled in a fashion intended to indicate that the 
text is a short fragment of computer code. 
<em> … </em>
The HTML <em> element marks text that has stress emphasis. The <em> element can be 
nested, with each level of nesting indicating a greater degree of emphasis. 
<mark> … </mark>
The HTML Mark Text element (<mark>) represents text which is marked or highlighted for 
reference or notation purposes, due to the marked passage's relevance or importance in the 
enclosing context. 
<small> … </small>
The HTML <small> element represents side-comments and small print, like copyright and legal 
text, independent of its styled presentation. By default, it renders text within it one font-size 
small, such as from small to x-small. 
<span> … </span>
The HTML <span> element is a generic inline container for phrasing content, which does not 
inherently represent anything. It can be used to group elements for styling purposes (using the 
class or id attributes), or because they share attribute values, such as lang. 
<strong> … </strong>
The HTML Strong Importance Element (<strong>) indicates that its contents have strong 
importance, seriousness, or urgency. Browsers typically render the contents in bold type. 
<time> … </time>
The HTML <time> element represents a specific period in time. 
Examples: 
<blockquote>
 <p>It was a bright cold day in April, and the clocks were striking
thirteen.</p>
 <footer>
 First sentence in <cite><a
href="http://www.george-orwell.org/1984/0.html"><em>Nineteen
Eighty-Four</em></a></cite> by George Orwell (Part 1, Chapter 1).
 </footer>
</blockquote>
<p>You can use <abbr title="Cascading Style Sheets">CSS</abbr> to style your
<abbr title="HyperText Markup Language">HTML</abbr>.</p>
```

## Image and multimedia  {#Image-and-multimedia}

```
<audio> … </audio>
The HTML <audio> element is used to embed sound content in documents. It may contain one 
or more audio sources, represented using the src attribute or the <source> element: the 
browser will choose the most suitable one. It can also be the destination for streamed media, 
using a MediaStream. 
<img>
The HTML <img> element embeds an image into the document. 
<track>
The HTML <track> element is used as a child of the media elements <audio> and <video>. It 
lets you specify timed text tracks (or time-based data), for example to automatically handle 
subtitles. The tracks are formatted in WebVTT format (.vtt files) — Web Video Text Tracks or 
Timed Text Markup Language (TTML). 
<video> … </video>
The HTML Video element (<video>) embeds a media player which supports video playback into 
the document. You can use <video> for audio content as well, but the <audio> element may 
provide a more appropriate user experience. 
Examples: 
<img class="fit-picture"
 src="/media/examples/grapefruit-slice-332-332.jpg"
 alt="Grapefruit slice atop a pile of other slices">
<figure>
 <figcaption>Listen to the T-Rex:</figcaption>
 <audio
 controls
 src="/media/examples/t-rex-roar.mp3">
 Your browser does not support the
 <code>audio</code> element.
 </audio>
</figure>
<video controls width="250"
 src="/media/examples/friday.mp4">
 <track default kind="captions"
 srclang="en" 
 src="/media/examples/friday.vtt"/>
 Sorry, your browser doesn't support embedded videos. 
```
## Scripting  {#Scripting}

```
<script> … </script> 
The HTML <script> element is used to embed or reference executable code; this is typically 
used to embed or refer to JavaScript code. 
Example: 

<script type="text/javascript" src="javascript.js"></script>

<script src="javascript.js"></script> 
```

## Demarcating edits   {#Demarcating-edits}

```
<del> … </del>
The HTML <del> element represents a range of text that has been deleted from a document. 
<ins> … </ins>
The HTML <ins> element represents a range of text that has been added to a document. 
Example: 
<p>“You're late!”</p>
<del>
 <p>“I apologize for the delay.”</p>
</del>
<ins cite="../howtobeawizard.html" datetime="2018-05">
 <p>“A wizard is never late …”</p>
</ins> 
```
## Table content  {#Table-content}

```
<caption> … </caption>
The HTML Table Caption element (<caption>) specifies the caption (or title) of a table, and if 
used is always the first child of a <table>. 
<table> … </table>
The HTML <table> element represents tabular data — that is, information presented in a 
two-dimensional table comprised of rows and columns of cells containing data. 
<tbody> … </tbody>
The HTML Table Body element (<tbody>) encapsulates a set of table rows (<tr> elements), 
indicating that they comprise the body of the table (<table>). 
<td> … </td>
The HTML <td> element defines a cell of a table that contains data. It participates in the table 
model. 
<tfoot> … </tfoot>
The HTML <tfoot> element defines a set of rows summarizing the columns of the table. 
<th> … </th>
The HTML <th> element defines a cell as header of a group of table cells. The exact nature of 
this group is defined by the scope and headers attributes. 
<thead> … </thead>
The HTML <thead> element defines a set of rows defining the head of the columns of the table. 
<tr> … </tr>
The HTML <tr> element defines a row of cells in a table. The row's cells can then be established 
using a mix of <td> (data cell) and <th> (header cell) elements. 
Example: 
<table>
 <thead>
 <tr>
 <th colspan="2">The table header</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td>The table body</td>
 <td>with two columns</td>
 </tr>
 </tbody>
</table> 
```
## Forms   {#Forms}

```
<button> … </button>
The HTML <button> element represents a clickable button, which can be used in forms or 
anywhere in a document that needs simple, standard button functionality. 
<datalist> … </datalist>
The HTML <datalist> element contains a set of <option> elements that represent the values 
available for other controls. 
<fieldset> … </fieldset>
The HTML <fieldset> element is used to group several controls as well as labels (<label>) 
within a web form. 
<form> … </form>
The HTML <form> element represents a document section that contains interactive controls for 
submitting information to a web server. 
<input>
The HTML <input> element is used to create interactive controls for web-based forms in order 
to accept data from the user; a wide variety of types of input data and control widgets are 
available, depending on the device and user agent. 
<label> … </label>
The HTML <label> element represents a caption for an item in a user interface. 
<legend> … </legend>
The HTML <legend> element represents a caption for the content of its parent <fieldset>. 
<optgroup> … </optgroup>
The HTML <optgroup> element creates a grouping of options within a <select> element. 
<option> … </option>
The HTML <option> element is used to define an item contained in a <select>, an <optgroup>, 
or a <datalist> element. As such, <option> can represent menu items in popups and other lists 
of items in an HTML document. 
<progress> … </progress>
The HTML <progress> element displays an indicator showing the completion progress of a 
task, typically displayed as a progress bar. 
<select> … </select>
The HTML <select> element represents a control that provides a menu of options 
<textarea> … </textarea>
The HTML <textarea> element represents a multi-line plain-text editing control, useful when 
you want to allow users to enter a sizeable amount of free-form text, for example a comment 
on a review or feedback form. 
Example: 
<form action="" method="get" class="form-example">
 <div class="form-example">
 <label for="name">Enter your name: </label>
 <input type="text" name="name" id="name" required>
 </div>
 <div class="form-example">
 <label for="email">Enter your email: </label>
 <input type="email" name="email" id="email" required>
 </div>
 <div class="form-example">
 <input type="submit" value="Subscribe!">
 </div>
</form> 
```

## Interactive elements    {#Interactive-elements}

```
<details> … </details>
The HTML Details Element (<details>) creates a disclosure widget in which information is 
visible only when the widget is toggled into an "open" state. 
<summary> … </summary>
The HTML Disclosure Summary element (<summary>) element specifies a summary, caption, or 
legend for a <details> element's disclosure box. 
Example: 
<details>
 <summary>Details</summary>
 Something small enough to escape casual notice.
</details>
```

I’ve listed out all the mainstream HTML tags as well as the new HTML5 tags.

Understanding HTML5


## Javascript Basics {#Javascript-Basics}

```
Including JavaScript in an HTML Page
<script type="text/javascript">
//JS code goes here
</script>
Call an External JavaScript File
<script src="myscript.js"></script><code></code>
Including Comments
//
Single line comments
/* comment here */
Multi-line comments
 
```

## Variables {#Variables }

```
var, const, let
var
The most common variable. Can be reassigned but only accessed within a function. Variables
defined with var move to the top when code is executed.
const
Cannot be reassigned and not accessible before they appear within the code.
let
Similar to const, however, let variable can be reassigned but not re-declared.
Data Types
var age = 23
Numbers
var x
Variables
var a = "init"
Text (strings)
var b = 1 + 2 + 3
Operations
var c = true
True or false statements
const PI = 3.14
Constant numbers
var name = {firstName:"John", lastName:”Doe"}
Objects
Objects
var person = {
firstName:"John",
lastName:"Doe",
age:20,
nationality:"German"
};


```

## Arrays {#Arrays}

```
var fruit = ["Banana", "Apple", "Pear"];
Array Methods
concat()
Join several arrays into one
indexOf()
Returns the first position at which a given element appears in an array
join()
Combine elements of an array into a single string and return the string
lastIndexOf()
Gives the last position at which a given element appears in an array
pop()
Removes the last element of an array
push()
Add a new element at the end
reverse()
Reverse the order of the elements in an array
shift()
Remove the first element of an array
slice()
Pulls a copy of a portion of an array into a new array of 4 24
sort()
Sorts elements alphabetically
splice()
Adds elements in a specified way and position
toString()
Converts elements to strings
unshift()
Adds a new element to the beginning
valueOf()
Returns the primitive value of the specified object


```

## Operators  {#Operators}

```
Basic Operators
+ Addition
- Subtraction
* Multiplication
/ Division
(..) Grouping operator
% Modulus (remainder)
++ Increment numbers
-- Decrement numbers
 



```

## Image and multimedia  {#Image-and-multimedia}

```
Comparison Operators
== Equal to
=== Equal value and equal type
!= Not equal
!== Not equal value or not equal type
> Greater than
< Less than
>= Greater than or equal to
<= Less than or equal to
? Ternary operator
Logical Operators
&& Logical and
|| Logical or
! Logical not
Bitwise Operators
& AND statement
| OR statement
~ NOT
^ XOR
<< Left shift
>> Right shift
>>> Zero fill right shift

```
## Functions  {#Functions}

```
function name(parameter1, parameter2, parameter3) {
// what the function does
}
Outputting Data
alert()
Output data in an alert box in the browser window
confirm()
Opens up a yes/no dialog and returns true/false depending on user click
console.log()
Writes information to the browser console, good for debugging purposes
document.write()
Write directly to the HTML document
prompt()
Creates an dialogue for user input

Global Functions
decodeURI()
Decodes a Uniform Resource Identifier (URI) created by encodeURI or similar
decodeURIComponent()
Decodes a URI component
encodeURI()
Encodes a URI into UTF-8
encodeURIComponent()
Same but for URI components
eval()
Evaluates JavaScript code represented as a string
isFinite()
Determines whether a passed value is a finite number
isNaN()
Determines whether a value is NaN or not
Number()
Returns a number converted from its argument
parseFloat()
Parses an argument and returns a floating point number
parseInt()
Parses its argument and returns an integer


```

## Loops   {#Loops}

```
for (before loop; condition for loop; execute after loop) {
// what to do during the loop
}
for
The most common way to create a loop in Javascript
while
Sets up conditions under which a loop executes
do while
Similar to the while loop, however, it executes at least once and performs a check at the end to
see if the condition is met to execute again
break
Used to stop and exit the cycle at certain conditions
continue
Skip parts of the cycle if certain conditions are met 
```
## If Else Statements {#If-Else-Statements}

```
if (condition) {
// what to do if condition is met
} else {
// what to do if condition is not met
}
 

```


I’ve listed out all the mainstream Javascript tags as well as the new Javascript tags.

Understanding Javascript



## Essential MySQL Commands  {#Essential-MySQL-Commands}

```
SELECT — choose specific data from your database
UPDATE — update data in your database
DELETE — deletes data from your database
INSERT INTO — inserts new data into a database
CREATE DATABASE — generate a new database
ALTER DATABASE — modify an existing database
CREATE TABLE — create a new table in a database
ALTER TABLE — change the selected table
DROP TABLE — delete a table
CREATE INDEX — create an index (search key for all the info stored)
DROP INDEX — delete an index
```

## Working with Tables  {#Working-with-Tables}
Tables are the key element of MySQL databases as they let you store all the information together
in organized rows. Each row consists of columns that feature a specified data type. You have plenty
of options for customization using the commands below.

### Create a New Simple Table {#Create-a-New-Simple-Table}

```
Use this command to create a new table:

CREATE TABLE [IF NOT EXISTS] table_name(
 column_list
);
DROP TABLE tablename;
CREATE TABLE movies(
 title VARCHAR(100),
 year VARCHAR(100),
 director VARCHAR(50),
 genre VARCHAR(20),
 rating VARCHAR(100),
); 
```
###View Tables {#View-Tables}
```
Use the next commands to get more information about the tables stored in your database.
show tables — call a list of all tables associated with a database.
DESCRIBE table_name; — see the columns of your table.
DESCRIBE table_name column_name; — review the information of the column in your table.

```

###Delete a Table {#Delete-a-Table}
```
To get rid of the table specify the table name in the following command:
DROP TABLE tablename;
```
## Working With Indexes  {#Working-With-Indexes}

```
Indexes are the core element of your database navigation. Use them to map the different types of
data in your database, so that you don’t need to parse all the records to find a match.

NB: You have to update an index every time you are creating, changing or deleting a record in the
table. Thus, it’s best to create indexes only when you need to and for frequently searched columns.
How to Create an Index

The basic syntax is as follows:

CREATE INDEX index_name
ON table_name (column1, column2, ...);
You can also create a unique index — one that enforces the uniqueness of values in one or more columns.

CREATE UNIQUE INDEX index_name
ON table_name(index_column_1,index_column_2,...);

How to Delete an Index in MySQL
Use the DROP command for that:
DROP INDEX index_name;

```
## Working with Views  {#Working-with-Views}

```

Indexes are the core element of your database navigation. Use them to map the different types of
data in your database, so that you don’t need to parse all the records to find a match.
NB: You have to update an index every time you are creating, changing or deleting a record in the
table. Thus, it’s best to create indexes only when you need to and for frequently searched columns.
A view is a virtual representation of an actual table that you can assemble up to your liking (before
adding the actual one to your database).
It features rows and columns, just like the real deal and can contain fields from one or more of the
real tables from your database. In short, it’s a good way to visualize and review data coming from
different tables within a single screen.

How to Create a New View
CREATE VIEW view_name AS
SELECT column1, column2, ...
FROM table_name
WHERE condition;

Update a View
A view always displays fresh data since the database engine recreates it each time, using the view’s
SQL statement. To refresh your view use the next code:

CREATE OR REPLACE VIEW view_name AS
SELECT column1, column2, ...
FROM table_name
WHERE condition;

Rename a View
If you are dealing with multiple views at a time, it’s best to give them distinctive names. Here’s how
that done:
RENAME TABLE view_name TO new_view_name;

Show All Views
To call up all current views for all tables from the database, use this snippet:
SHOW FULL TABLES
WHERE table_type = ‘VIEW’;

Delete a View
To delete a single view use the DROP command:
DROP VIEW [IF EXISTS] view_name;

You can also delete multiple views at a time:
Drop Multiple views: DROP VIEW [IF EXISTS] view1, view2, ...;

```


MySQL is a popular, open-source, relational database that you can use to build all sorts of web databases.

MySQL 101

This is my personal git cheat sheet. This is not a deep dive into how git works, just some of the simple stuff.

Understanding Git


## What is a Promise in JavaScript {#What-is-a-Promise-in-JavaScript}

A Promise is a special JavaScript object. It produces a value after an asynchronousoperation completes successfully, or an error if it does not complete successfully due to time out, network error, and so on.

## Creating a JavaScript Promise {#Creating-a-JavaScript-Promise}

When the task completes, you either fulfill your promise or fail to do so.
Promise is a constructor function, so you need to use the `new keyword` to create one. It takes a function, as its argument, with two parameters - `resolve and reject`. These are methods used to determine the outcome of the promise.

```
Creating a Promise

const myPromise = new Promise((resolve, reject) => {
});
```

## Promise States {#Promise-States}

A promise has three states: `pending, fulfilled, and rejected.` The resolve and reject parameters given to the promise argument are used to do this. resolve is used when you want your promise to succeed, and reject is used when you want it to fail. These are methods that take an argument, as seen below.

- **Pending: Initially when the executor function starts the execution.**
- **Fulfilled: When the promise is resolved.**
- **Rejected: When the promise is rejected.**

![Promise States](/BL-1005/states.png)

```
const myPromise = new Promise((resolve, reject) => {
 if(condition here) {
   resolve("Promise was fulfilled");
 } else {
   reject("Promise was rejected");
 }
});
```

## Handling a Promise {#Handling-a-Promise}

![Promise Handling](/BL-1005/handling.png)

### Handling Promises With Then Method {#Handling-Promises-With-Then-Method}

Promises are most useful when you have a process that takes an unknown amount of time in your code (i.e. something asynchronous), often a server request. When you make a server request it takes some amount of time, and after it completes you usually want to do something with the response from the server. This can be achieved by using the then method. The then method is executed immediately after your promise is fulfilled with resolve.

```
myPromise.then(result => {

});
```

### Handling a Rejected Promise with Catch Method {#Handling-a-Rejected-Promise-with-Catch-Method}

Catch is the method used when your promise has been rejected. It is executed immediately after a promise's reject method is called.

```
myPromise.catch(error => {

});
```

## Async Await {#Async-Await}

Async/await are special syntax to work with promises in a more comfortable fashion.

- **async makes a function return a Promise**
- **await makes a function wait for a Promise**

### Async

```
Example
async function myFunction() {
  return "Hello";
}

Is the same as:
async function myFunction() {
  return Promise.resolve("Hello");
}
```

### Await

The keyword await makes JavaScript wait until that promise settles and returns its result.
The `await keyword` can only be used inside an `async` function.

```
async function f() {

  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("done!"), 1000)
  });

  let result = await promise; // wait until the promise resolves (*)

  alert(result); // "done!"
}
```

The function execution "pauses" at the line (\*) and resumes when the promise settles, with result becoming its result.

**References:**

- JavaScript Promise Tutorial:- https://www.freecodecamp.org/news/javascript-promise-tutorial-how-to-resolve-or-reject-promises-in-js/
- Async/Await:- https://www.w3schools.com/js/js_async.asp


Understanding Promises in Javasript


## HTML {#HTML}

- 📗 [MDN HTML](https://developer.mozilla.org/en-US/docs/Web/HTML)

## CSS {#CSS}

- 📗 [MDN CSS](https://developer.mozilla.org/en-US/docs/Web/CSS)
- 📗 [Web Dev](https://web.dev/learn/css/)
- 🎥 [CSS Complete Guide - Udemy](https://www.udemy.com/course/css-the-complete-guide-incl-flexbox-grid-sass/)
- 📘 [CSS for JS developers](https://css-for-js.dev/)

## Advanced CSS {#Advanced-CSS}

- 📘 [Debugging CSS](https://debuggingcss.com/)
- 🎥 [CSS Demystified](https://cssdemystified.com/)

## JavaScript {#JavaScript}

- 📗 [Eloquent JavaScript](https://eloquentjavascript.net/)
- 📗 [JavaScript Info](https://javascript.info/)
- 📘 [JavaScript for Impatient Programmers](https://exploringjs.com/impatient-js/toc.html)
- 📘 [Just Javascript](https://justjavascript.com/)
- 🎥 [Complete JavaScript](https://www.udemy.com/course/the-complete-javascript-course/)
- 🎥 [Javascript Complete Guide](https://www.udemy.com/course/javascript-the-complete-guide-2020-beginner-advanced/)

## Advanced JavaScript {#Advanced-JavaScript}

- 📗 [You don't know JS](https://github.com/getify/You-Dont-Know-JS)
- 📗 [Secrets of the JavaScript Ninja](https://www.manning.com/books/secrets-of-the-javascript-ninja-second-edition)
- 📘 [Deep JavaScript](https://exploringjs.com/deep-js/toc.html)
- 📘 [Professional JavaScript for Web developers](https://www.oreilly.com/library/view/professional-javascript-for/9781119366447/)
- 🎥 [Deep JavaScript Foundations](https://frontendmasters.com/courses/deep-javascript-v3/)
- 🎥 [JavaScript Hard Parts](https://frontendmasters.com/courses/javascript-hard-parts-v2/)
- 🎥 [JavaScript: Understanding the Weird Parts](https://www.udemy.com/course/understand-javascript/)

## TypeScript {#TypeScript}

- 📗 [TypeScript Deepdive](https://basarat.gitbook.io/typescript/)
- 📗 [Tackling TypeScript](https://exploringjs.com/tackling-ts/index.html)
- 📘 [Programming TypeScript](https://www.oreilly.com/library/view/programming-typescript/9781492037644/)
- 🎥 [Understanding typescript](https://www.udemy.com/course/understanding-typescript/)
- 🎥 [TypeScript Course by ui.dev](https://ui.dev/typescript/)

## JS Design Patterns {#JS-Design-Patterns}

- 📗 [JS Design Patterns](https://addyosmani.com/resources/essentialjsdesignpatterns/book/)
- 📁 [Design Patterns for Humans](https://github.com/kamranahmedse/design-patterns-for-humans)

## JS Best practices {#JS-Best-practices}

- 📘 [Refactoring JavaScript](https://refactoringjs.com/files/refactoring-javascript.pdf)
- 🎥 [Writing Clean Code/](https://www.udemy.com/course/writing-clean-code/)

## React {#React}

- 🎥 [React Redux](https://www.udemy.com/course/react-redux/)
- 🎥 [Epic React](https://epicreact.dev/)
- 📁 [React TypeScript Cheatsheet](https://github.com/typescript-cheatsheets/react)
- 📁 [React explanation by visual block](https://github.com/Bogdan-Lyashenko/Under-the-hood-ReactJS)
- 📁 [Bulletproof React](https://github.com/alan2207/bulletproof-react)

## Angular {#Angular}

- 🎥 [Angular](https://www.udemy.com/course/the-complete-guide-to-angular-2/)

## Vue {#Vue}

- TBD

## Svelte {#Svelte}

- TBD

## HTTP {#HTTP}

- 📗 [MDN HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP)
- 📘 [HTTP2 in Action](https://livebook.manning.com/book/http2-in-action/about-this-book/)

## Git {#Git}

- 📗 [Become a git guru](https://www.atlassian.com/git/tutorials)
- 📗 [Pro Git](https://git-scm.com/book/en/v2)

## Web Performance {#Web-Performance}

- 📗 [MDN Performance](https://developer.mozilla.org/en-US/docs/Learn/Performance)
- 📗 [Web Dev Performance](https://web.dev/learn/#performance)
- 📗 [Google Dev - Performance](https://developers.google.com/web/fundamentals/performance/get-started)
- 📗 [Smashing Magezine - Performance](https://www.smashingmagazine.com/guides/performance/)
- 🎥 [Web Performance Fundamentals](https://frontendmasters.com/courses/web-perf/)

## Web Security {#Web-Security}

- 🎥 [Web Security](https://frontendmasters.com/courses/web-security/)

## Accessibility {#Accessibility}

- 🎥 [Accessibility in JavaScript Applications](https://frontendmasters.com/courses/javascript-accessibility/)
- 🎥 [Develop Accessible Web Apps with React](https://egghead.io/courses/develop-accessible-web-apps-with-react)

## Functional JavaScript {#Functional-JavaScript}

- 📗 [Mostly adequate Guide](https://mostly-adequate.gitbook.io/mostly-adequate-guide/)
- 📗 [Functional Light JavaScript](https://aguru.gitbooks.io/functional-light-javascript/content/)
- 🎥 [Functional JavaScript](https://frontendmasters.com/courses/functional-javascript-v3/)

## Data Structures and Algorithms {#Data-Structures-and-Algorithms}

- 📘 [Grokking Algorithms](https://www.manning.com/books/grokking-algorithms)
- 📘 [The Algorithm Design Manual](https://www.amazon.com/gp/product/3030542556/)
- 📘 [Cracking Coding Interview](https://www.amazon.com/Cracking-Coding-Interview-Programming-Questions/dp/0984782850)
- 📁 [Javascript Algo](https://github.com/trekhleb/javascript-algorithms)
- 🎥 [DataStructues Algorithms](https://frontendmasters.com/courses/data-structures-algorithms/)
- 🎥 [Practical Algorithms](https://frontendmasters.com/courses/practical-algorithms/)
- 🎥 [JavaScript Algorithms fundamentals](https://pro.academind.com/p/javascript-algorithms-the-fundamentals)
- 🎥 [Adbul Bari](https://www.youtube.com/watch?v=0IAPZzGSbME&list=PLDN4rrl48XKpZkf03iYFl-O29szjTrs_O)
- 🎥 [Jenny's Lectures](https://www.youtube.com/watch?v=AT14lCXuMKI&list=PLdo5W4Nhv31bbKJzrsKfMpo_grxuLl8LU)
- 🎥 [Gaurav Sen](https://www.youtube.com/channel/UCRPMAqdtSgd0Ipeef7iFsKw)
- 🎥 [Tushar Roy - Coding Made Simple](https://www.youtube.com/channel/UCZLJf_R2sWyUtXSKiKlyvAw)
- 🎥 [Rachit Jain](https://www.youtube.com/channel/UC9fDC_eBh9e_bogw87DbGKQ)

## Interview Prep {#Interview-Prep}

- 📁 [Front End Interview Handbook](https://github.com/yangshun/front-end-interview-handbook)
- 📁 [JavaScript Interview Questions](https://github.com/sudheerj/javascript-interview-questions)
- 📁 [JavaScript Code Challenges](https://github.com/sadanandpai/javascript-code-challenges)
- 📁 [React Interview Questions](https://github.com/sudheerj/reactjs-interview-questions)
- 📁 [Tech Interview Handbook](https://github.com/yangshun/tech-interview-handbook)
- 📁 [FreeCodeCamp Interview Prep](https://github.com/freeCodeCamp/freeCodeCamp/tree/main/curriculum/challenges/english/10-coding-interview-prep)
- 🎥 [Namaste JavaScript](https://www.youtube.com/watch?v=pN6jk0uUrD8&list=PLlasXeu85E9cQ32gLCvAvr9vNaUccPVNP)

## Coding platforms {#Coding-platforms}

- 🚉 [Leetcode](https://leetcode.com/)
- 🚉 [Hackerrank](https://www.hackerrank.com/)

## Linux {#Linux}

- 📗 [Linux Journey](https://linuxjourney.com/)
- 🎥 [Edureka](https://www.youtube.com/watch?v=Wgi-OfbP2Gw)

---

# Additional Resources (will be categorized soon) {#Additional-Resources}

- 🎙 [JS Party podcast](https://jsparty.fm/)
- 📗 [JavaScript 30](https://javascript30.com/)
- 📗 [Git Explorer](https://gitexplorer.com/)
- 📗 [FreeCodeCamp React Challange](https://www.freecodecamp.org/learn/front-end-development-libraries/react/)
- 📗 [React Coding Challange](https://github.com/alexgurr/react-coding-challenges/)
- 📗 [React by Example](https://reactbyexample.github.io/)
- 📗 [React Cheatsheet](https://devhints.io/react)
- 📗 [React Patterns](https://reactpatterns.com/)
- 🚉 [Codechef](https://www.codechef.com/)
- 🚉 [Codeforces](https://codeforces.com/)
- 🚉 [InterviewBit](https://www.interviewbit.com/coding-interview-questions/)
- 🎥 [Scrimba - Learn React for free interactively](https://scrimba.com/learn/learnreact)
- 📗 [Tao Of React](https://alexkondov.com/tao-of-react/)

---

Highly recommended collections for frontend developers

Plan, Learn, Share.

Understanding HTML5

Understanding Javascript

MySQL 101

Understanding Git

Understanding Promises in Javasript

Front-End Learning Kit