UI & Front-End Development Course Curriculum

(HTML • CSS • Bootstrap • JavaScript • ES6 • React)

  • 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, Bootstrap form layout, hide/show text in Bootstrap
  • 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 introduction (export/import)
  • Understanding let and const
  • Arrow functions
  • Classes, Properties & Methods
  • Spread & Rest operators
  • Destructuring
  • Refresher on primitive vs reference types
  • Array functions (map, filter, reduce etc.)
  • Wrap Up: Next-Gen JavaScript Summary

  • 1. Getting Started: React JS Introduction, First React Code, React Alternatives, SPA vs MPA
  • 2. Basic Features & Syntax: Workflow, Create React App, Folder Structure, Component Basics, Functional Components, Props, children Prop, State, Handling Events, Inline & Stylesheets
  • 3. Lists & Conditionals: Rendering conditionally, Lists & Keys, Updating State Immutably
  • 4. Components & React Internals: Project Structure, Stateless vs Stateful, Lifecycle (class & functional), useEffect, Optimization (React.memo, PureComponent), Fragments, HOC, Refs, Context
  • 5. HTTP / Ajax: HTTP Requests, Axios (GET/POST/DELETE), Interceptors, Global Config, using Axios Instances
  • 6. Routing: Routing & SPAs, react-router vs react-router-dom, Links, Routes, Nested Routes, Redirects, Lazy Loading, Deployment
  • 7. Forms & Validation: Dynamic Input Components, Config based forms, Validation feedback, Error messages, Form handling
  • 8. Redux: Understanding State, Flow (Store, Reducer, Actions), Immutable updates, Combining reducers, Middleware, Devtools, Async actions
  • 9. Redux Advanced: Middleware, Devtools, Async Code, Action Creators, Switch Cases, Restructuring Actions
  • 10. Testing: Testing tools (Jest, Enzyme), Testing React Components
  • 11. Deploying: Build & Deployment steps (e.g., Firebase)
  • 12. Real Time Project Implementation: CRUD Web Application

  • Java History, Java Features, JDK vs JRE vs JVM, JDK Installation & Environment Setup
  • Types of Variables & Methods, Operators in Java, Types of Operators, Control Flow Statements, Jump Statements
  • Class & Objects, Constructor & Overloading, Composition, Inheritance & Types, Method Overloading & Overriding, Abstract Class & Interfaces
  • Type Casting, Polymorphism & Encapsulation, Package & Access Specifiers, Exception Handling, Customized Exceptions
  • Object class & its use, Strings, StringBuffer & StringBuilder, Arrays
  • List, Set, Map interfaces & Implementation classes, Sample CRUD Application, ArrayList & LinkedList & TreeSet, Hashtable
  • Multithreading in Java: Synchronized vs Non-synchronized, File I/O concepts
  • Java 8 Features
  • J2EE: JDBC basics, Driver types, SQL queries, PreparedStatement, ResultSet, Transaction Handling, Connection Pool Concept, Tomcat installation, CRUD Application via JDBC
  • Servlets: Static vs Dynamic Web page, Servlet programming basics, Servlet lifecycle, Session Management, Request & Response headers, RequestDispatcher & sendRedirect, Login page with Servlet
  • JSP: JSP basics, JSP lifecycle, JSP architecture, JSP action tags
  • Hibernate ORM: Overview, Hibernate architecture, Setup, Configuration, Mapping files, Mapping types, Annotations, HQL
  • Spring: Spring overview & features, Architecture, Types of Dependency Injection, Auto-wiring, Spring ORM, Spring Security, Spring MVC, Spring Boot: Overview, STS, Web MVC, Data JPA, RESTful Services, Microservices Overview
  • Database Concepts: ER Diagram, Constraints, Data types, DQL, SQL Clauses, Functions, Subquery, Joins (Equi, Non-equi, Outer, Self), DDL (Create, Alter, Rename, Drop, Truncate), DML (Insert, Update, Delete), DTL (Commit, Rollback, Savepoint), DCL (Grant, Revoke), PL/SQL Basics