Track
Software Development
Duration
60 hours
Skill Level
Advanced
Language
English
About this Course
Build responsive, interactive front-end designs using advanced web styling techniques.
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: flexbox 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
- Text alignment and Text indent in CSS
- CSS Text Decoration
- Text color property in CSS
- Text Shadow property in CSS
- Letter spacing word spacing line height
- assisted demo of formatting text using CSS
- assisted demo on decoration and transformation
- Introduction to CSS List Properties
- Properties of CSS List
- CSS in Animation
- understanding grid
- why grid is used in web pages
- defining grid in CSS its syntax with explanation
- grid container and grid item
- assisted demo on CSS grid
- Introduction to DevTools
- Debugging with DevTools
- Editing HTML in the DevTools Elements panel
- Enabling CSS in the DevTools
- Disabling CSS in DevTools
- How to edit CSS in DevTools
- Console Basics
- Elements Panel Basics
- Best practices for using DevTools
- what an 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 is 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
- what are loops in computer programming
- how programmer can save their time by using loops
- types of loops
- loop control statements
- a program with and without loops
- what are flow charts
- understanding initialization and test condition
- understanding increment/ decrement of loop count
- Explanation of Each loop with the variables and Conditions
- Assisted demo on loops
- benefits of using loops in JavaScript and working with loop in JavaScript
- Conditional Statements
- JavaScript switch statement
- Types of Loops_1
- Types of Loops_2
- For loop in JavaScript
- Nested for Loop in JavaScript
- Assisted demo for For loop
- Assisted demo for while loop
- defining functions
- purpose of functions
- Function Declaration and placement - I
- Function Declaration and placement - II
- Built in functions - Part 1
- Built in functions - Part 2
- User-defined Function - I
- User-defined Function - II
- recursive function
- assisted demo on function
- passing of parameters
- Scope of variable, return values - Part 1
- Scope of variable, return values - Part 2
- function type
- call () method
- apply () function
- closure
- return multiple value
- arrow function
- callback
- tips for arrow function
- immediately invoked function expression
- Working of a dialog box
- alert dialog box
- prompt dialog box
- confirm dialog box
- assisted demo to show: alert, prompt and confirm dialog box
- Creating custom dialog boxes
- Assisted demo on Custom dialog boxes
- Definition of Class
- Declaration of Class
- abstract class
- definition of object
- Declaration of Objects
- Initializing an object
- Access modifiers
- Member Functions and data member
- Declaring the classes with the corresponding object and members
- Introduction, JavaScript instance hierarchy
- document object
- JSSS DOM
- properties of objects in HTML
- methods of HTML objects
- how JavaScript objects are created
- JavaScript innerHTML property
- JavaScript innerText property
- Different JavaScript objects and their uses
- form object, methods of the form element, properties of form object
- Form elements: description and syntax
- Methods of form elements: form element name, method name and description
- Assisted demo on form element
- Association of JavaScript with HTML form’s GUI control
- Understanding built in objects in JavaScript
- Built in objects in JavaScript: string object, math object, date object
- User defined object, how to create a user defined object
- Text element, Text area element, Password element
- Button element, submit button & Reset button element
- Checkbox element, Radio element
- Select and option element
- Demo on Button element
- JavaScript Reflect, Reflect.apply() method, Reflect.construct() method
- Reflect.defineProperty() method, Reflect.deleteProperty() method, Reflect.get() method
- getOwnPropertyDescriptor() method, Reflect.getPrototypeOf() method, Reflect.has() method
- Defining cookie
- How cookies are used in web pages
- Benefits of using cookie in web page
- JavaScript cookie
- How to set cookie
- Cookie attribute
- Cookie with multiple names
- How to delete cookie
- Assisted demo on: use of cookie
- changing HTML style
- ways to manipulate CSS with JavaScript
- HTML DOM Style Object Reference
- working with the document’s list of stylesheets—for example: adding, removing or modifying a stylesheet.
- working with the rules in a stylesheet—for example: adding, removing or modifying a rule
- working with an individual element in the DOM—modifying its style independently of the document’s stylesheets
- assisted demo on document’s list of stylesheets
- assisted demo on working with the rules in a stylesheet
- assisted demo on working with an individual element in the DOM
- JavaScript object, JavaScript class
- JavaScript prototype
- JavaScript inheritance
- JavaScript polymorphism
- JavaScript abstraction
- JavaScript encapsulation
- JavaScript construct method
- JavaScript static method
- Inheritance their terminology and types
- types of inheritance with flowchart
- Facts to remember in inheritance
- Implicit Inheritance
- Explanation of all types of inheritance with example
- Definition of Polymorphism and their types
- Static Polymorphism vs dynamic polymorphism
- Function Overloading & Operator Overloading
- Demo on Function Overloading & Operator Overloading
- Basics of Abstraction in JavaScript
- Introduction to Encapsulation in JavaScript
- Differences between Abstraction and Encapsulation
- How to Implement Abstraction in JavaScript
- How to Implement Encapsulation in JavaScript
- Understanding of form validation
- Checking forms in JavaScript - Part 1
- Checking forms in JavaScript - Part 2
- Working with forms: Client-Side Form Validation-Part 1
- Working with forms: Client-Side Form Validation-Part 2
- Understanding about form enhancement
- Auto tabbing between fields of form
- Auto tabbing between fields of form part-2
- Trimming Spaces from Beginning and End of Fields
- Selecting All the Content of a Text Area
- Check and Uncheck All Checkboxes
- Disabling a text input and case conversion
- Disabling a text input and case conversion part 2
- Assisted Demo on Validation
- What are libraries, use of libraries
- Libraries of JavaScript
- jQuery library-1
- jQuery library-2
- Lodash Library-1
- Lodash Library-2
- Assisted Demo on jQuery library
- Assisted Demo on Lodash library
- Canvas: painting and animation
- Local storage: saving things, browser support and limitations
- How to handle error and exception
- What is GitHub
- How to upload pages on GitHub
- How GitHub pages works
- How to: set up a domain name, Get a new domain name
- How to setup a DNS
- How to find the IP addresses of GitHub Pages
- How to set up www subdomain with CNAME
- How to link domain name in GitHub Pages
- How to set up HTTPS for free in GitHub Pages
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 HTML and CSS?
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