Programming FlashCards - Learn Coding Concepts

Nesting Selectors

Nesting selectors in CSS allows you to write cleaner and more organized styles by grouping related styles together. This is particularly useful in preprocessors like SCSS or LESS.

CSS

Responsive Images

In Mobile First Design, using responsive images ensures that images scale correctly across different devices. Use the `srcset` attribute to serve different image sizes based on the viewport, enhancing performance and loading times.

CSS

Mobile First

Mobile First Design is a web design approach that prioritizes mobile devices in the design process, ensuring a seamless experience on smaller screens before scaling up to larger screens. This concept emphasizes the importance of responsive design and accessibility.

CSS

Transition Timing

Transition timing functions control the acceleration of the transition effect. Common timing functions include 'ease', 'linear', 'ease-in', 'ease-out', and 'cubic-bezier'. These functions define how the transition progresses over time.

CSS

CSS Transitions

CSS transitions allow you to change property values smoothly (over a given duration) from one state to another. This enhances user experience by providing visual feedback on interaction.

CSS

Text Decoration

The text-decoration property in CSS is used to set the decoration of text, such as underline, overline, line-through, or none. It helps in enhancing the visual presentation of text elements.

CSS

Text Transform

The text-transform property in CSS allows you to control the capitalization of text. You can make text uppercase, lowercase, or capitalize the first letter of each word, enhancing the visual appeal of your text content.

CSS

Margin Collapse

Vertical margins of adjacent elements collapse, taking the larger margin value instead of adding both margins together.

CSS

CSS Box Model

Understand the difference between margin (external spacing) and padding (internal spacing) in CSS element layout

CSS

CSS Text Clip

Create visually striking text effects by clipping text with background images using background-clip and text-fill-color properties.

CSS

CSS Text Shadow

Create depth and visual interest by adding shadow effects to text using the text-shadow property with multiple shadow configurations.

CSS

CSS Grid Gap

Create precise spacing between grid items using row-gap and column-gap properties, controlling layout spacing without additional margins.

CSS

CSS Clip Path

Create custom geometric shapes by clipping an element's visible area using polygon, circle, or ellipse functions

CSS

CSS Flex Grow

Control how flex items expand to fill available space in a flex container, allowing proportional distribution of extra space

CSS

CSS Box Shadow

Create depth and visual effects by adding shadow to elements with customizable horizontal/vertical offset, blur radius, and color

CSS

CSS Scroll Snap

Create smooth, controlled scrolling experiences by defining snap points and behaviors for scroll containers

CSS

CSS Custom Properties

Declare and use reusable values throughout your stylesheet, enabling dynamic styling and easier theme management with local and global scopes.

CSS

CSS Variables Basics

Learn how to define, use, and dynamically change CSS custom properties (variables) to create more flexible and maintainable stylesheets.

CSS

CSS CurrentColor

A special CSS keyword that dynamically uses the current text color, allowing for easy color inheritance and creating flexible, adaptive designs.

CSS

CSS Position Types

Explore the different position values in CSS and how they affect element layout and positioning within a document flow.

CSS

CSS Logical Properties

Use direction-relative CSS properties that adapt to different writing modes and text directions, improving internationalization support.

CSS

Sticky Positioning

CSS sticky positioning creates an element that behaves like relative positioning until it crosses a specified threshold, then becomes fixed relative to its container.

CSS

CSS Sticky Position

A hybrid positioning method that acts like relative positioning until the element crosses a specified threshold, then becomes fixed within its container.