Learn the basics of web design, including layout, color theory, and responsive principles.
Learning Mode: Learn at ALC or at Home
Detailed Course Curriculum
Hands-on module breakdown aligned with MKCL production standards and industry requirements.
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
Foundations of Digital Asset Management
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
Creating and working on a project
Adding content in the user interface
Working with components and applying constraints
Working with plugins
Learning to prototype, share, and export a file
Executing to prototype, share, and export a file
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
Exploring Advanced Web Design Techniques with Cutting-Edge Tools
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
Introduction to jQuery
jQuery Jumpstart
Learning more about jQuery
Understanding the Events and Event Handling in jQuery
Manipulating DOM Elements
Understanding the animation effects and DOM Traversal and manipulation
Animating with jQuery
Understanding what a responsive web design is and developing it using Bootstrap
Exploring the components of Bootstrap
Designing with Bootstrap
Discovering what Forms, Breakpoints, and Containers in Bootstrap are
Understanding what Grid System is in Bootstrap
Navigating Bootstrap
Working with typography and images in Bootstrap
Exploring the new concepts of typography and images while working in Bootstrap
Enhanced UI Experience
Learning about the Bootstrap Homepage and other elements
Exploring more about the Bootstrap Homepage with examples
Bootstrap’s Spacing Tactics
Discovering and working with the About page in Bootstrap
Discovering and working with the Contact page in Bootstrap
Optimizing Layouts
Creating interactive buttons using Bootstrap
Identifying various parts of a website and more
Bootstrap’s Text and Color Toolkit
Getting introduced to what PHP is, its requirements, and creating a PHP file
Navigating PHP Basics
Working with PHP variables, operators, and statements
PHP Forms and Data Handling
Working with PHP loops, arrays, and more
Initiating OOP in PHP
Learning the types of functions in PHP
User Data Control
Understanding the MySQL Databases and firebases
Working with MySQL commands, databases, and statements
MySQL’s Functionality
Eligibility Criteria
• Basic knowledge of computers and keen desire to build skills in this field.
• Open to students, job seekers, and working professionals.
Official Certification
• Official MKCL KLiC Certificate upon successful completion of the course and evaluations.
Work-Centric Learning Approach
• 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!
Ready to start Web Design 101?
Join our upcoming batch at ZICA Kalyani center with certified instructors.
MKCL Certified Program
Admissions Open 2026
Flexible Offline & Hybrid Batches
Course Overview
Duration:90 hours
Track:Digital Designing
Skill Level:Intermediate
Language:English
Mode:Learn at ALC or at Home
Certificate:Official MKCL
Key Course Highlights:
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
Interpret jQuery fundamentals and assess its significance in modern web development
Illustrate Events and Event Handling mechanisms in jQuery
Demonstrate DOM manipulation skills using jQuery for dynamic webpage interactions
Explain animation effects and DOM traversal techniques in jQuery to enhance user experience
Compare Bootstrap components for responsive web design
Report on Forms, Breakpoints and Containers functionality in Bootstrap
Evaluate Bootstrap’s Grid System effectiveness in layout design
Discover typography and image concepts in Bootstrap and assess their impact
Construct enhanced UI experiences using Bootstrap elements like the Homepage
Analyze Bootstrap’s Spacing Tactics and propose improvements
Appraise Bootstrap’s About and Contact page design and functionality
Examine the layout optimization techniques using Bootstrap
Identify and troubleshoot challenges in creating interactive buttons with Bootstrap
Integrate various website components using Bootstrap
Examine Bootstrap’s Text and Color Toolkit for website design effectiveness