Front End Course Details
INTRODUCTION TO HTML
What is HTML?
Basic structure of an HTML document (<!DOCTYPE html>, <html>, <head>, <title>, <body>).
HTML ELEMENTS
Understanding tags and elements.
Commonly used elements (<p>, <h1> to <h6>, <div>, <span>, <a>, <img>, <ul>, <ol>, <li>, <table>, <form>, etc.).
ATTRIBUTES
Introduction to attributes.
Commonly used attributes (id, class, src, href, alt, title, style, etc.).
Understanding the difference between block-level and inline elements.
TEXT FORMATTING
Text formatting tags (<strong>, <em>, <u>, <del>, <sub>, <sup>, <br>, <hr>, etc.).
Semantic HTML tags (<header>, <footer>, <nav>, <article>, <section>, <aside>, <main>, <figure>, <figcaption>, etc.).
INTRODUCTION TO CSS
What is CSS?
Ways to apply CSS (inline, internal, external).
SELECTORS AND BASIC STYLING
Understanding selectors (element selectors, class selectors, ID selectors, descendant selectors, etc.).
Applying basic styles (color, background-color, font-size, font-family, text-align, padding, margin, border, etc.).
BOX MODEL
Understanding the box model (content, padding, border, margin).
Box-sizing property.
LAYOUT
Positioning (static, relative, absolute, fixed).
Display property (block, inline, inline-block, flex, grid).
Floats.
TYPOGRAPHY
Font properties (font-family, font-size, font-weight, etc.).
Text properties (color, text-align, text-decoration, text-transform, etc.).
SELECTORS AND COMBINATORS
Advanced selectors (attribute selectors, pseudo-classes, pseudo-elements).
Combinators (descendant combinator, child combinator, adjacent sibling combinator, general sibling combinator).
FLEXBOX
Understanding the flex container and flex items.
Flex container properties (display: flex, flex-direction, justify-content, align-items, align-content, flex-wrap, etc.).
Flex item properties (flex-grow, flex-shrink, flex-basis, order, align-self).
GRID
Understanding CSS grid layout.
Grid container properties (display: grid, grid-template-rows, grid-template-columns, grid-template-areas, grid-gap, grid-row-gap, grid-column-gap, etc.).
Grid item properties (grid-row, grid-column, grid-area, justify-self, align-self).
RESPONSIVE DESIGN
Media queries.
Responsive units (%, em, rem, vw, vh).
Fluid layouts.
TRANSFORMS AND TRANSITIONS
Transformations (translate, rotate, scale, skew).
Transition properties (transition-property, transition-duration, transition-timing-function, transition-delay).
ANIMATIONS
Keyframe animations.
Animation properties (animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state).
INTRODUCTION TO JAVA SCRIPT
What is JavaScript?
Brief history and evolution.
Variables, Data Types, and Operators
Declaring variables (var, let, const).
Primitive data types (string, number, boolean, null, undefined).
Operators (arithmetic, assignment, comparison, logical, etc.).
CONTROL FLOW AND CONDITIONALS
if...else statements.
switch statement.
​Ternary operator.
LOOPS
for loop.
while loop.
do...while loop.
forEach loop (for arrays).
FUNCTIONS
Declaring functions.
Function expressions vs. function declarations.
Parameters and arguments.
Return statement.
​Scope (global scope, local scope, function scope).
ARRAYS AND OBJECTS
Creating and manipulating arrays.
Array methods (push, pop, shift, unshift, splice, slice, forEach, map, filter, reduce, etc.).
Creating and manipulating objects.
Object methods and properties.
ERROR HANDLING
try...catch statement.
Error objects.
DOM MANIPULATION
Accessing elements.
Modifying element properties (innerHTML, textContent, value, etc.).
Creating and removing elements.
​Event handling (addEventListener, removeEventListener).
ASYNCHRONOUS JAVASCRIPT
setTimeout and setInterval.
Promises (creating, consuming, chaining).
async/await.
INTRODUCTION TO ANGULAR
What is Angular?
History and version overview.
Setting Up Angular Development Environment.
Installing Node.js and npm.
Installing Angular CLI (Command Line Interface).
Creating a new Angular project.
UNDERSTANDING ANGULAR ARCHITECTURE
Modules.
Components.
Templates.
Services.
Directives.
Pipes.
COMPONENTS AND TEMPLATES
Creating components.
Binding data to templates (interpolation, property binding, event binding, two-way binding)..
Template syntax (ngFor, ngIf, ngSwitch, etc.)..
ANGULAR CLI AND PROJECT STRUCTURE
Generating components, services, modules, etc. using Angular CLI.
Understanding the project structure.
DEPENDENCY INJECTION AND SERVICES
Understanding dependency injection.
Creating and using services.
Injectable decorators.
ROUTING AND NAVIGATION
Setting up routing in Angular.
Configuring routes.
Nested routes and route parameters.
Router guards (CanActivate, CanDeactivate, Resolve, CanLoad).
FORMS AND VALIDATION
Template-driven forms.
Reactive forms (FormBuilder, FormGroup, FormControl).
Form validation and error handling.
Custom validators.
HTTP CLIENT
Making HTTP requests using Angular HttpClient module.
Handling responses (Observables, RxJS operators).
Error handling and HTTP interceptors.
ADVANCED DIRECTIVES AND PIPES
Custom structural directives.
Creating custom pipes.
Pure vs. impure pipes.
PERFORMANCE OPTIMIZATION
Lazy loading modules.
Preloading strategies.
Optimizing change detection.
Tree shaking and bundle optimization.
PROGRESSIVE WEB APPS (PWA)
Introduction to Progressive Web Apps.
Adding PWA features to Angular applications (service workers, manifest files, etc.).​