README
home

1 motivation
2 resources
3 roadmap
4 resource itineraries

1 Complete Web Developer 2020
2 freeCodeCamp
3 JavaScript Understanding the weird parts

0 Source Link
1 Getting Started

1 Introduction and Goal of the course
2 Setup
6 Understanding and frameworks

2 Execution Contexts and Lexical Environments

10 The Global environment and the global variable
11 Two phase interpretation, hoisting
12 undefined is special
14 js is single threaded and synchronous
17 The scope chain
19 Asynchronous callbacks
7 First 3 big word alerts
8 Name value pairs and objects

3 Types and operators

21 Primitive types
26 Comparison operators
29 Logic ops and value evaluation
30 Multi file collisions

4 FrontendMentor challenges

1 intro section with nav dropdown

5 projects
6 setup

tooling

README
obsidian templates

README
templater

timestamp
title and date
w2h

vault

0 Basics of the Web

1 Browsing the web
2 Dev Tool

0 index
1 DevTool advanced

3 How browsers work
4 First website visit details
4 Rendering Performance basics

1 HTML

0 index
1 What are tags
2 Common tags

1 Writing stuff
2 Anchor tag
3 Lists
4 Multimedia tags
5 Table
6 Meta tags

3 Containers
4 Forms
5 Semantic tags Page Sections

2 CSS

0 index
1 CSS Basics

0 index
1 Types of CSS
2 CSS Selectors
3 Order and Inheritance in CSS
4 Critical Render Path

2 Commonly used properties IGN

0 Miscellaneous
1 Data based

1 Size
2 Colors
3 background image
4 Fonts
5 Text Formatting
6 Icons
7 Links

4 List styles
5 CSS tables
6 CSS extras IGN

0 index
1 Media queries
2 auto keyword
3 Avoid pixelation
4 Viewport sizes
5 CSS variables
6 CSS calc function

3 Box Model

0 index
1 Box model
2 margin and padding
3 border
4 height and width
5 outline
6 display and visibility

4 Layouts flex, grid

0 index
1 Flexbox 1D

0 flex syntax
0 index
1 Container

1 main axis
2 cross axis
3 Wrapping

2 Items

1 flex shrink
2 flex grow
3 flex basis
4 order
5 align self
6 All in one flex property

2 Grid 2D

0 index
1 Container

1 grid template
3 row and column gap
4 Justifying and aligning items
5 Naming items

2 Items

0 index
1 Space occupied
2 grid item position

3 Flex vs Grid

3 Floats

5 Positioning
6 Transition and Animations
7 Media queries

3 JavaScript

0 index
1 JS Basics

0 index
1 JS Setup
2 What is JavaScript
3 Basic JavaScript
4 Using JS
5 Basic Data Structures

2 DOM Manipulation

0 index
1 DOM and JS Engine
2 DOM Selectors
3 DOM events
4 Creating new HTML elements
6 jQuery trivia
7 Developer Fundamental 5

3 Advanced JS

0 index
10 How Does JS works
11 Modules in JS
12 Asynchronous JavaScript

0 index
1 Event loop
2 Callbacks
3 Promises
4 Async await
5 Comparing async coding constructs

13 Exception handling
1 Scope
2 ES5 and ES6

0 index
A Necessities
B Shorthands and object features
C JS exclusive features

3 Advanced Loops
4 Advanced Arrays

1 spread and rest operators
2 Map, filter and reduce
3 some and every

5 Advanced Functions

1 Pure functions
2 Closures
3 Currying
4 Function composition

6 Advanced Objects

1 How variables work
2 Scope context
3 Classes and objects
4 Inheritance

7 ES7
8 ES8
9 Debugging

4 Extra JS

1 Intl API

4 Website Design

1 Accessibility
2 Folder structure

notebook

3. Flex vs Grid #

Created Saturday 23 October 2021

Flex: 1D controls (row or column, easy)
Grid: 2D controls
Prefer flex over grid if it’s possible.