- In this activity, you will be able to:
- Classify fundamental concepts in design, such as color theory and typography, into appropriate categories to enhance understanding and application
- Describe client briefs and design projects comprehensively to ensure precise understanding and communication among team members
- Identify essential design elements like fonts and colors to establish cohesive and impactful compositions
- Organize design assets and project files systematically for streamlined workflow and easier access
- Reorganize design layouts and structures to optimize visual flow and user engagement
- Summarize the outcomes of color scheme evaluations to support informed design choices
- Explain the advantages and limitations of various design methodologies to steer project strategies effectively
- Explain the process of developing user interfaces with tools like Figma, emphasizing crucial techniques and best practices
- Compare different design tools and software to select the best options tailored to specific project needs
- Report on the performance of design projects, highlighting key achievements and identifying potential improvements
- Classify UI components, layout techniques, and grid systems to develop effective design strategies
- Organize the sitemap to streamline website navigation and enhance user experience efficiency
- Distinguish between UI and UX principles to clarify design focus and application
- Identify the UX principles of the 4Cs of designing to better integrate user-centered design approaches
- Explain methods to foster creativity in web design, highlighting innovative approaches and techniques
- Demonstrate how to utilize plugins in Figma to accelerate and enhance design workflows
- Examine internet-related concepts essential for web development to deepen understanding and implementation
- Apply collaborative tools and methods in team projects to improve efficiency and communication
- Demonstrate the creation of responsive websites using Adobe Dreamweaver, focusing on adaptive design techniques
- Estimate the skills necessary for web designing, assessing required competencies and learning paths
- Explain the fundamentals of HTML and its evolution into XHTML, covering historical and technical perspectives
- Apply HTML tags effectively in the construction of web pages to build foundational web content
- Demonstrate techniques for managing text, links, and images in HTML ensuring content is accessible and well-organized
- Diagnose browser compatibility issues with HTML and CSS proposing solutions to enhance cross-browser functionality
- Categorize media integration challenges using HTML5 and CSS3 preparing learners to tackle advanced web design problems

WebCraft Fundamentals
Get introduced to web technologies like HTML, CSS, and basic JavaScript for site creation.
Introduction
What you'll learn ?
- By the end of this activity, you will be able to:
- Interpret and illustrate fundamental concepts in the world of design including color theory and typography
- Review and reinterpret client briefs into compelling narratives for effective communication in design projects
- Compare and contrast various design elements such as fonts, colors, and shapes, to create visually appealing compositions
- Examine and assess different color schemes and combinations to enhance the aesthetic appeal of design projects
- Construct and develop web layouts using Adobe Photoshop, utilizing various effects to create engaging visuals
- Identify and utilize appropriate tools such as Adobe Bridge for efficient management of design assets
- Construct and devise sitemaps and wireframes to plan and prepare website structures effectively
- Develop and generate user interfaces using Figma, incorporating components and constraints for streamlined design processes
- Assess and evaluate design projects for efficiency and effectiveness in achieving desired outcomes
- Formulate some recommend improvements in design processes to enhance efficiency and creativity in design projects
- Classify UI components, layout techniques, and grid systems to enhance interface efficiency and design appeal
- Organize the sitemap to streamline navigation and improve user experience
- Distinguish between UI and UX principles to clarify their use and impact on user interaction
- Identify the UX principles of the 4Cs to better integrate user-centered design
- Explain methods to boost creativity in web design using innovative approaches
- Demonstrate the use of Figma plugins to speed up and improve design workflows
- Examine key internet concepts essential for web development and their practical implications
- Apply collaborative tools in team projects to enhance communication and efficiency
- Demonstrate building responsive websites with Adobe Dreamweaver focusing on adaptive design
- Estimate the skills needed for web designing, detailing a learning path for skill development
- Explain the basics of HTML and its development into XHTML enhancing foundational knowledge
- Apply HTML tags effectively to create functional and accessible web content
- Demonstrate techniques for managing text, links and images in HTML for better content organization
- Diagnose browser compatibility issues in HTML and CSS offering solutions for universal web access
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
- Understanding colors and related concepts
- Getting introduced to typography and colors
- Font Essence and color dynamics
- Learning how to write and build content
- Understanding what Client Briefs, Storyboards,
- Visual Mind Maps, and Marketing Plans are
- Clear and Captivating Narratives
- Learning more about client briefs, storyboards, visual mind maps, etc.
- Learning about various designs and shapes
- Understanding the basics of designs and shapes
- Shapes in Design
- Learning the basics of web designing
- Learning to create a few websites elements
- Demystifying Web Design
- Understanding the rules and guidelines for typography
- Using Fonts and optimizing typography
- Mastering Web Fonts
- Identifying color schemes and combinations
- Exploring more about colors and the trends
- Types of Color Schemes
- Learning the basics of Adobe Bridge
- Creating web-ready images by applying various effects
- Learning about a tool and creating a web layout
- Learning to automate and mask an image
- 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
- Designing a user interface using Figma
- Creating and working on a project in Figma
- Adding content in the user interface using 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
- Understanding what UI and UX are and the difference Between both
- Exploring the field of UX and the 4 Cs of designing
- Steps for using plugins in Figma
- Exploring more about web designing and new features
- 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
- Mastering HTML Basics
- 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
- CSS Core and Styling
- Creating Navigation bar using CSS
- Creating impressive webpages using HTML5, and CSS3
- CSS Layout Dynamics
- Exploring and applying CSS Styles
- Responsive Styling Techniques
- Working with CSS rules and AP elements
- CSS Animation Essentials
- Exploring what CSS3 is and using the CSS Designer Panel
- Learning about JavaScript (Hello world! and variables)
- Mastering JavaScript Fundamentals
- Learning about JavaScript (Conditional statements)
- Learning about JavaScript (JS loops)
- Learning about JavaScript (JS project)
- JavaScript Elements
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/- |
* 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/- |
* 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