liveBookmanning.com

What you will learn in Web Design Playground, Second Edition

by Paul McFedries

Read it on liveBook Get the book at manning.com

Chapter by chapter

Concepts explained in this book

• align-itemsThe CSS align-items property sets the default alignment of flex items along the cross axis of a flex container.
• flexboxFlexbox, or the CSS Flexible Box Layout module, arranges items along a single horizontal or vertical axis with flexible sizing and wrapping.
• justify-contentThe CSS justify-content property controls how flex or grid items are distributed along their container's main axis.
• HTMLHTML is the standard markup language for structuring and presenting content in web documents.
• header elementThe HTML header element represents introductory content for a page or section, commonly including a title, logo, or related introductory material.
• flex itemA flex item is a child element of a flex container that participates in flexible sizing and alignment along the container’s axes.
• CSSCSS is a stylesheet language for specifying the visual presentation and layout of documents rendered by a browser.
• flex containerA flex container is an element whose direct children are laid out according to the CSS Flexible Box Layout model.
• footer sectionThe HTML footer element represents a footer for a page or section, typically containing closing or supplementary information.
• HTML tagAn HTML tag is markup syntax that identifies or delimits content and structure in an HTML document.
• mainMain content is the primary subject matter of a web page, excluding shared navigation and peripheral regions.
• nav elementThe HTML nav element represents a section of a document containing navigation links or other navigation controls.
• landing pageA landing page is a web page designed for visitors arriving through a specific campaign link and intended to explain an offering and prompt a particular user action.
• opacityThe CSS opacity property specifies the degree to which an element and its contents are transparent.
• CSS GridA grid layout is a web-page layout organized into rows and columns whose track sizes and placement are defined by CSS Grid.
• banded contentA content band is a horizontal page-layout region with a full-width background and foreground content constrained within a centered inner area.
• grid containerA grid container is an element whose child elements are laid out according to CSS Grid rules.
• widthThe CSS width property specifies the horizontal size of an element's content box or replaced content.
• relative positioningRelative positioning is a CSS layout technique that visually shifts an element from its normal position while preserving its place in normal document flow.
• call-to-actionA call-to-action button is an interactive interface control that prompts a user to perform a specified action such as purchasing, subscribing, or signing up.
• reset style sheetA CSS reset is a stylesheet technique that removes or normalizes browser-default styling so authors can establish consistent starting styles.
• hero imageA hero background image is a prominent background image occupying most or all of the initial viewport behind introductory page content.
• semantic markupAn HTML5 page layout tag is a semantic HTML element that identifies a major structural area of a web page.
• flex-growThe CSS flex-grow property specifies how much a flex item may expand relative to the other flex items when extra space is available.
• z-indexThe CSS z-index property assigns a stacking order to positioned elements, determining which elements appear in front of or behind others.
• style propertyA CSS property is a named presentation characteristic whose value can be specified by a CSS declaration and may be inherited by descendants.
• portfolio pageA portfolio page is a web page that presents a person's creative work to potential clients, buyers, or employers.
• pricing tableA pricing table is a comparative layout that presents product versions or packages together with their prices and features.
• grid-template-columnsThe CSS grid-template-columns property specifies the number, sizes, and track definitions of a grid's columns.
• hueHue is the color attribute corresponding to a position on the color spectrum, commonly represented by an angle or numeric range.
• line lengthLine length is the number of characters displayed on a single line of text.
• main axisThe main axis is the primary direction in which a flex container arranges its flex items.
• grid itemA grid item is a child of a grid container that participates in its two-dimensional grid layout.
• flex-directionThe CSS flex-direction property specifies the direction in which flex items are placed along the main axis of a flex container.
• HSL methodThe hsl() function is a CSS color function that specifies a color using hue, saturation, and lightness components.
• border-radiusThe CSS border-radius property rounds the corners of an element's border box.
• image overlayAn image overlay is an image rendered above another image or visual layer in the same display area.
• transitionThe CSS transition property specifies animated changes between values of other CSS properties.
• max-width propertyThe CSS max-width property specifies the maximum horizontal size of an element's content box.
• font familyA typeface is a distinctive visual design shared by a related set of letters, numbers, and symbols.
• hoverThe CSS hover pseudo-class matches an element while a pointing device is positioned over it.
• cross axisThe cross axis is the direction perpendicular to the main axis in a flex container.
• proportionA CSS percentage is a relative numeric value resolved against a context-dependent reference dimension.
• align-contentThe CSS align-content property controls the distribution of flex lines or grid tracks along the cross axis of a container.
• shrinkThe CSS flex-shrink property specifies how much a flex item may contract relative to the other flex items when insufficient space is available.
• font-family propertyThe CSS font-family property specifies the typeface or sequence of fallback typefaces used to render an element.
• remThe CSS relative length unit whose value is based on the computed font size of the document's root element.
• pseudo-classA CSS pseudo-class is a selector condition that identifies an element in a particular state or structural condition.
• brightnessLightness is the degree to which a color appears light or dark, commonly expressed as a percentage.
• saturationSaturation is the degree of purity or intensity of a hue, commonly expressed as a percentage.
• align-selfThe CSS align-self property specifies an individual flex item’s cross-axis alignment, overriding the container’s align-items value.
• flex-basisThe CSS flex-basis property specifies the initial main-axis size of a flex item before available space is distributed.
• orderThe CSS order property specifies the ordering position of a flex item within its flex container.
• flex-wrapThe CSS flex-wrap property specifies whether flex items are forced onto one line or can wrap onto multiple lines.
• cascadeThe CSS cascade is the algorithm that resolves competing style rules from different sources to determine the style applied to an element.
• sticky positioningSticky positioning is a CSS positioning mode in which an element behaves relatively until a specified offset threshold is reached and then behaves fixed within its containing block.
• pseudo-elementA CSS pseudo-element is a selector-generated construct that represents a stylable part of an element without requiring a separate HTML element.
• img elementThe HTML img element embeds an image resource in a web document.
• browserA web browser is software that requests, interprets, and displays web documents and other web resources.
• system fontA system font is a typeface installed on a user's computer and available to that user's web browser.
• font-size propertyThe CSS font-size property specifies the size of text rendered for an element.
• fixed positioningFixed positioning is a CSS positioning mode that places an element relative to the browser window and keeps it stationary during scrolling.
• flexThe CSS flex property is a shorthand for setting an item’s flex-grow, flex-shrink, and flex-basis values.
• color paletteA color scheme is a coordinated selection of colors used together in a visual design.
• relative valueA relative CSS unit represents a dimension calculated from another size, such as an inherited, parent, root, or user-defined size.
• height propertyThe CSS height property specifies the vertical size of an element's content box or replaced content.
• photo galleryA photo gallery is a web presentation that displays multiple photographs, commonly with links to larger original images.
• element boxAn element box is the rectangular layout box generated for an HTML element, consisting of content, padding, border, and margin areas.
• min-heightThe CSS min-height property specifies the minimum vertical size of an element's box.
• generic fontA generic font family is a CSS font-family category that represents a broad class of typefaces and serves as a fallback when a specific font is unavailable.
• autoThe CSS auto value lets the browser determine a property's value according to its layout rules and available content.
• margin propertyThe CSS margin property specifies the space outside an element's border.
• float propertyThe CSS float property positions an element toward the left or right side of its containing block and allows surrounding content to flow around it.
• declarationA CSS declaration is a property-value pair that specifies a presentation setting.
• commentSource markup that records explanatory or organizational text without displaying it as page content.
• @font-faceThe CSS @font-face at-rule defines a font resource and the information a browser needs to load it.
• responsive web designResponsiveness is the ability of a web page layout to adapt effectively to different screen sizes and device orientations.
• style attributeThe HTML style attribute contains CSS declarations applied directly to an element.
• borderA CSS border is the edge region surrounding an element's content and padding, which can be rendered as lines around the element box.
• position propertyThe CSS position property specifies the positioning scheme used to lay out an element.
• alpha channelAn alpha channel is a color component that specifies the degree of transparency or opacity.
• hexadecimal numberA hexadecimal number is a numeral written in base 16 using digits 0 through 9 and letters A through F.
• adaptive layoutAn adaptive layout is a page layout that changes its dimensions, arrangement, or visible elements in response to screen or rendering conditions.
• justify-itemsThe CSS justify-items property sets the default alignment of grid items along the inline axis within their grid areas.
• line-height propertyThe CSS line-height property specifies the height of each line box used to lay out text.
• web fontA web font is a font made available to a web page through web resources rather than requiring installation on the user's device.
• internal styleAn internal style sheet is a collection of CSS style rules embedded in an HTML document, typically within a style element in the document head.
• HTML elementThe HTML html element is the document's outermost element and root of the HTML element tree.
• body elementA body element is the HTML document component that contains the page content rendered in the web browser.
• paddingA padding shorthand property is a CSS declaration form that specifies multiple padding side values in one property.
• hrefThe href attribute is an HTML attribute that specifies the destination address of a hypertext link.
• media formatA digital representation specification that combines a container with supported audio or video codecs and associated file conventions.
• abbr elementThe HTML abbr element marks text as an abbreviation or acronym and can provide its expanded form through the title attribute.
• cite elementThe HTML cite element marks the title of a cited creative work and is commonly rendered in italics by default.
• code elementThe HTML code element marks a fragment of computer program code.
• datetime attributeThe datetime attribute supplies a machine-readable date or time value for an HTML time element.
• dfn elementThe HTML dfn element marks the defining instance of a term.
• kbd elementThe HTML kbd element marks text representing keyboard input or other user input.
• mark elementThe HTML mark element highlights text because of its relevance or significance to the reader.
• pre elementThe HTML pre element represents preformatted text whose whitespace and line breaks are preserved.
• s elementThe HTML s element marks text as no longer accurate, current, or relevant without removing it.
• samp elementThe HTML samp element marks text as sample output from a computer program or similar system.
• small elementThe HTML small element marks side comments and fine-print text such as legal notices, disclaimers, or caveats.
• sub elementThe HTML sub element marks text as a subscript positioned partially below the text baseline.
• sup elementThe HTML sup element marks text as a superscript positioned partially above the text baseline.
• text-level elementA text-level element is an HTML element that marks semantics or presentation for an inline span of text.
• time elementThe HTML time element marks text as representing a date, a time, or both, optionally associating it with a machine-readable value.
• u elementThe HTML u element marks a span of text with an explicitly rendered non-textual annotation, commonly producing an underline.
• var elementThe HTML var element marks a variable in a mathematical or programming expression and is commonly rendered in italics by default.
• JPEGJPEG is an image file format that commonly stores photographic imagery using lossy compression.
• hypertext linkA hypertext link is a clickable reference in a digital document that points to another document, resource, or location.
• display propertyThe CSS display property specifies how an element participates in layout and whether it generates a box.
• anchor elementThe HTML a element creates a hypertext link around content.
• video elementThe HTML video element embeds video content in a web page and can provide controls for playback.
• layoutPage layout is the arrangement and positioning of content and visual elements within a web page.
• navigationA navigation section is a page section containing controls or links for moving among pages or sections of a site.
• renderingRendering is the process of interpreting web document code and producing its visual representation on a device.
• media queryAn @media rule is a CSS at-rule that conditionally groups stylesheet rules according to a media type or media feature.
• separation of structure and presentationSeparation of structure and presentation is a design pattern in which document content and organization are defined independently from its visual appearance.
• PNGPNG is a lossless raster image format that supports indexed, grayscale, and truecolor images, including alpha transparency.
• GeorgiaGeorgia is a serif typeface designed for readable text display on screens and in print.
• VerdanaVerdana is a humanist sans-serif typeface designed for legibility at small sizes on screens.
• src attributeThe src attribute specifies the location of the image resource referenced by an HTML img element.
• specificityCSS specificity is the ranking assigned to a selector that determines its precedence among competing style rules targeting the same element.
• audio elementThe HTML audio element embeds audio content in a web page and can provide controls for playback.
• block axisThe block axis is the CSS layout axis perpendicular to the inline axis.
• external styleAn external style sheet is a separate CSS resource containing style rules that can be linked to one or more HTML documents.
• inline axisThe inline axis is the CSS layout axis parallel to the direction of text in the current writing mode.
• justify-selfThe CSS justify-self property sets the alignment of an individual grid item along the inline axis within its grid area.
• Web Design PlaygroundWeb Design Playground is an online interactive environment for editing HTML and CSS, previewing rendered results, and working through related lessons and exercises.
• link elementThe HTML link element declares a relationship between the current document and an external resource such as a style sheet or hosted font resource.
• grid areaA named grid area is a rectangular region of CSS Grid cells identified by a shared name.
• fraction unitThe CSS fr unit is a flexible length unit representing a fraction of the free space in a grid container.
• css editorAn interactive source-code editor for entering and modifying CSS.
• html editorAn interactive source-code editor for entering and modifying HTML.
• digital imageA visual representation embedded in or associated with a web document.
• CSS box modelThe CSS box model represents an element's dimensions as nested content, padding, border, and margin areas.
• legibilityLegibility is the ease with which individual characters and words can be distinguished in displayed text.
• breakpointA breakpoint is a width or other threshold at which a responsive design changes its layout or styling.
• max-width media featureThe max-width media feature tests whether the viewport or rendering surface is no wider than a specified width.
• min-widthThe min-width media feature tests whether the viewport or rendering surface is at least a specified width.
• radial-gradient functionThe CSS radial-gradient() function creates a gradient image whose colors radiate outward from a central shape.
• CSS selectorA CSS selector is a pattern that identifies the web page elements to which a style rule applies.
• image-caption classThe image-caption class is a CSS class assigned to a caption layer displayed over a thumbnail image.
• Google FontsGoogle Fonts is a service that provides a catalog of web fonts and the resources needed to load them on websites.
• inline-blockAn inline block is a CSS layout mode in which an element participates in inline flow while generating a block container for its contents.
• column-gapThe CSS column-gap property specifies the horizontal space between columns in a layout container.
• row-gapThe CSS row-gap property specifies the vertical space between rows in a layout container.
• ol elementAn ordered list is an HTML list whose items are presented in sequential order with automatically generated markers.
• title attributeThe HTML title attribute supplies advisory text that browsers may display as a tooltip for an element.
• color stopA gradient stop is a position in a CSS gradient at which a specified color occurs.
• descendant selectorA descendant selector is a CSS selector that matches elements nested at any depth within a specified ancestor.
• viewport unitThe vw unit is a CSS viewport-relative length unit equal to one percent of the viewport width.
• list item elementA list item is one entry in an ordered or unordered list.
• markup languageA markup language is a language that annotates text with codes specifying its structure, presentation, or meaning.
• mobile-first layoutA mobile-first layout is a responsive design strategy that begins with a layout optimized for small screens and progressively enhances it for larger screens.
• hexadecimal color notationAn RGB hex triplet is a hexadecimal color notation consisting of three pairs of digits specifying red, green, and blue components.
• headingAn HTML heading element is an element from h1 through h6 that marks heading text and indicates its level in a page hierarchy.
• alt-textAlternative text is textual content intended to be interpreted differently from the surrounding regular text, such as a title, technical term, foreign phrase, or thought.
• fluid imageA fluid image is an image whose rendered dimensions adapt to available layout space while preserving its proportions and size constraints.
• analogous colorsAn analogous color scheme uses colors whose hues are adjacent or near one another on the color wheel.
• complementary color relationshipA complementary color scheme pairs colors whose hues are opposite each other on the color wheel.
• split complementary colorsA split complementary color scheme pairs a main color with the two colors located on either side of its opposite hue.
• triadic colorsA triadic color scheme uses three colors whose hues are equally spaced around the color wheel.
• ID selectorAn ID selector is a CSS selector that matches the element identified by a specified HTML id attribute value.
• RGBAn RGB code is a color representation that specifies red, green, and blue component values.
• background-positionThe CSS background-position property specifies the starting horizontal and vertical position of a background image within an element.
• head elementThe HTML head element contains document metadata, the page title, and resource declarations rather than the page's main rendered content.
• apertureAn aperture is a partially enclosed negative space formed by the opening of a letterform.
• counterA counter is an enclosed or partially enclosed negative space within a letterform.
• Playfair DisplayPlayfair Display is a serif typeface designed for display text and characterized by strong stroke contrast.
• stroke contrastStroke contrast is the difference in thickness between the thinnest and thickest strokes of a typeface.
• x-heightX-height is the height of the main body of lowercase letters in a typeface.
• absolute unitAn absolute CSS unit represents a fixed physical or reference dimension that does not scale with inherited or user-adjusted text size.
• ul elementAn unordered list is an HTML list whose items have no inherent numeric order and are typically displayed with bullet markers.
• offset propertyCSS offset properties specify an element's distance from the corresponding edges of its positioning context.
• descendantA descendant element is an HTML element contained within another element directly or through one or more intermediate elements in the document tree.

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.