Front-end-tutorials This repository included Front end technology exercises with JavaScript, HTML, CSS, AngularJs

Table of contents

• javascript-basic

Contain about - 
  1. Where to import JS file
  2. Keywords
  3. Variables
  4. JsOutputs
  5. Arithmetic operations/ Operators
  6. DataTypes
      1. Strings
      2. Numbers
      3. Objects
  7. DataStructures
      1. Array
      2. Map
  8. Funtions/ MethodEvents
  10. JsAsynchronus
        1. jsAsynchronous
        2. jsCallbacks
        3. jsPromises

Technology Used: - 
      1. JavaScript
      2. HTML5

---

• angularJS-basic

Contain about - 
 1. components
     1. Input
     2. dom
     3. forms
     4. selectBoxes
     5. tables
     6. Arrays
     7. String
     8. Numbers
     9. Objects

 2. controllers
 3. directives
     1. angualr in-build directives (ng-init, ng-model, ng-controller, ng-app, ng-repeat, data-ng-model)
     2. user directives
 4. expressions
 5. functions
     1. events
     2. filters
 6. modules
     1. Adding Controllers
     2. Adding Directives
 7. resources
 8. services
     1. http
     2. customer service classes

Technology Used:-
     1. JavaScript
     2. HTML5
     3. AngularJs (Angular 1) - angular.min.js
     4. CSS3
   

---

• react-basic-with-javascript

Contain about - 
 1. Create react project with javascript
 2. Run react application -> you can see browser application
 3. HelloWorld application
 4. React ES6
   1. Classes
   2. Arrow Functions
   3. Variables (let, const, var)
   4. Array Methods like .map()
   5. Destructuring
   6. Modules
   7. Ternary Operator
   8. Spread Operator
 5. React Render HTML
 6. React JSX
 7. React Components
   1. Class Component
   2. Function Component
   3. Rendering a Component
   4. Props
   5. Components in Components
 8. React Events
 9. React Conditional Rendering
 10. React Lists
 11. React Forms
 12. React Router
 
 Technology Used:-
     1. JavaScript
     2. HTML5
     3. React.js
     4. CSS3
 
 Step 1:- Create React App
       npx create-react-app reactjs-basic-app
 Step 2:- Run the React Application
       cd reactjs-basic-app
       npm start
       

---

• react-basic-with-typescript

Contain about - 
 1. Create react project with Typescript
 2. Run react application -> you can see browser application
 3. All above(under React with JS) mentioned sectioned are covered with TS.
 4. React Hooks
   1. React useState Hook
   2. React useEffect Hooks
   3. React useContext Hook
   4. React useRef Hook
   5. React useReducer Hook
   6. React useCallback Hook
   7. React useMemo Hook
   8. React Custom Hooks
 5. Add data & Display data
 6. Passing Data to a Component
 7. Displaying List Data
 8. Styles Using CSS
 
  
 Technology Used:-
     1. TypeScript
     2. HTML5
     3. Reatc.js
     4. CSS3
     
 Step 1:- Create React App
       npx create-react-app react-with-typescript --template typescript
 Step 2:- Run the React Application
       cd react-with-typescript
       npm start