CSS Checklist

Getting Started

CSS is used for designing the webpages and their layouts developed in a markup language like HTML.

Introduction

Cascading Style Sheets (CSS) is a style sheet language which is used for designing the webpages and their layouts developed in a markup language like HTML.
3 CSS Levels

CSS styles can be applied to HTML elements in 3 ways.
Keywords

HTML and CSS are essential for web development and a good understanding of the key terms used is necessary.
Box Model

CSS Box Model is a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content.
CSS Layouts

CSS Layouts are used to define the position of HTML elements on a web page.
CSS Units

CSS Units are used to specify the size and position of elements in a document.

CSS Properties

CSS properties are used to specify the appearance of HTML elements.

Selectors

CSS selectors are used to select the content you want to style.

CSS Selectors

CSS selectors identify specific HTML elements as targets for CSS styles.
Class Selectors

The CSS Class Selectors are used to select all elements which belong to a particular class attribute.
Id Selectors

The CSS Id Selector matches an element based on the value of its id attribute.
Id vs Class Selectors

It is important to understand the differences between Id & Class Selectors and when to use each one.
Attribute Selectors

Attribute Selectors in CSS allows you to select DOM elements based on the attributes they contain as well as the values of those attributes.

Bootstrap

Bootstrap is a free and open-source CSS framework directed at responsive front-end web development.

Bootstrap Grid

Bootstrap Grid system is a responsive and mobile-first system for creating layouts in HTML and CSS.
Bootstrap Table

Bootstrap Table is a dynamic and responsive HTML table framework provided by Bootstrap.
Bootstrap Slider

Bootstrap Slider is a component that lets users pick a value from a given range.
Bootstrap Clearfix

Bootstrap Clearfix is a utility class that clears floats from the left or right side of an element.

Images

Image properties are used to set the image size, image opacity, image alignment, etc.

Image Properties

CSS image properties are used to set the image size, image opacity, image alignment, etc.
Masking in CSS

Masking image in CSS is a technique to hide a part of an element and show the rest of the element.

Positioning

Positioning properties are used to specify the type of positioning method used for an element.

Positioning Property

Positioning in CSS is used to set the position of an element in a document.
Z-index

Z-index is a CSS property that specifies the stack order of an element.
Grid Positioning

Grid Positioning is a CSS property that specifies the stack order of an element.

Design Laws

Design laws help us to understand how people perceive and interact with the world around them.

Parkinson's Law

Parkinsons Law states that work expands to fill the time available for its completion.
Jakob's Law

Jakob's Law states that users spend most of their time on other sites, and prefer your site to work the same way as all the other sites they already know.
Miller's Law

Miller's Law states that the average person can only keep 7 (plus or minus 2) items in their working memory.
Hick's & Fitt's Law

Hick's & Fitt's Law states that the time it takes to make a decision increases with the number and complexity of choices.
Peak End Rule

Peak End Rule states that people judge an experience largely based on how they felt at its peak and at its end, rather than the total sum or average of every moment of the experience.
Goal Gradient Effect

Goal Gradient Effect states that people are more motivated to complete a goal the closer they are to finishing it.

Features

CSS has a wide range of features that can be used to make webpages more interactive and user-friendly.

Media Query

Media Query is a CSS technique that allows content to adapt to different screen sizes and resolutions.
Pagination

Pagination is a technique to divide the content into multiple pages and display them one by one sequentially.
CSS Gradients

CSS Gradients are used to display smooth transitions between two or more specified colors.

Flexbox

Flexbox is a layout module that provides an efficient way to arrange space among items in a container.

Flexbox

CSS flexbox is a layout module that provides an efficient way to arrange, align, and distribute space among items in a container.
Flebox vs Grid

Understanding Flexbox vs Grid is important to know when to use which one.

Game Projects

Game Projects are a great way to learn HTML, CSS, and JavaScript.

2048

2048 is a single-player sliding block puzzle game designed by Italian web developer Gabriele Cirulli.
Bubble Shooter

Bubble Shooter is a puzzle game where you shoot bubbles of the same color to clear the board.
Car Racing

Car Racing game is a simple 2D game where you have to dodge the incoming cars.
Wordle

Wordle is a word game in which the player tries to find words within a set of scrambled letters.
Whack A Mole

Whack A Mole game is a simple 2D game where you have to hit the mole with a hammer.
Bomberman

Bomberman game is a simple 2D game where you have to kill all the enemies using bombs.

Web Development Projects

Web Development Projects involve building a website from scratch using HTML, CSS, and JS.

Playable Piano

Building a Playable Piano is a great way to learn HTML, CSS, and JavaScript.
Virtual Keyboard

Step by step process of building a Virtual Keyboard using HTML, CSS, and JavaScript.
Dynamic Sound Board

Step by step process of building a Dynamic Sound Board using HTML, CSS, and JavaScript.
Whiteboard

Whiteboard is a web-based drawing tool that allows you to create and share drawings online.

CSS Animation

CSS animation is achieved by changing the appearance and behavior of an element.

Animation

CSS Animation is a technique to change the appearance and behavior of an element gradually to create an animation effect.
Animated Button

Animated Button is a great way to make your website look more attractive and unique.

Advanced CSS Topics

Advanced CSS topics cover a wide range of topics that are different from the basic CSS topics.

Video Background

Creating Video Background is a great way to make your website look more attractive and unique.
Infinite Scrolling

Infinite Scrolling is a technique to load content continuously as the user scrolls down the page.
Modal in CSS

Modal in CSS is a technique to display content in a popup window on top of the current page.
Print using CSS

Print using CSS is a technique to print a webpage using CSS only.
Pseudo classes

CSS has pseudo-classes that allow you to style elements based on information that is not contained in the document tree.
Transparency

Learn to use Transparency in CSS to make your website look more attractive and unique.
SAAS Introduction

SAAS is a CSS preprocessor that allows you to use variables, nested rules, mixins, inline imports, and more.

Interview Questions

CSS Interview Questions are a great way to prepare for your next interview.

Interview Questions

Prepare these questions to ace your next interview.