Track
Software Development
Duration
30 hours
Skill Level
Intermediate
Language
English
About this Course
Learn flexbox, grid, animations, and advanced selectors for modern responsive web design.
Learning Mode: Learn at ALC or at Home
Detailed Course Curriculum
Hands-on module breakdown aligned with MKCL production standards and industry requirements.
- 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
Eligibility Criteria
• Basic knowledge of computers and keen desire to build skills in this field.
• Open to students, job seekers, and working professionals.
• 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!
• 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 Advanced CSS & Front-End Design?
Join our upcoming batch at ZICA Kalyani center with certified instructors.
Other MKCL Courses
-
Python
120 hours -
Mobile App Development
120 hours -
Advanced C# Programming Techniques
30 hours -
Advanced Concepts of C#
60 hours