Introduction
Units
1.
UNIT 1 - Introduction to User Research & Experience Design
1.1.
Usability, Learnability, Visibility, Efficiency
1.2.
Errors and user feedback
1.3.
Understanding user needs and goals, crafting user personas
1.4.
Laws of UX
2.
UNIT 2 - Visual Design Principles and Responsive Web Interfaces
2.1.
Principles of visual hierarchy in UI design
2.2.
Typography and font pairing techniques
2.3.
Contrast and emphasis
2.4.
Grid systems and alignment techniques
2.5.
Microinteractions
2.6.
Principles of responsive mobile web design
2.7.
Adapting UI design for different screen sizes and orientations
2.8.
Responsive layouts and fluid grids
2.9.
Mobile navigation and menu patterns
2.10.
Exercises
3.
UNIT 3 - HTML
3.1.
HTML5 and semantic markup
3.2.
Document structure, Text formatting
3.3.
Lists, Links and navigation
3.4.
Images and multimedia
3.5.
Tables, Forms and input elements
3.6.
Semantics
3.7.
Exercises
4.
UNIT 4 - CSS
4.1.
Selectors and properties
4.2.
Color and typography
4.3.
Box model and layout
4.4.
Styling lists, tables, and forms
4.5.
layout techniques, flexbox, grid
4.6.
CSS variables
4.7.
Media queries
4.8.
CSS reset and normalisation
4.9.
Using SVG and fonts
4.10.
Responsive web design
4.11.
Browser developer tools
4.12.
Exercises
5.
UNIT 5 - Tailwindcss and Shad UI
5.1.
Utility-first; Preflight, default styles; units; prefixes
5.2.
Font size, shape; Text colour, opacity; Text alignment
5.3.
Spacing; Styling lists; Plugins
5.4.
Box model; Padding, margins; Borders; Background
5.5.
Colours, images; Controlling height, width
5.6.
Containers, page structure; Floats, clears
5.7.
Positioning, z-index
5.8.
Table; Grid system; Flexbox; Box
5.9.
Utility animations; transitions; Transformations
5.10.
Responsive designs
5.11.
Configuration file; Default values; Generated classes
5.12.
Variant prefixes; Integrating with existing CSS
5.13.
Using Shadcn/ui
5.14.
Exercises
6.
UNIT 6 - Browser Events and Manipulation
6.1.
DOM; Browser environment, specifications; DOM tree
6.2.
DOM Selection, Manipulation; Node properties
6.3.
Attributes, properties; Document structure, content
6.4.
Styling and Layout; Element sizing, scrolling; Window sizes
6.5.
Event types, handlers; Event propagation & delegation
6.6.
Browser default actions; Creating, dispatching custom events
6.7.
Mouse events, properties; Mouse movement; drag, drop
6.8.
Pointer events; Keyboard events; scrolling events
6.9.
Form properties and methods; Focus; Form submission
6.10.
Exercises
7.
UNIT 7 - Web Components
7.1.
Introduction to Web Components
7.2.
Extending HTMLElement; Custom element naming, definition
7.3.
Adding content, styling, and interactivity
7.4.
Components Reusability; attributes, properties; customization
7.5.
Web Components API lifecycle methods; Modular Development
7.6.
Dependency problems; Wrapping third-party libraries
7.7.
Template literals, string manipulation
7.8.
Template tag; Dynamic template loading
7.9.
Shadow DOM; Style encapsulation; Slots, content projection
7.10.
Shadow CSS; Theming components with CSS variables
7.11.
Combining multiple components; common design language
7.12.
Exercises
Light
Rust
Coal
Navy
Ayu
SDA101 - User Interface Design and Implementation
Browser developer tools