HTML

• What is HTML?

• Structure of an HTML document

• Doctype declaration

• Tags, elements, and attributes

• Paragraphs, headings (h1–h6)

• Bold, italic, underline, and other formatting tags

• Superscript and subscript

• Div and span

• Semantic tags (header, nav, main, section, article, footer)

• Ordered & unordered lists

• Anchor tags and hyperlinks

• Internal, external, email, and telephone links

• Target attributes (_blank, _self, etc.)

• <img> tag and attributes

• Image formats and optimization

• Audio and video embedding

• <table>, <tr>, <td>, <th>

• Table attributes (border, colspan, rowspan)

• Styling tables with basic CSS

• <form>, <input>, <textarea>, <select>, <option>

• Buttons (submit, reset, button)

• Form validation (required, pattern, maxlength)

• Label and fieldset usage

• Semantic tags

• <canvas> and <svg> basics

• Media elements: <audio> and <video>

• placeholder, autofocus, required attributes

• Meta description, keywords, and viewport

• Title and favicon

• Accessibility and best practices

• Absolute vs. relative paths

• Linking external CSS, JS, and favicon

CSS

• What is CSS and why it’s used

• Types of CSS: Inline, Internal, External

• Syntax, selectors, and declaration blocks

• Class, ID, and universal selectors

• Element grouping and nesting rules

• Colors: name, hex, rgb, rgba, hsl

• Background properties: color, image, repeat, position, size

• Borders, margins, and padding

• Box model and its importance

• Height, width, and max/min dimensions

• Text styling: font-family, size, weight, line-height, spacing

• Text alignment and decoration

• Link styling and hover effects

• Display properties: block, inline, inline-block, none

• Visibility vs. display

• Positioning: static, relative, absolute, fixed, sticky

• Z-index and stacking context

• Flexbox: container and item properties

• Aligning and distributing items using Flexbox

• Pseudo-classes and pseudo-elements

• nth-child, first-child, last-child

• before and after elements

• Transitions and animations

• Keyframes and animation properties

• Hover, active, and focus animations

• Media queries for responsive design

• Mobile-first vs. desktop-first approach

• Units: px, em, rem, %, vw, vh

• CSS variables

• Using external fonts (Google Fonts)

• Integrating CSS with HTML

Figma

• Basic navigation of Figma interface (for developers)

• How to open and inspect shared Figma files

• Understanding frames (desktop, mobile layouts)

• Checking layout structure: sections, divs, containers

• Reading and copying text, colors, font sizes, and spacing

• Inspecting margins, padding, and alignment (box model reference)

• Using the “Inspect” tab to view CSS properties

• Exporting images/icons in correct formats (SVG, PNG, WebP)

• Identifying components: buttons, inputs, navbars, etc.

• Translating Auto Layout into flex or grid layouts in HTML/CSS

• Getting exact values for width, height, font, and breakpoints

• Checking responsiveness: mobile, tablet, desktop views

• Assets download and naming conventions

• Collaborating with designers: comments, versions, and updates

Bootstrap

• What is Bootstrap and why use it

• Setting up Bootstrap via CDN and locally

• Understanding Bootstrap’s grid system

• Containers: fixed and fluid

• Rows, columns, and breakpoints

• Responsive layout with grid classes

• Typography and text utilities

• Colors, backgrounds, and spacing utilities

• Borders, shadows, and sizing

• Display and visibility classes

• Buttons and button groups

• Badges, alerts, and progress bars

• Cards: structure and customization

• Images: responsive and thumbnails

Bootstrap

• Forms and form controls

• Input groups and form layouts

• Form validation classes

• Select, checkbox, and radio button styling

• Navbar and navigation components

• Creating responsive navbars

• Dropdowns and menus

• Carousels and sliders

• Accordions and tabs

• Bootstrap icons

• Utility classes for margin, padding, float, and flex

• Customizing Bootstrap with your own CSS

• Using Bootstrap with other frameworks

• Creating responsive and mobile-friendly websites

Basic JavaScript

• What is JavaScript and where it’s used

• How to link JavaScript to HTML

• console.log() and basic output

• Variables: var, let, const

• Data types: number, string, boolean

• Basic operators ( +, -, *, / )

• Conditional statements: if, else

• Loops: for, while

• Functions and how to create/use them

• Simple events: onclick, onmouseover

• Basic DOM access: getElementById, innerHTML

• Simple form validation (required fields)

jQuery

• What is jQuery and why use it

• How to include jQuery in an HTML page (CDN/local)

• jQuery syntax and $ selector basics

• Selecting elements by ID, class, tag

• DOM manipulation: .html(), .text(), .val(), .css()

• Event handling: .click(), .hover(), .focus(), .change()

• Show/hide elements: .show(), .hide(), .toggle()

• Effects and animations: .fadeIn(), .fadeOut(), .slideUp(), .slideDown()

• Form handling and validation basics

• Simple jQuery project (e.g., accordion, image slider)

AOS

• What is AOS (Animate On Scroll)

• How to add AOS to your project (CDN or npm)

• AOS initialization using AOS.init()

• Adding AOS attributes to HTML elements:

  • data-aos="fade-up", fade-down, zoom-in, flip-left, etc.

• AOS delay and duration:

  • data-aos-delay, data-aos-duration

• AOS easing options:

  • data-aos-easing="ease-in-out"

• Offset and anchor placement:

  • data-aos-offset, data-aos-anchor-placement

• Repeating animations:

  • data-aos-once="false"

• Responsive behavior and mobile settings

• Troubleshooting common AOS issues

• Using AOS in real web design projects

Uses of AI in Web Design

• Introduction: How AI supports frontend development

• Using AI tools to generate basic HTML structure and templates

• AI-based content generation (headings, paragraphs, button texts)

• Extracting HTML & CSS code from Figma using AI-based plugins

• AI image optimization for faster page loading (e.g., TinyPNG, ImageKit)

• Code completion tools (GitHub Copilot, ChatGPT) for writing HTML/CSS

• Accessibility enhancements with AI tools (alt text suggestions, label warnings)

• AI for SEO: meta tag generation, structured data hints

• Debugging HTML/CSS using AI-powered tools

• Real-life use case: Build a landing page using AI-assisted workflow

• Limitations and responsible use of AI in code

Major Real-World Projects

Health Website Landing Page
Custom HTML, CSS, JavaScript + Figma
Features: Appointment form, doctor profiles, services, testimonial slider, Google Map.

Food Delivery Website Landing Page
HTML, CSS, JavaScript + Figma
Features: Menu categories, product cards, cart UI, responsive navbar, newsletter form

Furniture Store Landing Page
HTML, CSS, JavaScript + Figma
Features: Product grid, promo banner, modal popup for product details, contact form.

Gym/Fitness Website Landing Page
HTML, CSS, JavaScript, Bootstrap + Figma
Features: Pricing plans, trainer cards, workout schedule, animated CTA sections.

Car Dealership Website Landing Page
HTML, CSS, JavaScript, Bootstrap + Figma
Features: Featured cars section, booking form, filter options, testimonial slider.

Version Control

• What is Version Control?

• Importance of Version Control in Web Development

• Introduction to Git

• Installing Git and initial setup (git config)

• Basic Git Commands:

  • git init, git status, git add, git commit

  • git log, git diff, git reset, git rm

• Understanding the Git workflow (Working Directory → Staging → Repository)

• Creating and managing repositories on GitHub

• Cloning repositories (git clone)

• Connecting local Git repo to GitHub (git remote add origin)

• Pushing and pulling changes (git push, git pull)

• Branching and Merging:

  • Creating branches (git branch, git checkout)

  • Merging branches and resolving conflicts

• .gitignore file usage

• Viewing commit history and reverting changes

• Collaborating with others (fork, pull request, merge)

• Basic GitHub UI: commits, issues, branches, pull requests

Bonus Module

Resume Building

• What makes a strong résumé for web developers

• Creating both fresher and experienced versions

• Formatting: PDF, ATS-friendly, clean design

• Highlighting skills, projects, and achievements

• Using free tools like Canva, Novoresume, and Overleaf

LinkedIn Profile Optimization

• Creating a professional LinkedIn profile

• Writing a strong headline and summary

• Listing skills, certifications, and projects

• How to get endorsements and recommendations

• Tips for networking and connecting with recruiters

Bonus Module

Mock Interview Preparation

• Common interview questions based on HTML, CSS, JavaScript, and Bootstrap.

• Behavioral and HR questions practice

• Live mock interviews (optional)

• Communication skills and confidence building

• Tips to handle online/video interviews professionally.

Job Portal Knowledge

• How to apply on platforms like:

  • Naukri.com, LinkedIn Jobs, Indeed, Internshala, etc.

• Creating an effective job seeker profile

• Resume keywords and job filtering

• How to apply strategically and follow up