A web designer is essentially in a supporting role. He / She is supposed to have sound knowledge of design fundamentals and web production techniques. He / She is involved in the project at every stage, so that he / she understands the whole project cycle.

120 hours (2 months)
Center, Mobile, Online
KLiC Web Designing
₹ 5000/-
Course Fee is applicable all over India

Inclusive of Course fees, Examination fees and Certification fees. Terms and Conditions applicable. Click here
This course includes:
  • Language: English, Marathi
  • Duration: 120 hours (2 months)
  • Learning Mode: Center, Mobile, Online
  • Jurisdiction: Nationwide
  • Certificate of Completion

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

What does a Web Designer Do?

A web designer performs following functions:

  • Assists in project conceptualization
  • Creates workflows for developers and clients
  • Follows brand identity norms
  • Makes effective use of typography and images
  • Creates digital advertising assets (like banners, rollovers etc.)

What you'll learn ?

A web designing firm, IT companies or an advertising agency is one of the best places for a web designer, though he / she can also work with companies/enterprises working in multimedia, eLearning and gaming industry.

He / She can do a job or can work as a freelance designer. A fresher can draw up to Rs. 1.2 – 1.4 Lacs p.a.


He / She would work with a team of web designers and a creative director who would guide them. Typically, he / she would be a part of graphic designing / digital creations / content development team. He / She can further pursue to become a senior web designer or a User Interface / Experience designer as per his/her liking and abilities.


Typically a junior web designer uses tools like Adobe Dreamweaver, Adobe Flash, Adobe Photoshop. Knowledge of few other skills like JQuery, JQuery Mobile, and responsive web design will be an additional advantage for him/her.


  • 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).

Important Dates

  • Batch Commencement: One batch in each calendar month (January to December)
  • Date(s) of Application and Fee Payment by Learner: 1st - 30th day of each calendar month
  • Date(s) of Learner Confirmation by ALC: 1st - 30th day of each calendar month
  • Course Start Date and Date of Issuing Learner Login: Date of admission confirmation

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!

  • Understanding colors and related concepts
  • Getting introduced to typography and colors
  • Learning how to write and build content
  • Understanding what Client Briefs, Storyboards, Visual Mind Maps, and Marketing Plans
  • Learning more about client briefs, Storyboards, Visual Mind Maps, etc.
  • Learning about various designs and shapes
  • Understanding the basics of designs and shapes
  • Learning the basics of web designing
  • Learning to create a few website elements
  • Understanding the rules and guidelines for typography 
  • Using Fonts and optimizing typography 
  • Identifying color schemes and combinations 
  • Exploring more about colors and the trends 
  • Learning the basics of Adobe Bridge
  • Creating web-ready images by applying various effects in Adobe Photoshop 
  • Learning about a tool and creating a web layout in Adobe Photoshop 
  • Learning to automate and mask an image in Adobe Photoshop 
  • Learning to create a sitemap and wireframe for a website 
  • Identifying how and where to use a website wireframe 
  • Searching, downloading, and using free and copyright-free images 
  • Exploring stock platforms for images
  • Exploring the popular web designing tools 
  • Studying more about the web designing tools
  • Designing a user interface using Figma 
  • Adding content in the user interface using Figma 
  • Creating and working on a project in Figma 
  • Working with components and applying constraints in Figma 
  • Working with plugins in Figma 
  • Learning to prototype, share, and export a file in Figma 
  • Executing to prototype, share, and export a file in Figma 
  • Learning about UI, layouting, and grids 
  • Understanding what is UI and UX 
  • Exploring the field of UX and the 4 C's of designing
  • Exploring the competencies and techniques for smart and efficient working
  • Learning the basics of the Internet and related concepts 
  • Learning about browsers 
  • Understanding what a website and Email Client 
  • Exploring more about web designing and new features of Adobe Dreamweaver 
  • Using new features of Adobe Dreamweaver and discovering what a responsive website is
  • Learning the basics of HTML 
  • Exploring different types of Tags in HTML 
  • Working with texts and links in HTML 
  • Working with images in HTML 
  • Exploring the forms and understanding what XHTML is
  • Creating webpage using HTML and CSS 
  • Creating Navigation bar using CSS
  • Creating impressive webpages using HTML5, and CSS3 
  • Exploring and applying CSS Styles 
  • Working with CSS rules and AP elements 
  • Exploring what CSS3 is and using the CSS Designer Panel
  • Learning about JavaScript (Hello world! and variables) 
  • Learning about JavaScript (Conditional statements) 
  • Learning about JavaScript (JS loops) 
  • Learning about JavaScript (JS project)
  • Introduction to jQuery 
  • Learning more about jQuery 
  • Understanding the Events 
  • Understanding the animation effects and DOM Traversal and manipulation in jQuery Bootstrap
  • Understanding what a responsive web design is and developing it using Bootstrap 
  • Exploring the components of Bootstrap 
  • Discovering what Forms, Breakpoints, and Containers in Bootstrap are 
  • Understanding what Grid System is in Bootstrap 
  • Working with typography and images in Bootstrap 
  • Exploring the new concepts of typography and images while working in Bootstrap
  • Learning about the Bootstrap Homepage and other elements 
  • Exploring more about the Bootstrap 
  • Discovering and working with the About page in Bootstrap 
  • Discovering and working with the Contact page in Bootstrap 
  • Creating interactive buttons using Bootstrap 
  • Identifying various parts of a website and more
  • Getting introduced to what PHP is, its requirements, and creating a PHP file 
  • Working with PHP variables, operators, and statements 
  • Working with PHP loops, arrays, and more 
  • Learning the types of functions in PHP
  • Understanding the MySQL Databases and firebases 
  • Working with MySQL commands, databases, and statements 
  • Working with indexes and views, statements, and keywords in MySQL 
  • Exploring the procedures and types of Joins in MySQL 
  • Getting introduced to Firebase 
  • Authenticating Firebase and defining the project settings
  • Designing a responsive website using Adobe Dreamweaver 
  • Designing and editing a responsive website using Adobe Dreamweaver
  • Designing a website using CSS3 and applying the Fluid Grid Layout
  • Designing a wireframe for a product-based website - Case Study 
  • Using WordPress to design a product-based website - Case Study 
  • Customizing and completing a product-based website - Case Study
  • Starting with designing a social media website - Case Study 
  • Setting and customizing a social media website - Case Study 
  • Customizing a social media website - Case Study
  • Setting and adding pages to a website for a news channel - Case Study 
  • Customizing and post news on a website for a news channel - Case Study 
  • Posting and reviewing news articles on a website for a news channel - Case Study 
  • Designing an eCommerce website using WordPress
  • Creating a wireframe for a service-based website - Case Study 
  • Setting up and arranging content for an service-based website - Case Study 
  • Formatting and reviewing an service-based website - Case Study
  • Beginning to design a website for an eLearning company - Case Study 
  • Creating and customizing pages in a website for an eLearning company - Case Study 
  • Finalizing a website and buying a domain name for an eLearning company - Case Study
  • Beginning to design a website for an NGO 
  • Adding and customizing elements in a website for an NGO 
  • Finalizing the website design for an NGO
  • Starting with designing a website for a food outlet - Case Study 
  • Editing and customizing a website for a food outlet - Case Study
  • Designing a website using CSS - Case Study
  • Starting with the basics of domains, and web hosting 
  • Exploring more about web hosting and domain names
  • Understanding what Project Cycles are 
  • Discovering what Project Scope - Planning with the client 
  • Discovering what Project Scope - Building, Optimization, Finalization 
  • Discovering what Project Scope - Launch
  • Understanding more about the web designing field, processes, and getting job-ready 
  • Exploring more about your career in web designing 
  • Listing the types of web designers and how to create ideal resumes 
  • Getting introduced to the world of employment 
  • Understanding your options for career growth 
  • Exploring various career-building options in web designing
Adobe Photoshop

Skills: Working Place, Customizing, Image and Color Modifications, Case Study - Black & White to Color, Using the Brush and Paint, Working with Selections, Scaling, Knowing the Layers, Filter Gallery, Color Adjustments

Outputs: Web Layout Design, Web Banner, Advertisement, UI Design

Web Layout


Skills: Designing a user interface using Figma, Adding content in the user interface using Figma, Creating and working on a project in Figma, Working with components and applying constraints in Figma, Working with plugins in Figma, Learning to prototype, share, and export a file in Figma, Executing to prototype, share, and export a file in Figma

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