Advanced css for designing responsive web page on website

Advanced CSS Tutorial
Including Flexbox, Grid, and Practical
Examples

What is Advanced CSS?
• Advanced CSS includes powerful layout and
design techniques such as Flexbox, Grid,
Transitions, Animations, and Media Queries.

CSS Selectors
• Advanced selectors include:
• - Attribute selectors [type='text']
• - Pseudo-classes :hover, :nth-child(n)
• - Pseudo-elements ::before, ::after

CSS Specificity
• Specificity determines which rule takes
precedence.
• Inline > ID > Class > Element
• Use specificity calculators to debug complex
rules.

Responsive Design
• Use media queries to create responsive
layouts:
• @media (max-width: 600px) {
• body { background: lightblue; }
• }

CSS Variables
• :root {
• --main-color: blue;
• }
• Usage:
• color: var(--main-color);

Flexbox Introduction
• Flexbox is a layout model that arranges
elements in rows or columns with control over
alignment, direction, and spacing.

Flex Container Properties
• display: flex;
• flex-direction: row | column;
• justify-content: center | space-between;
• align-items: center;

Flex Item Properties
• flex-grow, flex-shrink, and flex-basis define
how a flex item behaves in the flex container.

Flexbox Example
• HTML:
• <div class='flex'>
• <div>1</div><div>2</div><div>3</div>
• </div>
• CSS:
• .flex {
• display: flex;
• justify-content: space-around;

Grid Introduction
• CSS Grid Layout provides a two-dimensional
layout system for the web.

Grid Container Properties
• display: grid;
• grid-template-columns: 1fr 1fr;
• grid-gap: 10px;

Grid Item Properties
• grid-column: 1 / 3;
• grid-row: 2 / 4;

Grid Layout Example
• HTML:
• <div class='grid'>...</div>
• CSS:
• .grid {
• display: grid;
• grid-template-columns: repeat(3, 1fr);
• }

CSS Transitions
• button {
• transition: background 0.3s ease;
• }
• button:hover {
• background: red;
• }

CSS Animations
• @keyframes slideIn {
• from { transform: translateX(-100%); }
• to { transform: translateX(0); }
• }
• div {
• animation: slideIn 1s ease-out;
• }

Z-Index and Stacking Context
• Z-index controls the vertical stacking order of
elements.
• Higher values are in front.

CSS Positioning
• Static, Relative, Absolute, Fixed, Sticky
positioning affects how an element is placed.

Practical Project: Card Layout
• Use Flexbox to create a responsive card layout
with image, title, and description.

Practical Project: Responsive
Navbar
• Use Flexbox and media queries to build a
responsive navigation bar that collapses on
small screens.

Resources and Practice
• - MDN Web Docs
• - W3Schools CSS Exercises
• - Flexbox Froggy & Grid Garden
• - Practice building real layouts

Advanced css for designing responsive web page on website

More Related Content

Similar to Advanced css for designing responsive web page on website (20)

Recently uploaded (20)

Advanced css for designing responsive web page on website