Taking on a Frontend Mentor challenge Responsive Product Preview Card Component

CSS

CSS

Cascading Style Sheets, a style sheet language used for describing the presentation of a document written in HTML or XML.

GitHub

A platform for version control and collaboration that developers use to store and manage their projects.

Netlify

A cloud computing company that offers hosting and serverless backend services for web applications and websites.

Emmet

A tool that allows for quick and efficient coding by providing shortcuts and autocompletions in code editors like Visual Studio Code.

Live Server

An extension that enables live reloading and previewing of changes made to a webpage without the need to manually refresh the browser.

BEM Naming Convention

A methodology for naming CSS classes in a structured and meaningful way, typically using block, element, and modifier naming scheme.

Article Element

An HTML element used to define a self-contained piece of content that can be distributed and understood independently from the rest of the webpage.

Picture Tag

An HTML element used for responsive images, allowing for different image sources based on the viewport size and resolution.

Mobile First

A design approach where the initial focus is on designing for mobile devices before scaling up to larger screens like desktops.

Main Element

An HTML element used to represent the main content of a webpage, typically containing the central topic or purpose of the page.

Title

The main heading or name of an article, document, or product.

H1

The highest level heading tag in HTML used for the main title or heading of a page.

Class

A way to apply styling or functionality to HTML elements by grouping them together.

Emmet

A toolkit that allows for faster coding by providing shortcuts and abbreviations for HTML and CSS.

Flex Group

A class used in CSS to group elements using flexbox properties.

Button

An HTML element styled as a button, often used for user interaction.

BEM (Block Element Modifier)

A naming convention in CSS that helps create reusable components by structuring class names as block__element--modifier.

CSS Reset

A technique used to reset the default styles provided by browsers to ensure consistent styling across different browsers.

Alt Text

Text attribute added to images in HTML to describe the image content for accessibility and SEO purposes.

Display Block

A CSS property that makes an element generate a block-level box, forcing it to start on a new line and take up the full width available.

Margin

The space around an element, often set to 0 to remove any default spacing.

Inherit

A CSS value that allows an element to inherit a property value from its parent element.

Custom Properties

Variables in CSS that store specific values to be reused throughout a stylesheet.

CSS

Cascading Style Sheets, a language used for describing the presentation of a document written in HTML or XML.

Figma

A web-based vector graphics editor and prototyping tool.

REM

A unit of measurement in web design that is relative to the font size of the root element.

Grid

A layout system in CSS that allows for the creation of complex layouts with rows and columns.

Locally Scoped Custom Property

A custom property in CSS that is only available to elements within a specific scope, such as a class or an article.

Text Transform

A CSS property that controls the capitalization of text.

Letter Spacing

The amount of space between characters in a text.

Screen Reader

Assistive technology that reads aloud the content of a webpage for visually impaired users.

Visually Hidden

A CSS class used to hide content visually while still making it accessible to screen readers.

Hover focus

A CSS pseudo-class that styles an element when it is being hovered over or focused on.

HSL

Stands for Hue, Saturation, and Lightness, a color model used in web design to define colors based on these three attributes.

SVG

Scalable Vector Graphics, a format used for vector images on the web that can be scaled without losing quality.

Data Attribute

An HTML attribute that allows extra information to be added to an element for use in CSS or JavaScript.

Pseudo Element

In CSS, an element that is not in the HTML document tree but can be created to style certain parts of an element.

Media Query

CSS technique that allows content to be styled based on the characteristics of the device displaying it.

Source Set

An attribute used in the source tag of an image element to specify multiple image sources, enabling the browser to choose the most appropriate image based on factors like resolution and screen size.

Media Attribute

An attribute that functions similarly to a media query, allowing developers to specify conditions under which a particular image source should be used, such as based on screen width or other criteria.

Source Control

A system that manages changes to code and tracks the history of modifications.

Repository

A storage location where code and project files are kept, managed, and tracked.