Advanced HTML and CSS

Build responsive, interactive front-end designs using advanced web styling techniques.

Course Features:

Language: English
Duration: 60 hours (1 month)
Learning Mode: Center
Jurisdiction: Maharashtra
Certificate of Completion

Eligibility

Learner should preferably a std. 10th Pass student (Not Compulsory)
It is desirable that Learner should have done MS-CIT Course (Not Compulsory)

List of ALCs

Introduction

CSS Fundamentals and Advanced Design
Master CSS basics, including padding, box model, height, and width.
Explore advanced CSS features like flexbox, grid layouts, animations, and transitions.
Optimize web pages for responsiveness across devices.
JavaScript Fundamentals and Advanced Concepts
Understand JavaScript basics, including data types, operators, loops, and functions.
Learn advanced concepts like closures, callbacks, OOP principles, and libraries such as jQuery and Lodash.
Manipulate the DOM dynamically and handle forms with validation techniques.
Debugging and Deployment
Use browser DevTools for debugging and real-time editing of HTML and CSS.
Learn to deploy secure web pages using GitHub and manage domains effectively.
Real-World Application
Combine CSS and JavaScript to build interactive, dynamic, and responsive web projects.
Apply skills through case studies and practical assignments.
This combined summary integrates both credits into a streamlined and focused set of objectives.

What you'll learn ?

Proficiency in CSS
Design responsive and visually appealing websites using CSS fundamentals and advanced features like flexbox, grid, and animations.
JavaScript Expertise
Build dynamic and interactive web pages using JavaScript for scripting, DOM manipulation, and form validation.
Implement advanced concepts like closures, callbacks, OOP, and libraries (e.g., jQuery, Lodash).
Debugging Skills
Effectively debug and edit web pages using browser DevTools.
Identify and resolve issues in HTML, CSS, and JavaScript code.
Project Development
Apply skills to create professional, real-world projects with optimized and responsive designs.
Implement best practices for coding, testing, and deploying web applications.
Deployment Proficiency
Deploy secure, functional websites using GitHub and manage domains effectively.
These outcomes emphasize practical skills and professional readiness for web development.

Certification

KLiC courses are recognised by Yashwantrao Chavan Maharashtra Open University (YCMOU).
MKCL provides certificate to the KLiC learner after his/her successful course completion.
Yashwantrao Chavan Maharashtra Open University (YCMOU) provides mark sheet to successfully passed KLiC learners (Jurisdiction: Maharashtra).

Academic Approach

The academic approach of the courses focuses on the “work-centric” education i.e. begin with work (and not from a book!), derive knowledge from work and apply that knowledge to make the work more wholesome, useful and delightful. The ultimate objective is to empower the Learner to engage in socially useful and productive work. It aims at leading the learner to his/her rewarding career as an employee or entrepreneur as well as development of the community to which s/he belongs. Learning methodology:

Step -1: Learners are given an overview of the course and its connection to life and work.
Step -2: Learners are exposed to the specific tool(s) used in the course through the various real-life applications of the tool(s).
Step -3: Learners are acquainted with the careers and the hierarchy of roles they can perform at workplaces after attaining increasing levels of mastery over the tool(s).
Step -4: Learners are acquainted with the architecture of the tool or tool map so as to appreciate various parts of the tool, their functions, utility and inter-relations.
Step -5: Learners are exposed to simple application development methodology by using the tool at the beginner’s level.
Step -6: Learners perform the differential skills related to the use of the tool to improve the given ready-made industry-standard outputs.
Step -7: Learners are engaged in appreciation of real-life case studies developed by the experts.
Step -8: Learners are encouraged to proceed from appreciation to imitation of the experts.
Step -9: After the imitation experience, they are required to improve the expert’s outputs so that they proceed from mere imitation to emulation.
Step-10: Emulation is taken a level further from working with differential skills towards the visualization and creation of a complete output according to the requirements provided. (Long Assignments)
Step-11: Understanding the requirements, communicating one’s own thoughts and presenting are important skills required in facing an interview for securing a work order/job. For instilling these skills, learners are presented with various subject-specific technical as well as HR-oriented questions and encouraged to answer them.
Step-12: Finally, they develop the integral skills involving optimal methods and best practices to produce useful outputs right from scratch, publish them in their ePortfolio and thereby proceed from emulation to self-expression, from self-expression to self-confidence and from self-confidence to self-reliance and self-esteem!

Syllabus

what is padding
understanding why padding is use
properties of padding

adding padding inside a div
assisted demo on padding
CSS padding vs margin
padding of individual slide
shorthand property
CSS padding order

Units of measurement and CSS height Property
CSS height property
Maximum height and Minimum height

width of an element
values of width
how to set minimum width
how to set maximum width
assisted demo on height and width of an element

understanding flexbox in CSS
flexbox layout model (recorrect: flexbox layout module)
lex elements (recorrect: flexbox elements)
flex directory (recorrect: flex-direction)
properties of flex container(recorrect)
Properties of Flex Items(recorrect)
what is a responsive flex
responsive flex with illustration
assisted demo on flexbox in CSS

what is box model
parts of box model and its explanation
what is the use of box model
box model and inline boxes
understanding CSS box model
assisted demo on box model
size of the box and their properties
important points to remember
box model vs flex model

Text alignment and Text indent in CSS
CSS Text Decoration
Text color property in CSS
Text Shadow property in CSS
Letter spacing word spacing line height
assisted demo of formatting text using CSS
assisted demo on decoration and transformation

Introduction to CSS List Properties
Properties of CSS List

CSS in Animation

understanding grid
why grid is used in web pages
defining grid in CSS its syntax with explanation
grid container and grid item
assisted demo on CSS grid

Introduction to DevTools
Debugging with DevTools

Editing HTML in the DevTools Elements panel
Enabling CSS in the DevTools
Disabling CSS in DevTools
How to edit CSS in DevTools
Console Basics
Elements Panel Basics
Best practices for using DevTools

what an advanced CSS can do to a website, CSS variable and how to use them
box shadow, inner shadow, text shadow
attributes of box shadow, inner shadow, text shadow
rounded corners, border radius and multiple values, ellipse
applying multiple backgrounds and define origin of background
creating smooth animation
Targeting boxes by their elements’ HTML attributes
Linear and radial gradients without image files
Optimizing pages for different devices and screen sizes

Scripting language
scripting language vs programming language

features of JavaScript
history of JavaScript
applications of JavaScript
comments on JavaScript
external JavaScript
JavaScript variable
global variables

What JavaScript do to web pages
Inserting JavaScript in HTML file
Database connectivity
client-side JavaScript
Capturing input from the user
advantages of JavaScript

Defining JavaScript in web pages
how to write JavaScript into HTML
assisted demo on writing JavaScript in HTML

understanding data types
understanding literals
number, Boolean, string, null with example
type casting
creating variables

what is array, operations on array: slicing, shifting, sorting, push, pop
array in JavaScript
elements of array
assisted demo on JavaScript array

introduction to operators and expression
Operators and their types
Arithmetic Operators
Relational Operators
Logical & Bitwise Operators
Assignment & Conditional Operators
Equality and Shift Operators
types of operators: string, assignment operators
assisted demo on: operators

what are loops in computer programming
how programmer can save their time by using loops
types of loops
loop control statements
a program with and without loops
what are flow charts

understanding initialization and test condition
understanding increment/ decrement of loop count
Explanation of Each loop with the variables and Conditions
Assisted demo on loops

benefits of using loops in JavaScript and working with loop in JavaScript
Conditional Statements
JavaScript switch statement
Types of Loops_1
Types of Loops_2

For loop in JavaScript
Nested for Loop in JavaScript
Assisted demo for For loop
Assisted demo for while loop

defining functions
purpose of functions
Function Declaration and placement - I
Function Declaration and placement - II

Built in functions - Part 1
Built in functions - Part 2
User-defined Function - I
User-defined Function - II
recursive function
assisted demo on function

passing of parameters
Scope of variable, return values - Part 1
Scope of variable, return values - Part 2

function type
call () method
apply () function
closure
return multiple value
arrow function
callback
tips for arrow function
immediately invoked function expression

Working of a dialog box

alert dialog box
prompt dialog box
confirm dialog box
assisted demo to show: alert, prompt and confirm dialog box
Creating custom dialog boxes
Assisted demo on Custom dialog boxes

Definition of Class
Declaration of Class
abstract class

definition of object
Declaration of Objects
Initializing an object

Access modifiers
Member Functions and data member
Declaring the classes with the corresponding object and members

Introduction, JavaScript instance hierarchy
document object
JSSS DOM
properties of objects in HTML
methods of HTML objects
how JavaScript objects are created
JavaScript innerHTML property
JavaScript innerText property

Different JavaScript objects and their uses
form object, methods of the form element, properties of form object

Form elements: description and syntax
Methods of form elements: form element name, method name and description
Assisted demo on form element

Association of JavaScript with HTML form's GUI control
Understanding built in objects in JavaScript
Built in objects in JavaScript: string object, math object, date object
User defined object, how to create a user defined object

Text element, Text area element, Password element
Button element, submit button & Reset button element
Checkbox element, Radio element
Select and option element
Demo on Button element

JavaScript Reflect, Reflect.apply() method, Reflect.construct() method
Reflect.defineProperty() method, Reflect.deleteProperty() method, Reflect.get() method
getOwnPropertyDescriptor() method, Reflect.getPrototypeOf() method, Reflect.has() method

Defining cookie
How cookies are used in web pages
Benefits of using cookie in web page

JavaScript cookie
How to set cookie
Cookie attribute
Cookie with multiple names
How to delete cookie
Assisted demo on: use of cookie

changing HTML style
ways to manipulate CSS with JavaScript
HTML DOM Style Object Reference
working with the document’s list of stylesheets—for example: adding, removing or modifying a stylesheet.
working with the rules in a stylesheet—for example: adding, removing or modifying a rule
working with an individual element in the DOM—modifying its style independently of the document’s stylesheets
assisted demo on document’s list of stylesheets
assisted demo on working with the rules in a stylesheet
assisted demo on working with an individual element in the DOM

JavaScript object, JavaScript class
JavaScript prototype
JavaScript inheritance
JavaScript polymorphism
JavaScript abstraction
JavaScript encapsulation
JavaScript construct method
JavaScript static method

Inheritance their terminology and types
types of inheritance with flowchart
Facts to remember in inheritance
Implicit Inheritance
Explanation of all types of inheritance with example

Definition of Polymorphism and their types
Static Polymorphism vs dynamic polymorphism
Function Overloading & Operator Overloading
Demo on Function Overloading & Operator Overloading

Basics of Abstraction in JavaScript

Introduction to Encapsulation in JavaScript

Differences between Abstraction and Encapsulation
How to Implement Abstraction in JavaScript
How to Implement Encapsulation in JavaScript

Understanding of form validation
Checking forms in JavaScript - Part 1
Checking forms in JavaScript - Part 2
Working with forms: Client-Side Form Validation-Part 1
Working with forms: Client-Side Form Validation-Part 2
Understanding about form enhancement
Auto tabbing between fields of form
Auto tabbing between fields of form part-2
Trimming Spaces from Beginning and End of Fields
Selecting All the Content of a Text Area
Check and Uncheck All Checkboxes
Disabling a text input and case conversion
Disabling a text input and case conversion part 2
Assisted Demo on Validation

What are libraries, use of libraries
Libraries of JavaScript
jQuery library-1
jQuery library-2
Lodash Library-1
Lodash Library-2
Assisted Demo on jQuery library
Assisted Demo on Lodash library

Canvas: painting and animation
Local storage: saving things, browser support and limitations
How to handle error and exception

What is GitHub
How to upload pages on GitHub
How GitHub pages works

How to: set up a domain name, Get a new domain name
How to setup a DNS
How to find the IP addresses of GitHub Pages
How to set up www subdomain with CNAME
How to link domain name in GitHub Pages
How to set up HTTPS for free in GitHub Pages

Evaluation Pattern

Evaluation Pattern of KLiC Courses consists of 4 Sections as per below table:

Section No.	Section Name	Total Marks	Minimum Passing Marks
1	Learning Progression	25	10
2	Internal Assessment	25	10
3	Final Online Examination	50	20
	Total	100	40
4	SUPWs (Socially Useful and Productive Work in form of Assignments)	5 Assignments	2 Assignments to be Completed & Uploaded

YCMOU Mark Sheet

Printed Mark Sheet will be issued by YCMOU on successful completion of Section 1, Section 2 and Section 3 and will be delivered to the learner by MKCL.
YCMOU Mark Sheet will be available only for Maharashtra jurisdiction learners

MKCL's KLiC Certificate

The certificate will be provided to the learner who will satisfy the below criteria:

Learners who have successfully completed above mentioned 3 Sections i.e. Section 1, Section 2 and Section 3
Additionally, learner should have completed Section 4 (i.e. Section 4 will comprise of SUPWs i.e. Socially Useful and Productive Work in form of Assignments)
- Learner has to complete and upload minimum 2 out of 5 Assignments

Courses Fee Structure from 01 July, 2025 Onwards

KLiC 60 hour course fee applicable from 01 July, 2025 all over Maharashtra

KLiC Course Duration	MFO (Inclusive of GST)	ALC Share (Service Charges to be collected by ALC)
60 hours	Rs. 500/-	Rs. 2,500/-

Important Points:
* Above mentioned fee is applicable for all Modes of KLiC Courses offered at Authorised Learning Center (ALC) and at Satellite Center
* Total fee is including of Course fees, Examination fees and Certification fees
* MKCL reserves the right to modify the Fee anytime without any prior notice

KLiC Courses Fee Structure upto 30 June, 2025

Region	Total Fee (Rupees)
MMRDA, PMRDA and Rest of Maharashtra	3000/-