Advanced HTML and CSS

Build responsive, interactive front-end designs using advanced web styling techniques.

Search Centers Visit Site
Advanced HTML and CSS showcase image
Track
Software Development
Level
Advanced
Language
English
Duration
60 hours
Learning Mode
Learn at ALC or at Home
Introduction
What you'll learn ?
Syllabus
Work-Centric Approach

Introduction

  • CSS Fundamentals and Advanced Design
  • Master CSS basics, including padding, box model, height, and width.
  • Explore advanced CSS features like flexbox, grid layouts, animations, and transitions.
  • Optimize web pages for responsiveness across devices.
  • JavaScript Fundamentals and Advanced Concepts
  • Understand JavaScript basics, including data types, operators, loops, and functions.
  • Learn advanced concepts like closures, callbacks, OOP principles, and libraries such as jQuery and Lodash.
  • Manipulate the DOM dynamically and handle forms with validation techniques.
  • Debugging and Deployment
  • Use browser DevTools for debugging and real-time editing of HTML and CSS.
  • Learn to deploy secure web pages using GitHub and manage domains effectively.
  • Real-World Application
  • Combine CSS and JavaScript to build interactive, dynamic, and responsive web projects.
  • Apply skills through case studies and practical assignments.
  • This combined summary integrates both credits into a streamlined and focused set of objectives.

What you'll learn ?

  • Proficiency in CSS
  • Design responsive and visually appealing websites using CSS fundamentals and advanced features like flexbox, grid, and animations.
  • JavaScript Expertise
  • Build dynamic and interactive web pages using JavaScript for scripting, DOM manipulation, and form validation.
  • Implement advanced concepts like closures, callbacks, OOP, and libraries (e.g., jQuery, Lodash).
  • Debugging Skills
  • Effectively debug and edit web pages using browser DevTools.
  • Identify and resolve issues in HTML, CSS, and JavaScript code.
  • Project Development
  • Apply skills to create professional, real-world projects with optimized and responsive designs.
  • Implement best practices for coding, testing, and deploying web applications.
  • Deployment Proficiency
  • Deploy secure, functional websites using GitHub and manage domains effectively.
  • These outcomes emphasize practical skills and professional readiness for web development.

Syllabus

Introduction to Padding
  • 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

Work-Centric Approach

The academic approach of the course focuses on ‘work-centric’ education. With this hands-on approach, derive knowledge from and while working to make it more wholesome, delightful and useful. The ultimate objective is to empower learners to also engage in socially useful and productive work. It aims at bringing learners closer to their rewarding careers as well as to the development of the community.

  • 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!