Skip to content

Latest commit

 

History

History
109 lines (93 loc) · 11 KB

css-checklist.md

File metadata and controls

109 lines (93 loc) · 11 KB
Raw

CSS Checklist

Only concepts that you need to practice to master CSS.

Getting Started

  1. 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.
  2. 3 CSS Levels
    CSS styles can be applied to HTML elements in 3 ways.
  3. Keywords
    HTML and CSS are essential for web development and a good understanding of the key terms used is necessary.
  4. Box Model
    CSS Box Model is a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content.
  5. CSS Layouts
    CSS Layouts are used to define the position of HTML elements on a web page.
  6. CSS Units
    CSS Units are used to specify the size and position of elements in a document.

CSS Properties

  1. Overflow
    The Overflow Property controls any content that might extend beyond the container.
  2. Clip
    The Clip Property is used to define the visible portion of an element by specifying its clipping region.
  3. Height & Width
    Height and Width are properties in CSS which are used to set the height and width of boxes or elements.
  4. Padding
    The Padding Property is used to create spacing between content of HTML.
  5. Margin
    The Margin Property is used to create space between webpage border and HTML Element's border.
  6. Rounded Corners
    Rounded Corners / Border Radius is a CSS property that allows you to add rounded corners to an element.
  7. Border
    The Border Property is used to create border around any HTML Tag.
  8. Transition
    Transition is a CSS property that allows you to change the values of a CSS property over time.
  9. Writing Mode
    The Writing Mode Property is used to specify whether lines of text are laid out horizontally or vertically.
  10. Customize Fonts
    You can Customize Fonts in HTML using CSS to make your website look more attractive and unique.

Selectors

  1. CSS Selectors
    CSS selectors identify specific HTML elements as targets for CSS styles.
  2. Class Selectors
    The CSS Class Selectors are used to select all elements which belong to a particular class attribute.
  3. Id Selectors
    The CSS Id Selector matches an element based on the value of its id attribute.
  4. Id vs Class Selectors
    It is important to understand the differences between Id & Class Selectors and when to use each one.
  5. 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

  1. Bootstrap Grid
    Bootstrap Grid system is a responsive and mobile-first system for creating layouts in HTML and CSS.
  2. Bootstrap Table
    Bootstrap Table is a dynamic and responsive HTML table framework provided by Bootstrap.
  3. Bootstrap Slider
    Bootstrap Slider is a component that lets users pick a value from a given range.
  4. Bootstrap Clearfix
    Bootstrap Clearfix is a utility class that clears floats from the left or right side of an element.

Images

  1. Image Properties
    CSS image properties are used to set the image size, image opacity, image alignment, etc.
  2. 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

  1. Positioning Property
    Positioning in CSS is used to set the position of an element in a document.
  2. Z-index
    Z-index is a CSS property that specifies the stack order of an element.
  3. Grid Positioning
    Grid Positioning is a CSS property that specifies the stack order of an element.

Design Laws

  1. Parkinson's Law
    Parkinsons Law states that work expands to fill the time available for its completion.
  2. 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.
  3. Miller's Law
    Miller's Law states that the average person can only keep 7 (plus or minus 2) items in their working memory.
  4. 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.
  5. 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.
  6. Goal Gradient Effect
    Goal Gradient Effect states that people are more motivated to complete a goal the closer they are to finishing it.

Features

  1. Media Query
    Media Query is a CSS technique that allows content to adapt to different screen sizes and resolutions.
  2. Pagination
    Pagination is a technique to divide the content into multiple pages and display them one by one sequentially.
  3. CSS Gradients
    CSS Gradients are used to display smooth transitions between two or more specified colors.

Flexbox

  1. Flexbox
    CSS flexbox is a layout module that provides an efficient way to arrange, align, and distribute space among items in a container.
  2. Flebox vs Grid
    Understanding Flexbox vs Grid is important to know when to use which one.

Game Projects

  1. 2048
    2048 is a single-player sliding block puzzle game designed by Italian web developer Gabriele Cirulli.
  2. Bubble Shooter
    Bubble Shooter is a puzzle game where you shoot bubbles of the same color to clear the board.
  3. Car Racing
    Car Racing game is a simple 2D game where you have to dodge the incoming cars.
  4. Wordle
    Wordle is a word game in which the player tries to find words within a set of scrambled letters.
  5. Whack A Mole
    Whack A Mole game is a simple 2D game where you have to hit the mole with a hammer.
  6. Bomberman
    Bomberman game is a simple 2D game where you have to kill all the enemies using bombs.

Web Development Projects

  1. Playable Piano
    Building a Playable Piano is a great way to learn HTML, CSS, and JavaScript.
  2. Virtual Keyboard
    Step by step process of building a Virtual Keyboard using HTML, CSS, and JavaScript.
  3. Dynamic Sound Board
    Step by step process of building a Dynamic Sound Board using HTML, CSS, and JavaScript.
  4. Whiteboard
    Whiteboard is a web-based drawing tool that allows you to create and share drawings online.

CSS Animation

  1. Animation
    CSS Animation is a technique to change the appearance and behavior of an element gradually to create an animation effect.
  2. Animated Button
    Animated Button is a great way to make your website look more attractive and unique.

Advanced CSS Topics

  1. Video Background
    Creating Video Background is a great way to make your website look more attractive and unique.
  2. Infinite Scrolling
    Infinite Scrolling is a technique to load content continuously as the user scrolls down the page.
  3. Modal in CSS
    Modal in CSS is a technique to display content in a popup window on top of the current page.
  4. Print using CSS
    Print using CSS is a technique to print a webpage using CSS only.
  5. Pseudo classes
    CSS has pseudo-classes that allow you to style elements based on information that is not contained in the document tree.
  6. Transparency
    Learn to use Transparency in CSS to make your website look more attractive and unique.
  7. SAAS Introduction
    SAAS is a CSS preprocessor that allows you to use variables, nested rules, mixins, inline imports, and more.

Interview Questions

  1. Interview Questions
    Prepare these questions to ace your next interview.

Generated by OpenGenus. Updated on 2023-11-27