4.
FULL STACK DEVELOPMENT Track
Course Code Course name L T P C
CSFS2003P Frontend Development 4 0 0 4
Total Units to be Covered: 05 Total Contact Hours: 60
Basic knowledge of HTML and CSS, Familiarity with
Prerequisite(s): Syllabus version: 1.0
JavaScript fundamentals
Course Objectives
1. Understand the fundamentals of web development and front-end technologies.
2. Design and develop responsive web pages using HTML and CSS.
3. Build interactive web applications using JavaScript.
4. Utilize front-end frameworks and libraries to streamline development processes.
5. Implement best practices for accessibility and usability in web design.
6. Optimize web performance and user experience.
7. Collaborate effectively with backend developers and designers.
Course Outcomes
On completion of this course, the students will be able to
CO1: Understand Web Development Fundamentals
CO2: Create and build web pages and applications.
CO3: Utilize front-end frameworks and optimize web performance.
CO4: Apply security best practices and conduct testing.
CO5: Demonstrate project development skills.
CO-PO Mapping
Program
Outcomes
Course PO1 PO2 PO3 PO4 PO5 PO6 PO7 PO8 PO9 PO10 PO11 PO12 PSO1 PSO2 PSO3
Outcomes
CO 1 - - - - 3 - - - 1 - - - - - -
CONFIDENTIAL | 346
CO 2 - - - - 2 - - - - - - - - - -
CO 3 - - - - 1 - - - - - - - - - -
CO4 - - - - 2 - - - - - - - - - -
- - - - - - - - - - -
CO5 2 2 2 2
- - - - - - - - - - -
Average 0.4 2 0.6 0.4
1 – Weakly Mapped (Low) 2 – Moderately Mapped (Medium)
3 – Strongly Mapped (High) “_” means there is no correlation
Syllabus
Unit I: Introduction to Frontend Development, Web Design 12 Lecture Hours
Overview of web development and frontend technologies, Introduction to development
environments (IDEs, text editors, browser developer tools), HTML5 essentials: tags,
attributes, semantic markup, CSS fundamentals: selectors, box model, layout
techniques, Introduction to responsive web design principles, CSS media queries and
viewport settings, Flexbox and CSS Grid for flexible layouts, Introduction to Bootstrap
or other CSS frameworks
Unit II: JavaScript and Web Optimization 12 Lecture
Hours
Introduction to JavaScript: variables, data types, control flow, Functions and scope,
DOM manipulation and event handling, Introduction to jQuery or other JavaScript
libraries, Working with arrays and objects, Asynchronous programming and AJAX,
Introduction to ES6+ features (arrow functions, modules, etc.), Introduction to modern
JavaScript frameworks (React, Vue.js, Angular), Understanding web performance
metrics, Techniques for optimizing CSS and JavaScript, Asset optimization (images,
fonts, etc.), Introduction to caching and CDNs
Unit III: Frontend: Building and Testing 12 Lecture Hours
Introduction to task runners (Gulp, Grunt) or bundlers (Webpack, Parcel), CSS
preprocessors (Sass, Less) for enhanced styling, Introduction to version control
systems (Git), Accessibility and Usability, Principles of web accessibility, Techniques
for creating accessible web content, Usability best practices and user-centered design
principles, Introduction to frontend testing frameworks (Jest, Mocha), Unit testing and
integration testing, Testing user interfaces and interactions.
CONFIDENTIAL | 347
Unit IV: JSX and Redux 12 Lecture Hours
Why JSX, Embedding JavaScript, Expression in JSX, JSX as an Expression, Nested
elements in JSX, JSX, Attributes, JSX Comments, JSX Styling and representation as
object, The State of the Component, Defining State, Changing the State, Props,
Validation, Validators, Elements, Rendering Element, About render (), Creating React
Element, Updating Element, components, Introducing Components, Types of
Components, Functional Component, Functional Components as Stateless, Using
Functional Component, Redux Concepts, Redux Principles, Data Flow, Actions,
Functions, Reduces, Testing , Dev-Tools, React & Redux Integrate.
Unit V: Web Security 12 Lecture Hours
Introduction to web security principles, SPA frameworks, authentication and
authorization systems, API analysis, detecting frameworks and libraries, Common
Security Issues (eg. Cross-Site Scripting, CSRF, XXE, Injection), Common
Countermeasures (e.g., Authentication, Authorization, HTTPS), securing web
applications, reviewing code for security, vulnerability discovery and management,
Web Application Firewalls.
Total lecture Hours 60
Textbooks
1. Stefan Baumgartner, “Front End Tooling with Gulp”, Manning Publication.
2. “HTML5 Black Book”, Dreamtech Publications, 2016.
3. Ben Frain, “Responsive Web Design with HTML5 and CSS”, 4 th Edition, Packt
Publication, 2022.
Reference Books
Modes of Evaluation: Quiz/Assignment/ presentation/ extempore/ Written
Examination
Examination Scheme
Components IA MID SEM End Sem Total
Weightage (%) 50 20 30 100
Detailed breakup of Internal Assessment
CONFIDENTIAL | 348
Internal Assessment Weightage in calculation of Internal
Component Assessment (100 marks)
Quiz 1 15%
Quiz 2 15%
Class Test 1 15%
Class Test 2 15%
Assignment 1/Project 20%
Assignment 2/Project 20%
CONFIDENTIAL | 349
