Advanced CSS & Front-End Design

Learn flexbox, grid, animations, and advanced selectors for modern responsive web design.

Search Centers Visit Site
Advanced CSS & Front-End Design showcase image
Track
Software Development
Level
Intermediate
Language
English
Duration
30 hours
Learning Mode
Learn at ALC or at Home
Introduction
What you'll learn ?
Syllabus
Work-Centric Approach

Introduction

  • Illustrate the proper use of padding, margin, height, and width properties to style HTML elements.
  • Configure Flexbox and CSS Grid containers and items to create flexible and adaptable page structures.
  • Navigate and modify HTML and CSS within browser DevTools to diagnose and resolve styling discrepancies.
  • Employ CSS properties such as box-shadow, text-shadow, border-radius, and background-image with gradients for rich visual effects.
  • Explain the core features and applications of JavaScript in client-side web development.
  • Declare and assign values to JavaScript variables, and apply arithmetic and logical operators in expressions.
  • Perform operations like slicing, shifting, sorting, pushing, and popping on JavaScript arrays.
  • Explain the components of the CSS Box Model (content, padding, border, margin) and its influence on element dimensions.
  • Format unordered and ordered lists using list-style-type, list-style-image, and list-style-position properties.
  • Combine knowledge of HTML structure, advanced CSS styling, and fundamental JavaScript scripting to build a multi-section web page.

What you'll learn ?

  • Apply foundational CSS properties to control spacing, sizing, and text formatting for appealing web page layouts.
  • Construct responsive web layouts using modern CSS Flexbox and Grid modules.
  • Analyze and debug CSS styling issues efficiently using browser developer tools.
  • Integrate advanced CSS techniques, including shadows, gradients, and animations, to enhance visual design.
  • Differentiate between scripting and programming languages, specifically understanding JavaScript’s role in front-end development.
  • Implement basic JavaScript constructs, including variables, data types, and operators, to add interactivity to web pages.
  • Utilize JavaScript arrays to manage and manipulate collections of data effectively.
  • Evaluate different CSS Box Model configurations and their impact on element rendering.
  • Design aesthetically pleasing and functional web elements using CSS list properties.
  • Develop complete front-end web pages by combining HTML, advanced CSS, and introductory JavaScript concepts.

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: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

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!