Full Stack Development (With JavaScript-1) - Complete Exam Guide

Course Code: 117013392

B.E. Semester III | Department of Computer Engineering

Lecture: 3 | Practical: 6 | Credit: 6

Unit 1: Introduction to Web

5% (1 hour)

Basics of WWW (World Wide Web) HTTP Protocol and Client-Server Architecture and Web Design Concepts

View Topics

Unit 2: HTML Structure

10% (3 hours)

HTML Tags • Semantic Tags • Meta Tags • Media & Links • Lists & Tables

View Topics

Unit 3: Forms & Graphics

10% (3 hours)

HTML Forms • SVG • Image Maps • Form Elements & Attributes

View Topics

Unit 4: CSS Introduction

10% (3 hours)

CSS Selectors • Box Model • Flexbox • Grid • Positioning

View Topics

Unit 5: CSS Effects & Animations

10% (4 hours)

Gradients • Transforms • Transitions • Animations • Media Queries

View Topics

Unit 6: Bootstrap Basics

10% (3 hours)

Bootstrap Setup • Grid System • Utility Classes • Components

View Topics

Unit 7: Bootstrap Components

15% (4 hours)

Navbar • Forms • Pagination • Carousel • Modal • Offcanvas

View Topics

Unit 8: JavaScript Basics

5% (3 hours)

Data Types • Variables • Functions • Array Methods • Loops

View Topics

Unit 9: DOM & Events

15% (3 hours)

DOM Manipulation • Event Handling • Selectors • Style Changes

View Topics

Unit 10: Async JavaScript

10% (3 hours)

Promises • Async/Await • Fetch API • Form Validation • Storage

View Topics

Practical Projects & Hands-On Exercises

Project 1: Bootstrap Offcanvas Sidebar

Create a webpage with a button that toggles an offcanvas sidebar. Include header with close button, body with navigation links. Links to: Unit 2, 3

Project 2: Mouse Events Handler

Handle mouse events: heading turns yellow on hover (black on leave). Buttons to show time/date, change background color to red/green. Links to: Unit 4, 5

Project 3: Contact Form with LocalStorage

Create form for username, email, message. Save to localStorage on submit. Retrieve and display stored data below form. Links to: Unit 6, 7

Project 4: Advanced Layout Design

Design responsive layout with multiple sections, cards, and interactive elements. Showcase responsive grid system and Bootstrap components. Links to: All Units

Project 5: E-Commerce Product Page

Build page with product cards, filters, shopping cart functionality using JavaScript and localStorage. Implement form validation and async operations.

Project 6: Interactive Dashboard

Create dashboard with charts, data from API (Fetch), form inputs, and dynamic content updates. Demonstrate async operations and DOM manipulation.

Key Concepts to Master

CSS Specificity: ID > Class > Element. Remember importance of proper selector usage.
Flexbox vs Grid: Flexbox for 1D layouts, Grid for 2D layouts. Practice both extensively.
ES6 Features: Arrow functions, destructuring, spread operator, template literals.
DOM Methods: querySelector > getElementById/getElementByClass for modern JS.
Promises vs Async/Await: Both are important; async/await is cleaner syntax.
Responsive Design: Mobile-first approach with media queries at 576px, 768px, 992px.
Bootstrap Grid: 12-column system; master col-sm, col-md, col-lg classes.
Form Validation: HTML5 validation + JavaScript validation for robust forms.

Exam Preparation Tips

Practice all 24+ practicals provided in syllabus thoroughly
Create your own projects combining multiple units
Focus on Bootstrap and JavaScript as weightage is higher (30% combined)
Understand WHY things work, not just HOW to code them
Test your code on different browsers and screen sizes
Write clean, commented code with proper indentation
Use developer tools (F12) to debug and inspect elements
Create a cheat sheet for common CSS and JS patterns
Practice time management - complete practicals within time limit
Focus on responsive design - most exams emphasize mobile compatibility

Total Hours: 30 hours (3 Lecture + 6 Practical/week)
Practical Evaluation: 24 practical problems + 5 project-based exercises