Session 1

1. Intro to websites
   • What is frontend
   • What is backend
   • Who is UI/UX Designer
   • What is server
   • Domain
   • Websites with framework vs without
2. Intro html
   • Create file html
   • Meaning of tags

Session 2

1. HTML, Head , body tags
2. Heading tags
3. P tag

Sesison 3

1. A Tag
   • Link
   • Phone
   • email
2. Attrinutes
   • Local attribute
   • Global attribute
   • Custome attribute (extra)
3. Img tag
   • Local image
   • URL image
   • Alt attribute
4. Video , audio tag
   • Inline src
   • Autoplay , mute , controls attributes
   • Source tag
5. Comment

Session 4

1. Meta tags
   • Author
   • Keywords
   • Charset
   • viewport
   • description
2. Fav icon
3. Diffrent between block tags and inline
4. Tables
   • Thead
   • Tbody
   • Th
   • Td
   • Tr
   • Rowspan
   • Col span

Session 5

1. Form
   • Input
     • Text
     • Email
     • Password
     • File
   • Attributes
     • Id
     • Name
     • required
     • Min , max
     • Minlength , maxlength
   • Input
     • Checkbox
     • Radio
   • Label
     • For attribute
   • Select , option tags
     • Value attribute
   • Button
     • Submit
     • Reset
     • Button

Session 5

1. Intro css
   • Inline style
   • Internal style
   • External style
     • Selectors (class , id , tag)
     • Attribute selector (extra)

2. Width , height
3. Padding directions
   • Padding shortcut
4. Margin directions
   • Shourtcut
   • Auto
   • Margin collapse
5. Color
6. Background color
7. Fonts
   • Font family
   • Font size
   • Font weight

Session 6

1. Selectors (parent child siblings)
2. Box sizing
3. Border
   • Style
   • Border radius
4. Display
   • Inline
   • Inline block
   • Block
   • None
5. Color units
   • Color names
   • HEX
   • RGB , RGBA
   • HSL , HSLA
6. Css Units
   • px
   • VH
   • VW
   • %
   • EM
   • REM
   • inherit

Session 7

1. Flex
   • Justify content
   • Align items
   • Gap
   • Order
   • Directions
   • Wrap
2. Background image
   • Image
   • Gradient
3. Overflow
   • Hidden
   • Scroll
   • Auto
4. List style
5. Box shadow
6. Text-decoretion

Session 8

1. Workshop (Landing page)

Session 9

1. Position
   • Fixed
   • Sticky
   • Relative
   • absolute
2. Translate
   • Scale
   • Transform
   • Rotate
3. Fontawesome (icons)
4. Google fonts

Session 10

1. Psudo class
   • Hover
   • Active
   • Foucs
   • Visited
   • Valid
   • Invalid
   • Nth child
     • Not
     • First
     • last

2. Psudo Element
   • After
   • before
3. Work shop (landing page)

Session 11

1. Animation (key frames)
   • From to
   • %
2. Responsive (media query)
   • Max-width

Session 12

1. Responsive
   • Min-width
   • Break points
2. Revision
3. Intro bootstrap

Session 13

1. Bootstrap utlites
   • Spacing
   • Colors
   • Container
   • Display
   • Position
   • Sizing
2. Bootstrap (components)
   • Navbar
   • Cards
   • Buttons
3. Workshop (part 1)

Session 14

1. Bootstrap (components)
   • Slider
   • Scroll spy
   • Nav & tabs
2. Work Shop (part 2)
3. AOS (animation library)
4. Intro js

Session 15

1. Outputs
   • log
   • Alert
   • write
2. Input
   • Prompt
3. Variables
   • Let
   • Var
   • const
4. Data types
   • String
   • Number
   • Boolean
5. If condition
   • If else
   • Logic Operators
6. Different between = ,==, ===

Session 16

1. Array
2. Object
3. For loop
4. Problem solving

Session 17

1. Function
2. Methods of array
   • Push
   • Pop
   • Slice
   • Splice
   • Shift
   • UnShift
   • Find index
   • Includes
3. Work shop (js)
   

Session 18

1. DOM
   • Get element by id
   • Query selector , all
2. Class list
   • Add class
   • Remove
   • Toggle
3. Class name
4. Style
5. Inner html
6. Inner text

Session 19

1. High order function
   • Map
   • Filter
   • ForEach
2. Workshop CRUD System (using onClick From Html)
3. github

Session 20

1. Events (add Event Listener)
   • Mouse event
   • Keyboard event
   • Prevent default
2. Form data
3. Revision

Session 21

4. IntroApi
   • Xml http request
     • Ready state
     • Status code
     • Headers
     • Body
   • promises
   • Fetch
     • Method
     • Async / await

5. Intro typeScript

Session 22

1. Intro of npm
2. TypeScript Types
   • Number , string  , boolean
   • Object types
   • Html types
   • Array
   • Interface
   • Type Aliases
3. Intro React

Session 23

1. File structure
2. jsx
3. Components
4. Create landing page

Session 24

1. Use state
2. Use ref
3. Props
4. React router dom (routing library)

Session 25

1. Props Driling
2. Condition rendering
3. Fetching api
4. Dynamic pages

Session 26

1. React recoil (state management library)
2. Ecommerce (Part 1)
   • Home page
   • Category page
   • Details page

Session 27

1. Ecommerce (part 2)
   • cart
     • Delete
     • Add
     • edit
   • Login / register
2. Private route

Session 28

1. Tailwind
2. Notfication library
   • React toast
   • React hot toast
3. Deploying
   • Github
   • Vercel

Session 29

1. Intro next (knowledge)

Session 30

1. Final Project and Discussion.