- UI Technologies Course Content
- Introduction of UI Technologies
- UI Developer Roles and Responsibilities
- Technologies Around
- HTML Basics & CSS
- Document Object Model (DOM)
- Structure of HTML Page: mandatory tags (html, head, body)
- What is CSS? Different ways of applying CSS & priority chain
- Heading tags (h1…h6), tags and attributes (class, id, style, etc.)
- Inline vs Block-level elements, HTML tags
- Including external page links using anchor tags & properties
- Working with row & column data using table tags
- Hiding/unhiding elements using display property
- Image tag, p tag, ul & ol, li, nobr, hr, br etc.
- Layouts, forms, buttons, input fields (textbox, radio, checkbox, dropdown, textarea etc.)
- HTML5 Topics:
- Browser support for HTML5
- Media tags (audio/video)
- Graphics using canvas tag
- Drag & Drop features
- Geolocation (latitude & longitude)
- Storing user preferences using LocalStorage
- Form elements: GET & POST, Validating input values, Form action & type
- CSS Properties: borders, fonts, pseudo-classes
- Positioning elements (absolute, relative, fixed, static)
- Box Model (margins, padding)
- Floating elements (float left, right etc.)
- Absolute vs Relative Paths
- Including external resources (CSS, images etc.)
- CSS3: Difference between CSS2 & CSS3
- Adding borders & backgrounds
- Advanced text effects (shadow)
- Adding transitions to elements
- Responsive Design: working across multiple devices
- Media Queries
- Bootstrap Framework:
- What is Bootstrap? Advantages?
- What is a responsive web page? Mobile-First strategy
- Setting up environment
- Using Bootstrap Grid: container, offset columns, class properties
- Typography, Bootstrap tables, form layout, hide/show text
- Bootstrap Components:
- Glyphicons, Dropdown menus, Button groups & toolbars, Input groups
- Navigation Pills & Tabs, Responsive Navbar, Forms in Navbar
- Jumbotron / Page header, Progress bar, Media Objects, List group, Panel component
- JavaScript Introduction
- Data types & data structures in JS
- Control structures: if, if-else, while, for, switch case
- Dynamic creation & manipulation of DOM elements using JS
- Adding dynamic event listeners (event capturing & bubbling)
- Validations using key char codes
- Data structures: Arrays & Objects, predefined methods
- Strings & predefined methods
- Advanced/ES6 Features:
- Adding methods for an object
- Modules (export/import)
- Understanding let and const
- Arrow functions
- Classes, Properties & Methods
- Spread & Rest operators
- Destructuring
- Array functions (map, filter, reduce etc.)
- Wrap Up: Next-Gen JavaScript Summary
- Getting Started: React Introduction, First Code, React Alternatives, SPA vs MPA
- Basic Features & Syntax: Workflow, CRA setup, Folder Structure, Props, State, Handling Events
- Lists & Conditionals: Rendering conditionally, Lists & Keys, Updating State
- Components & Internals: Lifecycle (class & functional), useEffect, Optimization, HOC, Context
- HTTP/Ajax: Axios (GET/POST/DELETE), Interceptors, Global Config
- Routing: react-router-dom, Links, Routes, Nested Routes, Redirects, Lazy Loading, Deployment
- Forms & Validation: Dynamic Inputs, Validation feedback, Error messages
- Redux: State, Flow (Store, Reducer, Actions), Middleware, Async Actions
- Redux Advanced: Middleware, Devtools, Action Creators
- Testing: Jest, Enzyme, Testing Components
- Deploying: Firebase Build & Deployment
- Real Time Project: CRUD Web Application