Module 1 : Introduction to Web Designing [Duration : 3 hrs]

• Understanding the concept of Web Designing
• Practical Applications and uses of learning Web Designing
• How web designing different from web development
• Comparison between Front-end and back-end technologies
• What are Static websites and Dynamic websites
• Introduction of HTML, CSS and JavaScript

Module 2 : HTML (Hyper-Text Markup Language) [Duration: 5 hrs]

• Describe HTML and HTML5
• HTML document structure
• What are tags and attributes
• Describe Head and Body section of HTML document
• Understanding Div, Span, headings, paragraphs, line breaks, Horizontal rule
• Creating Unordered and Ordered list, list styling
• Hyperlinking with Anchor tag (< a>), Opening links (target=”_blank”)
• Adding image using image tag (< img>), Image linking, src, alt, title, width, height, alt
• Building Table using < table>, < th>, < td>, etc
• Form (< input>, < textarea>, < button>, etc), Form attributes (value, placeholder, required etc.)
• Learning how semantic and non-semantic HTML tags affect the structure and meaning of a webpage..
• Learning how to embed audio using the < audio> tag, including useful attributes like loop, autoplay, and controls and exploring how to work with the < video> tag and how to add YouTube videos to a webpage.

Module 3 : CSS (Cascading Style Sheet) [Duration: 6 hrs]

• Introduction, features, and benefits of CSS
• Role of CSS Selectors: element, class, ID, and universal
• Managing background properties, fonts, font sizes, text styling, and alignment
• Applying Internal, Inline, and External CSS
• Comprehending the Box Model: margin, border, padding, and content
• Learning different display properties: block, inline, and inline-block
• Implementing visibility, overflow handling, and opacity adjustments
• Understanding the difference between absolute units (px, cm, in, mm) and relative units (%, em, rem, vw, vh, etc.)
• Introduction to Flexbox: flex-wrap, gaps, flex-direction, and alignment
• Grasping CSS Grid: grid-template-columns/rows, gaps, and difference between implicit and explicit grids
• Implementing positioning techniques in CSS: static, relative, absolute, fixed, and sticky; using top, right, bottom, left, and z-index
• Implementing CSS transitions
• Designing animations with CSS
• Advancing to responsive designs with media queries
• Constructing responsive layouts
• Employing pseudo-classes and pseudo-elements

Module 4 : JavaScript [Duration: 6 hrs]

• Introduction to the JavaScript programming language
• Various methods for incorporating JavaScript: inline, internal, external
• Understanding the operation of JavaScript engines
• Role of let, var, and const keywords
• Defining variables, data types, and operators
• Understanding the concepts of type conversion and coercion
• Using conditional logic, loops, and loop control statements
• Understanding functions: declarations, expressions, arrow functions, and callback functions
• Exploring local and global scopes, lexical scope, hoisting, and closures
• Working with Objects and Arrays, including array methods
• Manipulating the DOM with methods such as getElementById, querySelector, and innerHTML
• Event handling methods: click, change, hover, using addEventListener(), and preventing default behaviors
• Accessing and managing form data
• Utilizing the browser console and basic debugging

Module 5 : Tools for Web Designing [Duration: 2 hrs]

• Overview of design tools like Figma, Canva, AdobeXD
• Using grids, layout constraints, and auto-layout features in Figma
• Working with Figma plugins to enhance design workflows

Module 6 : CSS frameworks: Bootstrap [Duration: 3 hrs]

• Installing Bootstrap using npm and CDN
• Learning about CSS frameworks
• Implementing Bootstrap in user interface design
• Achieving responsive designs with Bootstrap
• Using Bootstrap components such as Buttons, Cards, Dropdowns, Modals, and Forms
• Utilizing Bootstrap utilities such as Flexbox, positioning, borders, shadows, margins, and paddings
• Applying grid and flexbox systems in Bootstrap
• Customizing Bootstrap themes to match project requirements