Advanced CSS & Front-End Design

Learn flexbox, grid, animations, and advanced selectors for modern responsive web design.

Advanced CSS & Front-End Design
Course Features:
  • Language: English
  • Duration: 30 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

  • Illustrate the proper use of padding, margin, height, and width properties to style HTML elements.
  • Configure Flexbox and CSS Grid containers and items to create flexible and adaptable page structures.
  • Navigate and modify HTML and CSS within browser DevTools to diagnose and resolve styling discrepancies.
  • Employ CSS properties such as box-shadow, text-shadow, border-radius, and background-image with gradients for rich visual effects.
  • Explain the core features and applications of JavaScript in client-side web development.
  • Declare and assign values to JavaScript variables, and apply arithmetic and logical operators in expressions.
  • Perform operations like slicing, shifting, sorting, pushing, and popping on JavaScript arrays.
  • Explain the components of the CSS Box Model (content, padding, border, margin) and its influence on element dimensions.
  • Format unordered and ordered lists using list-style-type, list-style-image, and list-style-position properties.
  • Combine knowledge of HTML structure, advanced CSS styling, and fundamental JavaScript scripting to build a multi-section web page.

What you'll learn ?

  • Apply foundational CSS properties to control spacing, sizing, and text formatting for appealing web page layouts.
  • Construct responsive web layouts using modern CSS Flexbox and Grid modules.
  • Analyze and debug CSS styling issues efficiently using browser developer tools.
  • Integrate advanced CSS techniques, including shadows, gradients, and animations, to enhance visual design.
  • Differentiate between scripting and programming languages, specifically understanding JavaScript's role in front-end development.
  • Implement basic JavaScript constructs, including variables, data types, and operators, to add interactivity to web pages.
  • Utilize JavaScript arrays to manage and manipulate collections of data effectively.
  • Evaluate different CSS Box Model configurations and their impact on element rendering.
  • Design aesthetically pleasing and functional web elements using CSS list properties.
  • Develop complete front-end web pages by combining HTML, advanced CSS, and introductory JavaScript concepts.

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:flex 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
  • Introduction to CSS List Properties
  • Properties of CSS List
  • CSS in Animation
  • CSS Grid
  • Introduction to DevTools
  • Debugging with DevTools
  • Editing HTML in the DevTools Elements panel
  • Enabling CSS in the DevTools
  • HTML_36_5_Disabling css in devtools
  • HTML_36_6_How to edit css in devtools
  • HTML_36_7_Console Basics
  • HTML_36_8_Elements Panel Basics
  • HTML_36_9_Best practices for using DevTools
  • what a 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 are 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

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:

  1. Learners who have successfully completed above mentioned 3 Sections i.e. Section 1, Section 2 and Section 3
  2. 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 30 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)
30 hours Rs. 300/- Rs. 1,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