liveBookmanning.com

What you will learn in Web Design Playground

HTML & CSS The Interactive Way

by Paul McFedries

Read it on liveBook Get the book at manning.com

Chapter by chapter

Concepts explained in this book

• flexboxA page layout approach that uses CSS flexible box formatting to arrange and align items in a container.
• flex itemA child element participating in a flex formatting context, whose size and position are controlled by flexbox properties.
• flex containerA flex container whose main axis runs vertically so its flex items are laid out in a column.
• float propertyA CSS property that takes an element out of normal document flow and places it to the left or right so surrounding content can wrap around it.
• font-family propertyA CSS property that specifies the preferred font family or ordered list of font families for text rendering.
• CSS selectorA CSS selector that matches elements based on an element's ID attribute value.
• flex-growA flexbox sizing behavior that allows a flex item to take up available free space.
• HSL methodA color specification method that represents colors by hue, saturation, and luminance values.
• align-itemsA CSS alignment property that aligns items within a flex container or grid container along the cross axis.
• flex-wrapA CSS flexbox property that determines whether flex items stay on one line or wrap onto multiple lines.
• shrinkA flexbox sizing behavior that determines how a flex item reduces in size when space is limited.
• media queryA CSS conditional rule that applies its enclosed styles only when the media type and/or media features match the current device or viewport.
• flex-basisA CSS flexbox property that sets the initial main-size of a flex item before free space is distributed.
• CSSA style sheet language used to describe the presentation of structured documents written in markup languages such as HTML.
• justify-contentA CSS alignment property that distributes and aligns items along the main axis of a flex container or grid container.
• flex-directionA CSS flexbox property that sets the direction of the main axis and the order in which flex items flow.
• align-selfA CSS flexbox property that overrides the default cross-axis alignment of an individual flex item.
• orderA CSS flexbox property that determines the visual ordering of flex items within a flex container.
• main axisThe primary flexbox axis running top to bottom along which flex items are arranged when the container is vertical.
• inline-blockAn element that participates in inline layout while retaining block-like box behavior for sizing and layout.
• align-contentA CSS property that aligns flex lines or wrapped content within a flex container on the cross axis when extra space is available.
• font-size propertyA CSS property that sets the size of text.
• cross axisThe axis perpendicular to the main axis in a flex container along which items can be aligned.
• color scaleA smooth transition between two or more colors across a visual area, including linear and radial forms in CSS.
• internal styleA style sheet embedded in an HTML document, typically within a style element, that applies CSS rules to that document only.
• style attributeAn HTML attribute that lets CSS declarations be written directly on an individual element.
• line lengthThe measure of how many characters or how much text fits on one line before wrapping.
• layoutThe spatial arrangement of elements in a visual interface or page.
• HTML tagA markup delimiter that marks the start or end of an element in HTML and related markup languages.
• inheritanceInheritance is a mechanism by which a child type or element receives properties, values, or behavior from a parent, subject to system rules and possible overrides.
• color paletteA coordinated set of colors chosen to work together in a design.
• HTMLThe standard markup language for structuring and annotating content on the web with elements and attributes.
• fontA distinctive design of letters, numbers, and symbols that gives a set of characters a particular visual style.
• headingA title or label that introduces a section of content, with level indicating rank in the document outline.
• external styleA style sheet stored in a separate CSS file and linked to an HTML document instead of being written inline or in a style element.
• generic fontA fallback font category name in CSS that lets the browser choose an available font of a general type such as serif or sans-serif.
• margin propertyA CSS property controlling the outer spacing around an element that separates it from neighboring content.
• widthThe horizontal extent or measure of an object or layout box.
• content propertyA CSS property that specifies the text, image, or other replacement content for generated content and pseudo-elements.
• hueA color dimension that identifies the perceived type of color, such as red or blue, independent of saturation or lightness.
• color propertyA visual property describing the perceived hue, shade, or tint applied to text or other rendered content.
• link elementAn HTML element that defines a link to an external resource and can also connect a document to a stylesheet or other relationship via attributes.
• landing pageA standalone web page designed to present a focused message and encourage a specific visitor action, often in a marketing context.
• hexadecimal color notationA hexadecimal notation for specifying a color by encoded red, green, and blue channel values.
• paddingThe inner spacing between an element's content and its border.
• remA CSS font-relative length unit equal to the font size of the root element.
• @font-faceA CSS at-rule that defines a downloadable font face for use in a document.
• analogous colorsA color scheme built from colors that are adjacent on the color wheel and therefore share similar visual qualities.
• complementary color relationshipA pair of colors positioned opposite each other on the color wheel that create strong visual contrast when combined.
• split complementary colorsA color relationship in which one hue is paired with the two hues adjacent to its complement on the color wheel.
• triadic colorsThree colors spaced evenly around the color wheel, forming a balanced high-harmony color relationship.
• rgb() functionA CSS color function that specifies a color by combining red, green, and blue component values.
• HTML elementA distinct part of a document or markup tree that can be targeted for styling or structure.
• responsive web designA page layout approach that adapts to different screen sizes and contexts using flexible measurements, fluid grids, and media queries.
• specificityThe CSS rule-ranking system that compares selectors to decide which declaration wins when multiple rules apply to the same element.
• ul elementA list format that presents items as separate entries marked with bullet symbols.
• font stackAn ordered list of font family names specified so the browser can fall back to the next available font if earlier choices are unavailable.
• declarationA CSS statement consisting of a property name and a value that assigns a styling instruction.
• cascadeThe CSS conflict-resolution mechanism that determines which style rule applies when multiple style sources overlap.
• borderThe line that surrounds the outer edge of an element's padding box and separates it from surrounding space.
• mainThe primary content area of a page that carries the central information or purpose of the page.
• hrefAn HTML attribute on an anchor element that specifies the destination resource of a hyperlink.
• holy-grail layoutA classic web page layout pattern with a header, main content area, sidebars, and footer arranged to keep the footer at the bottom and the main content central.
• flex-endA flexbox alignment value that places items at the end of the relevant axis or container edge.
• stretchA CSS alignment value that makes flex items expand to fill the available space in the cross axis when possible.
• img elementAn HTML element that embeds an image in a web page.
• style elementAn HTML element that contains CSS rules intended to style the document.
• fluid layoutA responsive page layout approach in which horizontal dimensions are expressed with relative units so content expands or contracts with the viewport.
• font file formatA file format specification for storing font data so it can be rendered by software.
• head elementAn HTML element that contains metadata and other non-visible information about a document, such as title and style information.
• footer sectionA concluding section at the bottom of a document or page that typically contains supplemental information.
• web fontA font file delivered over the web for use in rendering text on a page rather than relying only on locally installed fonts.
• hypertext linkA navigable reference from one web resource to another.
• background colorA CSS styling effect that sets the background appearance of an element, commonly by assigning a color.
• divAn HTML element that defines a generic division or container with no inherent semantic meaning or default presentation.
• brightnessA measure of the brightness of a color or light source as perceived or represented in a color model.
• saturationA color attribute that measures the purity of a hue or how much gray is mixed into it.
• RGBA color model that represents colors as combinations of red, green, and blue component values.
• style propertyA named CSS declaration component that specifies one aspect of styling, such as color, font size, or margins.
• counterA CSS counter is an automatically incremented numeric accumulator used to generate sequential content in generated output.
• columnA vertical division of a layout used to organize content side by side across a page or table-like structure.
• list item elementAn HTML element that represents a list item within an ordered or unordered list.
• Web Design PlaygroundThe companion website associated with the book for practicing its lessons and experimenting with the examples.
• flex-startA flexbox alignment value that places items at the beginning of the relevant axis or container edge.
• rowA flex-direction value that lays out flex items horizontally along the main axis.
• containerA file format that packages media streams and associated metadata into a single media file structure.
• Webfont GeneratorA service that converts font files into web-usable font formats and associated CSS.
• WOFFA web font file format designed for efficient delivery and use in web browsers.
• aside elementContent that is tangentially related to the main flow of a page, often presented as complementary or sidebar material.
• CSS box modelA CSS layout model that represents each element as a rectangular box consisting of content, padding, border, and margin.
• content areaThe inner area of a box model element that contains the actual rendered content, excluding padding and border.
• wrapIn layout, the behavior in which content moves onto a new line when there is insufficient horizontal space.
• autoA CSS keyword value that delegates the computed size or alignment to the browser's automatic calculation or inherited context.
• flexA CSS shorthand property that sets flex-grow, flex-shrink, and flex-basis together for a flex item.
• adaptive layoutA layout strategy that changes its structure or styling at defined breakpoints to suit different screen sizes.
• semantic markupAn HTML5 structural element used to organize page content into semantic sections such as header, navigation, main content, article, aside, section, and footer.
• video elementAn HTML element that embeds video content in a web page and can expose playback controls and related media behavior.
• emA CSS font-relative length unit whose computed size is based on the font size of the element or its context.
• mobile-first layoutA responsive design approach that starts with styles for small screens and progressively enhances the layout for larger screens.
• apertureThe open or partially enclosed negative space in a letterform, especially where strokes do not fully close a counter.
• height propertyA CSS property that sets an element's vertical size.
• stroke contrastThe difference in thickness between the thinnest and thickest strokes within a typeface.
• x-heightThe vertical distance from a font’s baseline to the top of its lowercase letters, excluding ascenders and descenders.
• alignment keywordsA CSS alignment keyword that places content or a gradient origin at the midpoint of the available space.
• nowrapA flex-wrap value that keeps flex items on a single line.
• wrap-reverseA flex-wrap value that wraps flex lines in the reverse direction along the cross axis.
• font-weightA CSS property that sets the weight or thickness of text glyph strokes, including normal and bold variants.
• sketchA rough preliminary drawing or outline used to plan the structure and placement of content.
• anchor elementAn HTML element that represents a hyperlink and, in markup, is typically rendered with anchor syntax.
• portfolio pageA web page designed to present a person's creative work or achievements to potential viewers, clients, or employers.

These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.