Module 1: Foundational Concepts [Duration: 10 hrs]

• Introduction to the Internet and Web:
o About Internet
o World Wide Web works (HTTP/HTTPS, Browsers, Servers, DNS)
o Web Design Vs. Web Development
o Domains
o Web Designer’s role
o Static website
o URLs
o Dynamic website

• Fundamentals of Web Design:
o User-Centered Design principles
o Sitemaps
o Wireframes
o Structuring content of website
o Organizing website’s content
o User flows
o Usability testing
o Creating effective website navigation
o WCAG guidelines for Designing

• Introduction to Design Principles:
o Application of colors in the world of web design
o Creating effective color palettes
o Visual hierarchy
o Learning about Grouping, Proximity
o White space (negative space)
o Understanding Emphasis, Contrast
o Hue, Saturation, Value (brightness)
o What is Consistency and Repitition
Typography:
1) Fonts and typefaces
2) Appropriate font pairings
3) Readability and Hierarchy in typography
4) Web-safe fonts and their Utilization

Module 2: Core Technologies [Duration: 25 hrs]

• HTML (HyperText Markup Language):
o Elements, Tags, Attributes
o Headings, paragraphs, links, images, tables, lists, etc.
o < header>, < nav>, < section>, < article>, < aside>, < footer>, etc.
o < form>, < input>, < textarea>, < select>, < button>, etc.
o < table>, < tr>, < th>, < td>, < colgroup>, < col>, etc.
o Embedding video (< video>)
o Audio (< audio>)
o Images (< img>)
o ARIA attributes
o Validation

• CSS (Cascading Style Sheets):
o About selectors, values, properties
o CSS Syntax
o Inline CSS
o Internal CSS
o External CSS
o Id selectors, Class selectors, Combinators, Attribute selectors, Pseudo-classes, Element selectors, Pseudo-elements
o Content, Border, Padding, Margin
o px, vw, vh, em, rem, %, etc.
o RGB, RGBA, HSL, HSLA, Hexadecimal
o Line height, Font properties, Text alignment, etc.
o Backgrounds-Images, Backgrounds-colors, Linear-gradient
o Lists and tables styling
o Links and Buttons.

o Layout techniques:
1) Normal flow, inline and block elements
2) Clearfixing
3) Floats
4) Static-Position
5) Relative-Position
6) Absolute-Position
7) Fixed-Position
8) Sticky-Position
9) Flexbox Layouts
10) Complex 2-D layouts by using Grid

o Responsive Web Design (RWD):
1) Media queries
2) Mobile Design approach
3) Responsive Techniques

o CSS Frameworks :
1) Bootstrap
2) Tailwind CSS
3) CSS transitions and animations

Module 3: Visual Design and Tools [Duration: 10 hrs]

• Design Software and Tools:
o Introduction to popular design software:
1) Adobe Photoshop: Basic UI design and Image manipulation
2) Adobe Illustrator: Vector graphics and icon design
3) Figma/Sketch/Adobe XD: UI/UX design and prototyping tools.
o Understanding the basic workflows and interface of a chosen UI design tool.
o Creating wireframes and mockups for designing the UI
o Designing user interfaces (UI) for web
o Creating and managing design systems
o Creating and managing style guides
o Exporting assets for web (images, icons, etc.) in different formats (JPEG, PNG, SVG, WebP)
o Understanding image optimization for web performance

• UI/UX Principles for Web:
o Consistency and Standards for Web designing
o Learning about Feedback and affordance
o Error prevention and recovery
o Flexibility and efficiency of use
o Aesthetic and minimalist design
o Understanding user flows and journeys
o Creating interactive prototypes
o Microinteractions and what are their roles in enhancing user experience

• Web Typography in Depth:
o Choosing the right fonts for different type of purposes like body text, headings, UI elements
o Understanding web font formats (WOFF, WOFF2, TTF, OTF)
o Using services like Google Fonts and Adobe Fonts
o Implementing custom fonts
o Advanced CSS typography techniques (letter-spacing, word-spacing, text-shadow, etc.)

• Web Graphics and Imagery:
o Understanding vector vs raster graphics
o Optimizing images for web (size, format, compression)
o Working with icons (icon fonts vs. SVG icons)
o Creating and using image sprites
o Basic Editing of images for web using design softwares

Module 4: Interactive Elements and Basic JavaScript [Duration: 30 hrs]

• Introduction to JavaScript:
o What is JavaScript?
o What is the role of JavaScript in web development
o Basic syntax: Variables, data types, operators, control flow (if/else, loops, switch)
o What are functions
o How to declare, define and call the functions
o Introduction to Document Object Model (DOM)
o Understanding the structure of HTML as a tree
o How to Selecting in JavaScript
o How to manipulate DOM elements using JavaScript
o What are Events
o Different types of Events
o Understanding and handling user interactions like clicks, doubleclicks, mouseovers, form submissions, etc.

• Basic JavaScript for Web Design:
o Form validation using JavaScript
o Creating simple and interactive elements like image sliders, dropdown menus, basic animations, etc.
o How to modify CSS styles dynamically with the help of JavaScript
o What is Synchronous Programming
o What is Asynchronous Programming
o Difference between Synchronous and Asynchronous Programming
o Understanding Callbacks and it’s importance in asynchronous programming
o What is callback Hell
o Learning about Promises
o What’s the need of promises
o How promises are better than callbacks
o What is a Promise chaining
o What is Async/Await
o Importance of Async/Await in the real world web applications
o How they are better than callbacks and Promises
o Handling basic asynchronous operations (e.g., simple API calls)

• Introduction to JavaScript Libraries and Frameworks (Optional but Recommended):
o Understanding the benefits of using libraries (e.g., jQuery)
o Basic concepts and usage of a chosen library for DOM manipulation and effects.

Module 5: Responsive Design and Mobile-First Approach [Duration: 10 hrs]

• Advanced Responsive Techniques:
o Complex media queries and breakpoint strategies
o Using flexible grids and layouts (Flexbox and Grid for responsiveness)
o Responsive typography and imagery
o Handling different screen orientations

• Mobile-First Design:
o Understanding the mobile-first workflow
o Designing and developing for small screens first and then progressively enhancing for larger screens.

• Mobile UX Considerations:
o Touch targets and interaction design for mobile
o Navigation patterns for mobile
o Performance optimization for mobile devices

• Testing and Debugging Responsive Websites:
o Using browser developer tools for responsive testing
o Testing on different devices and emulators

Module 6: Web Design Workflow and Best Practices [Duration: 12 hrs]

• Project Planning and Management:
o Understanding client briefs and requirements
o Creating project timelines and managing tasks
o Collaboration with developers and other team members

• Version Control with Git:
o Introduction to Git and basic commands (clone, add, commit, push, pull)
o Using platforms like GitHub or GitLab

• Website Performance Optimization:
o Image optimization techniques
o Minifying HTML, CSS, and JavaScript
o Browser caching
o Content Delivery Networks (CDNs) - basic understanding

• Search Engine Optimization (SEO) Basics for Designers:
o Semantic HTML and its importance for SEO
o Understanding keyword research (basic concepts)
o Optimizing images for SEO (alt text)
o Website structure and navigation for SEO

• Web Accessibility Best Practices (In-depth):
o Understanding WCAG guidelines in detail
o Implementing ARIA attributes for better accessibility
o Testing websites for accessibility

• Web Design Trends and Future Directions:
o Staying updated with current design trends
o Exploring emerging technologies and their impact on web design