Web Design 101
Track Digital Designing
Duration 90 hours
Skill Level Intermediate
Language English

About this Course

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.