Complete Topic Coverage for FSD Practical Exam

Unit	Topic	Weightage	Hours	Key Concepts
1	Introduction to Web & Web Design	5%	1	WWW, HTTP, Client-Server, Web Design Principles
2	HTML Structure & Core Tags	10%	3	Semantic Tags, Meta, Media, Lists, Tables
3	Forms, Graphics & Interactive Elements	10%	3	Form Controls, SVG, Image Maps
4	Introduction to CSS	10%	3	Selectors, Box Model, Flexbox, Grid, Positioning
5	CSS Effects, Animations & Responsive Design	10%	4	Transforms, Animations, Transitions, Media Queries
6	Introduction to Bootstrap & Utility Classes	10%	3	Grid System, Utilities, Components, Cards, Tables
7	Bootstrap Components: Navigation & Forms	15%	4	Navbar, Forms, Pagination, Carousel, Modal
8	Core JavaScript Concepts & Functions	5%	3	Variables, Data Types, Functions, Arrays, Loops
9	JavaScript DOM Manipulation & Events	15%	3	DOM Selection, Style Changes, Event Listeners
10	Modern JavaScript: Async, Fetch, Forms	10%	3	Promises, Async/Await, Fetch API, Form Validation

📌 Essential Topics Checklist

Unit 1: Introduction to Web & Web Design 5%

WWW (World Wide Web) basics
HTTP protocol and request-response cycle
HTTP status codes (200, 404, 500, 301, etc.)
URL and Client-Server architecture
Website planning and design principles
Browser compatibility and responsive design
Navigation design and user experience

Unit 2: HTML Structure & Core Tags 10%

Unit 3: Forms, Graphics & Interactive Elements 10%

Unit 4: Introduction to CSS 10%

Unit 5: CSS Effects, Animations & Responsive 10%

Unit 6: Introduction to Bootstrap & Utility Classes 10%

Bootstrap setup (CDN and file inclusion)
Container types (fixed and fluid)
Grid system (12-column, row, col classes)
Responsive prefixes (col-sm, col-md, col-lg, col-xl, col-xxl)
Utility classes (spacing, display, colors, sizing, borders)
Bootstrap components (buttons, alerts, badges, spinners, images)
Bootstrap tables and icons
Customizing Bootstrap

Unit 7: Bootstrap Components - Navigation & Forms 15%

Unit 8: Core JavaScript Concepts & Functions 5%

Unit 9: JavaScript DOM Manipulation & Events 15%

Unit 10: Modern JavaScript - Async, Fetch & Forms 10%

⚡ Quick Reference Code Snippets

JavaScript Selectors

            // Modern selectors (recommended)
            const el1 = document.querySelector('#myId');
            const el2 = document.querySelectorAll('.myClass');
            const el3 = document.querySelectorAll('[type="text"]');

            // Legacy selectors (still used)
            const el4 = document.getElementById('myId');
            const el5 = document.getElementsByClassName('myClass');
        

Event Handling

            // addEventListener (preferred)
            element.addEventListener('click', function(event) {
            console.log(event.target);
            console.log(event.type);
            });

            // Arrow function
            button.addEventListener('click', () => {
            element.style.color = 'red';
            });
        

Flexbox Example

            .flex-container {
            display: flex;
            flex-direction: row;
            justify-content: space-around; /* horizontal */
            align-items: center; /* vertical */
            flex-wrap: wrap;
            gap: 20px;
            }
        

Media Query

            /* Mobile-first approach */
            .container { width: 100%; }

            @media (min-width: 768px) {
            .container { width: 750px; }
            }

            @media (min-width: 992px) {
            .container { width: 970px; }
            }
        

Async/Await Example

            async function getData() {
            try {
            const response = await fetch('https://api.example.com/data');
            const data = await response.json();
            console.log(data);
            } catch (error) {
            console.error('Error:', error);
            }
            }
        

📊 Exam Weightage Summary

Frontend (HTML + CSS): 40% (Units 2-7)

40%

JavaScript & DOM: 30% (Units 8-9)

30%

Advanced Topics: 25% (Unit 10 + Bootstrap)

25%

Basics & Theory: 5% (Unit 1)

💡 Pro Tips for Exam:

Bootstrap questions are commonly asked - master grid system and components
JavaScript DOM manipulation is high weightage - practice event handlers
Always prioritize responsive design in CSS questions
Form validation combining HTML5 + JavaScript is frequently asked
Practice creating projects that combine multiple units
Use developer tools to debug and test your code

📝 Important Reminders:

Always link external CSS files correctly
Include viewport meta tag for responsive design
Use semantic HTML for better accessibility
Minimize inline styles - use CSS classes instead
Test your code on mobile devices and different browsers

✨ Created by DRThummar ✨

💻 Comprehensive FSD Practical Exam Preparation Material

📅 Updated: 2026 | 📚 Course Code: 117013392

🔗 GitHub Repository