UI Development Syllabus
UI Development Syllabus
HTML
Basic
o HTML Introduction
o Document structure
o Elements and Attributes
o Block and Inline Elements
o Hyperlinks, Images, Paragraphs
o Structuring pages
o Page Layouts
o Difference between table and divs
o Form Elements
o Frames
Advanced
o HTML5 Introduction
o Semantic Elements
o Media Elements
o Meta Elements and attributes
o Canvas and SVG
o Forms and Attributes
o Web Storage
CSS
Basic
o CSS Introduction
o Syntax
o Selectors
o Background Properties
o Text and Font Properties
o Box Model
o Display and Positions
o Floats
o Layout designs step by step
o Combinators Psuedo classes and Elements
Advanced
o CSS3 Introduction
o Borders and Box Effects
o New Background properties
o Transformations 2D & 3D
o Transitions
o Animations
o Flexbox
o Multi column Layout/Grids
o Media Queries
Bootstrap 5 (RWD)
o Bootstrap 5 Introduction
o Layouts
o Contents
o Forms
o Components
o Helpers
o Typography & Utilities
o Grid System & Flexbox
o Javascript Widgets
o Boiler Plate Templates
Javascript
o Javascript Introduction
o How it works
o Javascript console
o Fundamentals – 1
Primitive Data
Variables
Operators
Functions
Loops
Conditions
Objects
Arrays
ES5 & ES6
o Fundamentals – 2
Arrow Functions
Array methods
Object methods
Looping Arrays
o Code Debugging
o DOM and Events Fundamentals
o Event Handellers
o Javascript Behind the Scenes
o Numbers, Dates
o Data structures
o Working with Arrays
o OOP with Javascript
o Geo Location, External Libraries
o Modules, Tooling and Functional
o Ajax
o JSON
o Fetch api
o Async/Await
o Error handling
o Best Practices
o Code Challenges
ANGULAR SYLLABUS
1. Angular
o What is Angular
o Difference between Angular Versions
o Angular CLI and Troubleshooting
o Node JavaScript Introduction
o Setup a Project
o Setup Nodejs with Angular
o Typescript Introduction
o What is bootstrap
o Create Your Fist App
4. Directives in Angular
o What are Directives
o Using Output Data Conditionally
o What is ng if and else condition
o Output List
o Styling Element with ngStyle
o How to apply css class dynamically with angular js
o How to Create Basic Attribute Directive
o What is Renderer
o What is HostBinding and HostListener
o Directive Properties
o ngSwitch
6. Routing
o What is Routing?
o Loading of Routes
o Navigation and it path
o Styling of Router Links
o Relative Path Navigation
o De ne parameter in Routing
o Fetch Routing Parameter
o Observables
o Passing & Retrieving Parameters & Fragments
o Nested RoutingCon g Query Parameters
o Redirection Routes
o Route con guration
o Route Guards
o Protect Routes with canActivate
o Navigation Controlling
o Static Data in Route
o Location Strategies
7. Forms
o What is Forms and how do we handle it?
o Reactive Approach
o Template Driven
o Create Template Driven Forms
o What is Registering Control
o Use and Submit of Forms
o Access of Forms
o How to add validation in use input
o Build-In Validation
o HTML5 Validation
o Output Validation and Error Messages
o Two Way Binding
o Grouping
o Radio Button Handling
o Patch Forms Values
o Resetting Templates form Forms
8. Reactive Forms
o What is Reactive Forms
o Create Reactive form through code
o Syncing of HTML and Form
o Adding Validation
o Sumit Forms
o Grouping
o Form Control Arrays
o Custom Validators
o Relative Forms
o Async validation
o Value changes and Reacting to status
9. Pipes
o What is Pipes in Angular
o How we use pipes
o Chaining Multiple pipes in angular
o parameterizing a pipe
o Filter Pipe
o Impure & Pure Pipe
o async Pipes
11. Authentication
o What is Authentication
o How Authentication Work
o Introduction to JSON Web Tokens
o Creating Page and Route
o Firebase SDK
o User Signing UP and In
o Sending Token & Requiring
o Authentication Status
o How to add Logout button
o Protection & Redirection of Route
14. Animations
o What is Angular Animations
o Triggers and State
o Switch between States
o Basic and Advanced Transitions
o What is void state
o Key frames in animation
o Grouping
o Animation Callback
Introduction to Node.js:
o What is Node.js?
o Node.js Architecture and Event Loop
o Installation and Setup
o Hello World in Node.js
o Advantages and Use Cases
Introduction to Express.js
o What is Express.js?
o Why use Express.js for web development?
o Setting up a basic Express.js application
o Handling HTTP Requests and Responses
Express.js Middleware
Mongo Db
Introduction to MongoDB and Mongoose
o What is MongoDB?
o Why use MongoDB for database storage?
o Introduction to Mongoose and its features
o Setting up MongoDB and Mongoose
GIT
2. Installing Git
- Downloading and installing Git on different platforms (Windows, macOS, Linux)
- Configuring Git with your name and email
3. Git Basics
- Initializing a new Git repository
- Cloning an existing repository
- Understanding the working directory, staging area, and repository
6. Remote Repositories
- Connecting a local repository to a remote repository (GitHub, GitLab, Bitbucket)
- Pushing changes to a remote repository
- Pulling changes from a remote repository
8. Git Workflow
- Understanding feature branches and release branches
- Git flow model
- Best practices for collaborative development with Git
9. Undoing Changes
- git reset: Unstaging changes
- git checkout: Discarding changes in the working directory
- git revert: Reverting commits
Office Etiquettes
Meeting etiquettes
Email etiquettes
And other basic communication etiquettes that one should follow in office
Agile
Introduction to Agile
Agile roles and responsibilities: Scrum Master, Product Owner, and Development Team.
What is Scrum
What are all sprint ceremonies
Cloud computing Basics
What is cloud computing
Introducing basic services of AWS such as EC2, Lamda, S3..etc.