MERN Full-Stack

Scaler Full Stack Module Beginner Curriculum

Class - 1

1. Web Fundamentals
2. Introduction to HTML
3. Starting of Portfolio Project

Class - 2

1. Inline vs Block Level Element
2. Different Types List
   -> Unodered List
   -> Ordered List
   -> Description List
3. Tables
4. Forms

Class - 3

1. Css Introduction
2. Different Types Selectors
    -> Element Selector
    -> Class Selector
    -> Id Selector
    -> Attribute Selector
    -> Descendant Selector
    -> Children Selector
    -> Combinatrics
3. CSS Colors
    -> Default Colors
    -> Hex Codes
    -> rbga function
    -> hsla() function
4. Background Properties
5. Text Related Properties (font-family, font-style...)

Class - 4

1. Display
    -> inline
    -> block
    -> inline-block
    -> none
2. box model
    -> content-area
    -> padding
    -> border
    -> margin
3. box-sizing
4. overflow
5. position
    -> static
    -> absolute
    -> relative
    -> fixed
    -> sticky

Class - 5

1. FlexBox
    -> container related properties
        > justify content
        > align items
        > align content
        > flex wrap
    -> items related properties
        > order
        > grow
        > shrink
        > basis
2. Media query
3. FlexBox Example
        > navigation bar
        > cards

class - 6

1. CSS Grid
      -> container related properties
        > place items
        > place content
        > grid-template-column
        > grid-template-row
        > grid-auto-flow
        > gap
    -> items related properties
        > place self
        > grid-row, grid-column

class - 7

1. Specificity
2. Inheritance
3. Box Shadow
4. Different types of units in css

class - 8

1. Introduction to JS
2. Node.js usage and installation
3. Ways of Linking HTML and JavaScript
4. Variable
5. Data Types
6. Arrays in Depth

class - 9

1. Arrays Splice
2. Objects in depth
3. Hoisting with var and let,const
4. Reference Data type manipulation

class - 10

1. Introduction to DOM
2. Element Selector (getElementById, getElementByClassName, querySelector, querySelectorAll)
3. appendChild, insertBefore
4. Event and addEventListener

class - 11

1. Imperative vs dcalrative coding
2. Introduction DOM & Web API
3. How we can access elements from DOM
4. How we can add event listener to element or node
5. How we create new element
6. How we can update and append elements to DOM

Class - 12

Events

1. Click
2. dblclick
3. change
4. keydown
5. keyup
6. mouseout
7. mouseover
8. scroll

addeventlistner -> HOF and it takes callback function where you write actual implementation logic

Class - 13 Weather APP Javascript/projects/weatherapp

* Api link -> https://www.weatherapi.com/login.aspx

* Json -> https://www.w3schools.com/js/js_json_intro.asp

* Api -> https://aws.amazon.com/what-is/api/#:~:text=on%20your%20phone.-,What%20does%20API%20stand%20for%3F,of%20service%20between%20two%20applications.
    https://www.freecodecamp.org/news/what-is-an-api-in-english-please-b880a3214a82/

Class - 14 Kanban Board

Part - 1
## Requirement Discussion and Wireframe Discussion
1. HTML Mock for NavBar(Tool Bar), Ticket Creation Part, Ticket Viewing Part
2. Applied CSS for above mentioned Sections
3. Toogle Tocket Creation part

Class - 15 Kanban Board

Part - 2
1. Dynamic way of creating Ticket
2. Handling Deleting of Ticket using Remove Button

Class - 16 Kanban Board

Part- 3
1. locking mechanism
2. filtering mechanism
3. handling task status

Class - 17 Kanban Board

Part- 4
1. Local Storage Implementation
2. Additional Style changes
3. Deployment

Class - 18 Event Propagation & Counter Component & Star Component

1. Event Propagation - Bubbling and capturing
2.Counter Component - Machine Coding
2. Star Component - Machine Coding

Class - 19 Machine Coding -2

1. OTP Component
2. Nested Comments Component
3. Progress Bar Component

Class - 20 Async JS Beginging

1. SetTimeout
2. Debounce
3. Throtling
4. Async vs Defer uscases