From 919cfc42492054e41fccb85ff16d8fea0d51dd72 Mon Sep 17 00:00:00 2001 From: Michael Czechowski Date: Tue, 30 Dec 2025 16:22:48 +0100 Subject: [PATCH] refactor: shorten lesson titles and improve content - Shorten verbose lesson titles for better sidebar display - Minor content improvements across lessons --- lessons/00-basic-selectors.json | 22 +++++++++--------- lessons/00-basics.json | 32 +++++++++++++-------------- lessons/01-advanced-selectors.json | 18 +++++++-------- lessons/02-css-only-carousel.json | 18 +++++++-------- lessons/02-selectors.json | 2 +- lessons/03-colors.json | 2 +- lessons/04-typography.json | 2 +- lessons/07-layouts.json | 10 ++++----- lessons/10-tailwind-basics.json | 12 +++++----- lessons/20-html-elements.json | 6 ++--- lessons/21-html-forms-basic.json | 2 +- lessons/22-html-forms-validation.json | 6 ++--- lessons/23-html-details-summary.json | 4 ++-- lessons/24-html-progress-meter.json | 2 +- lessons/25-html-datalist.json | 2 +- lessons/26-html-data-attributes.json | 2 +- lessons/27-html-dialog.json | 4 ++-- lessons/28-html-forms-fieldset.json | 2 +- lessons/29-html-figure.json | 2 +- lessons/30-html-tables.json | 2 +- lessons/31-html-marquee.json | 2 +- lessons/32-html-svg.json | 2 +- lessons/tailwindcss.json | 2 +- 23 files changed, 79 insertions(+), 79 deletions(-) diff --git a/lessons/00-basic-selectors.json b/lessons/00-basic-selectors.json index bf865c9..1b8229e 100644 --- a/lessons/00-basic-selectors.json +++ b/lessons/00-basic-selectors.json @@ -1,13 +1,13 @@ { "$schema": "../schemas/code-crispies-module-schema.json", "id": "css-basic-selectors", - "title": "CSS: Basic Selectors", + "title": "Selectors", "description": "CSS selectors are the foundation of styling web pages, allowing you to target specific HTML elements for styling. This module introduces fundamental selector types including element type selectors, class selectors, ID selectors, and the universal selector.", "difficulty": "beginner", "lessons": [ { "id": "introduction-to-selectors", - "title": "What is a CSS Selector?", + "title": "What's a Selector?", "description": "A CSS selector is the first part of a CSS rule that tells the browser which HTML elements should receive the styles defined in the declaration block. Selectors are essentially patterns that match against elements in your HTML document. Understanding selectors is fundamental because they determine which elements your CSS rules will affect. The element or elements targeted by a selector are referred to as the 'subject of the selector.' When writing a CSS rule, you first specify the selector, followed by curly braces that contain the style declarations.
For example, to change the text color of elements, you can use the color property within your declaration block.

/* Element selector */\np {\n  color: orangered;\n  /* │       └─── Indicates the value of the expression\n     │                                                     \n     └─────────── Indicates the property of the expression */\n}
", "task": "Write a CSS rule using a type selector that targets all paragraph elements p in the document. Make the text blue by setting the color property to blue.", "previewHTML": "

Introduction to CSS Selectors

\n

This paragraph should turn blue.

\n
This div element should remain unchanged.
\n

This second paragraph should also turn blue.

", @@ -57,7 +57,7 @@ }, { "id": "type-selectors", - "title": "Type Selectors: Targeting HTML Elements", + "title": "Type Selectors", "description": "Type selectors (also called tag name selectors or element selectors) target HTML elements based on their tag name. For example, p selects all paragraph elements, h1 selects all level-one headings, and div selects all division elements. Type selectors are the most fundamental way to select elements, applying styles consistently to all instances of a particular HTML element throughout your document. You can define a variety of CSS properties with type selectors, such as color for text color, background-color for the background, and font-weight for text emphasis. They provide a broad approach for styling your page and are often the starting point for more specific styling using other selector types.", "task": "Write three separate CSS rules using type selectors to target specific HTML elements: make h2 headings purple, give span elements a yellow background, and make strong elements red.", "previewHTML": "

Type Selectors Example

\n

Regular paragraph text with a highlighted span that should have a yellow background.

\n

Another paragraph with strong important text that should be red.

\n

Another Heading

", @@ -119,7 +119,7 @@ }, { "id": "class-selectors", - "title": "Class Selectors: Styling Element Groups", + "title": "Class Selectors", "description": "Class selectors target elements with a specific class attribute value. They begin with a dot (.) followed by the class name. Classes are powerful because they allow you to apply the same styles to multiple elements regardless of their type. An HTML element can have multiple classes (separated by spaces in the class attribute), and a class can be applied to any number of elements. When using class selectors, you can apply properties like background-color to set the background color of elements, and font-weight to control text thickness, making text bold or normal. This flexibility makes class selectors one of the most commonly used methods for applying styles in CSS, allowing for modular and reusable styling across your website.", "task": "Create a CSS rule using a class selector that targets elements with the class highlight. Give these elements a yellow background and bold text.", "previewHTML": "

Using Class Selectors

\n

This is a regular paragraph, but this span has the highlight class applied to it.

\n

This entire paragraph has the highlight class.

\n", @@ -176,7 +176,7 @@ }, { "id": "multiple-classes", - "title": "Working with Multiple Classes", + "title": "Multiple Classes", "description": "HTML elements can have multiple classes applied simultaneously, allowing for composable and modular CSS designs. When an element has multiple classes, it will receive styles from all matching class selectors. This approach enables you to build a library of reusable CSS classes that can be combined in different ways. You can also target elements that have a specific combination of classes by chaining class selectors together without spaces (e.g., .class1.class2). When styling these elements, you might use properties like border-color to change the color of element borders, and background-color to set the background color of elements. This technique lets you create conditional styles that only apply when certain classes appear together.", "task": "Complete the CSS rule that targets elements with both card and featured classes by chaining the selectors. Set the border-color to gold and the background-color to lemonchiffon to make featured cards stand out.", "previewHTML": "

Multiple Class Combinations

\n
Regular Card
\n
Featured Card
\n
Just Featured (not a card)
", @@ -239,7 +239,7 @@ }, { "id": "class-with-type", - "title": "Combining Type and Class Selectors", + "title": "Combining Types", "description": "You can combine type selectors with class selectors to target specific HTML elements that have a certain class. This creates a more specific selector that only matches when both conditions are true: the element is of the specified type AND it has the specified class. For example, p.note would select paragraph elements with the class note, but would not select divs or spans with that same class. You can style these combined selections using properties like background-color to set a colored background for your elements. This approach allows you to apply different styles to the same class when it appears on different element types.", "task": "Create a CSS rule that specifically targets <span> elements with the class highlight. Make those elements have an orange background, while other elements with the highlight class remain untouched.", "previewHTML": "

Type and Class Combinations

\n

This paragraph has a highlighted span that should have an orange background.

\n

This paragraph has the highlight class but should NOT have an orange background.

", @@ -283,7 +283,7 @@ }, { "id": "id-selectors", - "title": "ID Selectors: Targeting Unique Elements", + "title": "ID Selectors", "description": "ID selectors target elements with a specific id attribute. They begin with a hash/pound sign (#) followed by the ID name. Unlike classes, IDs must be unique within a document—each ID value should be used only once per page. ID selectors have higher specificity than class or element selectors, meaning they override those selectors when conflicts arise. When styling with ID selectors, you can use properties like color to define text color, and text-decoration to control the appearance of text, such as adding underlines to elements. Because of their uniqueness requirement, IDs are best used for one-of-a-kind elements like page headers, main navigation, or specific unique components that appear only once on a page.", "task": "Create a CSS rule with an ID selector that targets the element with the ID main-title. Set its color to purple and add an underline with text-decoration: underline.", "previewHTML": "

Main Page Title

\n

Regular paragraph content.

\n

Secondary Heading

\n

Introduction paragraph (different ID).

", @@ -340,7 +340,7 @@ }, { "id": "id-with-type", - "title": "Combining Type and ID Selectors", + "title": "Type + ID", "description": "Similar to how you can combine type and class selectors, you can also combine type selectors with ID selectors. For example, h1#title targets an h1 element with the ID 'title'. When using this combined approach, you can apply CSS properties like font-style to control the slant of the text, making it italic or normal. While this selector combination is more specific than using just the ID selector, it's often unnecessary since IDs should already be unique in a document. However, this technique can be useful for improving code readability or when you want to emphasize that a particular ID should only appear on a specific element type.", "task": "Create a CSS rule that combines a type selector with an ID selector to target specifically a paragraph element with the ID special. Set its font style to italic.", "previewHTML": "

Heading with ID \"special\" (should NOT be affected)

\n

Paragraph with ID \"special\" (should become italic)

", @@ -384,7 +384,7 @@ }, { "id": "selector-lists", - "title": "Selector Lists: Applying the Same Rules to Multiple Selectors", + "title": "Selector Lists", "description": "When multiple elements need the same styling, you can group them together using a selector list (also known as grouping selectors). Selector lists are created by separating individual selectors with commas. This approach reduces repetition in your CSS, making it more maintainable and efficient. For example, h1, h2, h3 { color: blue; } applies the same blue color to all three heading levels. When styling multiple selectors at once, you can apply properties like background-color to set the background, border-left to create a left border with a specific thickness, style, and color, and padding-left to create space between the content and the left border. Whitespace around commas is optional, and each selector in the list can be any valid selector type-elements, classes, IDs, or even more complex selectors.", "task": "Create a selector list that applies the same styles to three different elements: paragraphs with class note, list items with class important, and the element with ID summary. Give them a lightyellow background, a gold left border, and some left padding.", "previewHTML": "

This is a note paragraph.

\n\n
Summary section
", @@ -471,7 +471,7 @@ }, { "id": "universal-selector", - "title": "The Universal Selector: Targeting Everything", + "title": "Universal (*)", "description": "The universal selector is denoted by an asterisk (*) and matches any element of any type. It selects everything in the document or, when combined with other selectors, everything within a specific context. For example, * { margin: 0; } removes margins from all elements, while article * selects all elements inside article elements. When using the universal selector in combination with other selectors, you can apply properties like margin to control the spacing around elements. The universal selector is powerful but should be used carefully due to its broad impact. It's commonly used in CSS resets, to override default browser styling, or to target all children of a particular element.", "task": "Use the universal selector to remove margins from all elements inside the container div. Create a rule using div.container * as the selector and set margin: 0.", "previewHTML": "
\n

Inside Container

\n

This paragraph is inside the container.

\n \n
\n

This paragraph is outside the container and should not be affected.

", @@ -515,7 +515,7 @@ }, { "id": "specificity-basics", - "title": "Understanding Selector Specificity", + "title": "Specificity", "description": "CSS specificity determines which styles take precedence when multiple conflicting rules target the same element. Specificity follows a hierarchical system: inline styles have the highest specificity, followed by ID selectors, then class/attribute/pseudo-class selectors, and finally element/pseudo-element selectors. This can be conceptualized as a four-part score (inline, ID, class, element). When creating multiple rules that may target the same elements, you can use the color property to set text colors, and specificity will determine which color is actually applied. Understanding specificity is crucial for predictable styling and debugging CSS conflicts. When two selectors have equal specificity, the one that comes last in the stylesheet wins.", "task": "Examine the existing CSS rules and add a new rule with higher specificity to override the text color of the paragraph. Create a rule using '.content p' as the selector and set color: green.", "previewHTML": "
\n

What color will this paragraph be? Look at the CSS rules and their specificity.

\n
", diff --git a/lessons/00-basics.json b/lessons/00-basics.json index 31946f7..4e49649 100644 --- a/lessons/00-basics.json +++ b/lessons/00-basics.json @@ -1,13 +1,13 @@ { "$schema": "../schemas/code-crispies-module-schema.json", "id": "css-fundamentals", - "title": "101 Rules and Selectors", + "title": "CSS 101", "description": "Cascading Style Sheets (CSS) form the cornerstone of modern web presentation. This module provides a comprehensive introduction to CSS syntax, selectors, properties, and core design concepts. You'll develop a deep understanding of how CSS empowers web developers to control visual aesthetics, layout, and responsive behavior across digital interfaces. Throughout these lessons, we'll build a robust foundation that prepares you for more advanced web engineering topics.", "difficulty": "beginner", "lessons": [ { "id": "css-syntax-structure", - "title": "CSS Syntax: The Building Blocks", + "title": "Syntax Basics", "description": "CSS (Cascading Style Sheets) follows a structured syntax that consists of selectors targeting HTML elements and declaration blocks defining their styling. A declaration block contains one or more declarations separated by semicolons, with each declaration consisting of a property and value pair. This fundamental structure forms the basis of all CSS rules and allows for precise control over web page presentation. Understanding this syntax is critical for effectively implementing any styling on the web.

/* Element selector */\np {\n  color: orangered;\n  /* │       └─── Indicates the value of the expression\n     │                                                     \n     └─────────── Indicates the property of the expression */\n}
", "task": "Complete the CSS rule by providing a valid selector that targets all paragraph elements (p). This selector should apply to every paragraph on the page. Notice how the declaration block is already structured with the property-value pair 'color: blue;'.", "previewHTML": "

This paragraph should be blue.

This paragraph should also be blue.

This div element should remain unchanged.
", @@ -30,7 +30,7 @@ }, { "id": "css-selectors-element", - "title": "Element Selectors: Targeting HTML Elements", + "title": "Type Selectors", "description": "Element selectors target HTML elements directly by their tag name. For example, 'p' selects all paragraph elements, 'h1' selects all first-level headings, and 'div' selects all division elements. Element selectors are powerful for applying consistent styling to all instances of a particular HTML element throughout your document. They form the foundation of CSS selection and are often combined with other selectors to create more specific targeting patterns.", "task": "Write an element selector to target all heading level 2 elements (h2). Then complete the code to give them a red text color and an underline. This will make them stand out clearly on the page.", "previewHTML": "

This is a heading that needs styling

This is a paragraph that should remain unchanged.

This is another heading that needs the same styling

", @@ -53,7 +53,7 @@ }, { "id": "css-selectors-class", - "title": "Class Selectors: Targeting Specific Element Groups", + "title": "Class Selectors", "description": "Class selectors target HTML elements that share the same class attribute value. They begin with a dot (.) followed by the class name. Classes provide a flexible way to apply styles to groups of elements that may not share the same HTML tag. A single element can have multiple classes, and a class can be applied to multiple elements, making class selectors a powerful tool for organizing and applying styles efficiently across your website.", "task": "Write a class selector to target elements with the class 'important-text'. Set their color to 'red' and give them a yellow background. Begin with a dot (.) followed by the class name to create a proper class selector.", "previewHTML": "

This text should be red with yellow background.

This text remains unchanged.

This span should also be red with yellow background.", @@ -76,7 +76,7 @@ }, { "id": "css-selectors-id", - "title": "ID Selectors: Targeting Unique Elements", + "title": "ID Selectors", "description": "ID selectors target a single, unique HTML element that has a specific id attribute value. They begin with a hash symbol (#) followed by the ID name. Unlike classes, an ID should be unique within a page—it should only be used once. ID selectors have higher specificity than class selectors, which means they override class and element selectors when specificity conflicts arise. Because of their uniqueness constraint, IDs are ideal for styling one-of-a-kind elements.", "task": "Write an ID selector to target the element with the ID 'header-title'. Set its font-weight to 'bold'. Begin with a hash symbol (#) followed by the ID name.", "previewHTML": "

This heading needs to be bold

This heading should remain unchanged

", @@ -99,7 +99,7 @@ }, { "id": "css-pseudo-classes-hover", - "title": "Pseudo-classes: Interactive States with :hover", + "title": ":hover State", "description": "Pseudo-classes select elements based on states that aren't explicitly part of the document tree, such as user interaction states. The :hover pseudo-class is triggered when a user hovers their cursor over an element. This provides a powerful way to create interactive elements that respond to user actions without requiring JavaScript. Other common pseudo-classes include :focus, :active, and :visited, each representing different interaction states.", "task": "Add the :hover pseudo-class to the button selector to create an interactive effect when users hover over buttons. This will change the background color to 'green' when a user's cursor is positioned over any button element.", "previewHTML": "

Try hovering over the button to see the effect.

", @@ -122,7 +122,7 @@ }, { "id": "css-box-model-padding", - "title": "CSS Box Model: Understanding Padding", + "title": "Padding", "description": "The CSS box model represents how elements are rendered in the browser. Every element is effectively a box with content at its core, surrounded by padding, border, and margin areas. Padding creates space between an element's content and its border, providing visual breathing room. You can control padding on all sides at once with the 'padding' property, or target specific sides with 'padding-top', 'padding-right', 'padding-bottom', and 'padding-left'. Proper padding is essential for visual hierarchy and readability.", "task": "Add padding to the content-box element. Set the padding to '20px' to create adequate space between the content and the element's border. This will improve readability and visual appeal.", "previewHTML": "

This paragraph needs proper padding around it to improve readability and aesthetic appeal.

Without padding, text would touch the edges of the box, making it harder to read.

", @@ -156,7 +156,7 @@ }, { "id": "css-box-model-margin", - "title": "CSS Box Model: Understanding Margin", + "title": "Margin", "description": "Margin is the outermost layer of the CSS box model, creating space between an element and its neighboring elements. Unlike padding which affects the internal spacing, margins define the external spacing relationships between elements. Margins can be set for all sides with the 'margin' property or individually with 'margin-top', 'margin-right', 'margin-bottom', and 'margin-left'. Margins can also accept negative values to create overlapping effects, and they collapse in certain situations—an important behavior to understand for precise layout control.", "task": "Add a bottom margin to the section-title element. Set margin-bottom to '30px' to create appropriate spacing between the title and subsequent content. This helps establish visual hierarchy in the document flow.", "previewHTML": "

Important Section

This paragraph should have space above it, separating it from the heading.

", @@ -190,7 +190,7 @@ }, { "id": "css-box-model-border", - "title": "CSS Box Model: Working with Borders", + "title": "Borders", "description": "Borders define the perimeter of an element in the CSS box model, positioned between the padding and margin areas. The 'border' property is shorthand that combines border-width, border-style, and border-color properties. You can apply borders to all sides of an element or target specific sides with 'border-top', 'border-right', 'border-bottom', and 'border-left'. Borders serve both functional and aesthetic purposes: they visually separate elements, highlight interactive components, and can become integral parts of your design language.", "task": "Add a border to the card element. Set the border property to '2px solid blue' to create a defined boundary with a distinctive color. This will help the card stand out visually from surrounding content.", "previewHTML": "

Card Title

This card element needs a defined border to enhance its visibility.

", @@ -221,7 +221,7 @@ }, { "id": "css-centering-techniques", - "title": "Horizontal and Vertical Centering", + "title": "Centering", "description": "Centering elements in CSS has historically been challenging, but modern approaches have simplified this task. For horizontal centering, we can use 'margin: 0 auto' for block elements with a defined width, or 'text-align: center' for inline elements. Vertical centering often employs flexbox or grid layouts. Flexbox, in particular, offers a straightforward solution with 'display: flex', 'justify-content: center' (horizontal centering), and 'align-items: center' (vertical centering). Understanding centering techniques is crucial for creating balanced and visually appealing layouts.", "task": "Center the button both horizontally and vertically within its container by adding the correct flexbox properties. The container is already set to 'display: flex', so you need to add both 'justify-content: center' and 'align-items: center' properties.", "previewHTML": "
", @@ -274,7 +274,7 @@ }, { "id": "css-colors-hex-rgb", - "title": "Color Systems: Hexadecimal and Named Colors", + "title": "Color Values", "description": "CSS supports multiple color representation systems. Hexadecimal notation uses a pound sign (#) followed by 3 or 6 characters representing RGB values in base-16 format (e.g., #f00 or #ff0000 for red). CSS also provides named colors like 'red', 'blue', and 'orange' for common colors. Named colors are easier to remember, while hex colors provide more precise control. Understanding different color systems is essential for controlling the visual appearance of your web elements.", "task": "Set the background color of the element to 'orange' using a named color. Named colors are more readable in code than hexadecimal values and are perfect for common colors.", "previewHTML": "
This element needs an orange background color
", @@ -305,7 +305,7 @@ }, { "id": "css-typography-font-family", - "title": "Typography: Font Family and Font Stacks", + "title": "Font Family", "description": "The font-family property defines the typeface used for text content. Best practice dictates providing a 'font stack'—a comma-separated list of fonts in descending order of preference. If the first font isn't available on the user's system, the browser moves to the next font in the stack. The stack typically ends with a generic font family (serif, sans-serif, monospace, etc.) as a reliable fallback. Well-designed font stacks ensure consistent typographic appearance across different operating systems and devices.", "task": "Set the font family of the element to use 'Courier, monospace'. This creates a font stack where 'Courier' is the first choice and 'monospace' ensures a final generic fallback option is available, creating a typewriter-like effect for the text.", "previewHTML": "

This text needs a monospace font applied to it. Notice how each character takes up the same width in monospace fonts.

", @@ -336,7 +336,7 @@ }, { "id": "css-units-relative-absolute", - "title": "CSS Units: Comparing Relative and Absolute Measurements", + "title": "Units", "description": "CSS offers various measurement units, categorized as either relative or absolute. Relative units (like %, em, rem, vh, vw) scale based on other factors and are essential for responsive design. For instance, 'rem' units scale relative to the root element's font size, while '%' units are proportional to parent element dimensions. Absolute units (like px, pt, cm, in) maintain fixed dimensions regardless of context. Modern web development favors relative units for their adaptability across different screen sizes and user preferences, especially for accessible design.", "task": "Set the width of the responsive element to '80%' of its parent container and its font-size to '18px'. Percentage width enables the element to adapt to different screen sizes, while pixel units provide precise control for font sizes.", "previewHTML": "
This element should have responsive width and font size.
", @@ -389,7 +389,7 @@ }, { "id": "css-specificity", - "title": "CSS Specificity: Understanding Rule Precedence", + "title": "Specificity", "description": "CSS specificity determines which styles are applied when multiple conflicting rules target the same element. Specificity follows a hierarchical system: inline styles have the highest specificity, followed by ID selectors, then class/attribute/pseudo-class selectors, and finally element/pseudo-element selectors. The specificity value can be conceptualized as a four-part score (inline, ID, class, element). Understanding specificity is crucial for predictable styling and debugging CSS conflicts.", "task": "Look at the two rules targeting paragraph text. Based on CSS specificity, determine which text color will be applied to the paragraph with class 'highlight' by completing the rule using either '#ff0000' (red) or '#0000ff' (blue).", "previewHTML": "

Which color will this paragraph have?

", @@ -412,7 +412,7 @@ }, { "id": "css-layout-display-property", - "title": "CSS Layout: The Display Property", + "title": "Display", "description": "The 'display' property defines how an element behaves in the document flow and in relation to other elements. Common values include 'block', 'inline', 'inline-block', 'flex', 'grid', and 'none'. Block elements start on a new line and take up the full width available, inline elements flow within the text and only take up as much width as necessary, and inline-block elements combine aspects of both. The display property is fundamental to controlling layout in CSS and serves as the foundation for more complex positioning techniques.", "task": "Change the display property of the span element to 'block' to make it behave like a block-level element rather than an inline element. This will make it start on a new line and take up the full width available.", "previewHTML": "

This is a paragraph with a span that should become a block element.

", @@ -446,7 +446,7 @@ }, { "id": "css-flexbox-basics", - "title": "CSS Flexbox: Container and Items", + "title": "Flex Basics", "description": "Flexbox is a powerful layout model that makes it easier to design flexible responsive layouts. It consists of flex containers and flex items. The container is the parent element with 'display: flex' or 'display: inline-flex' set, while items are the direct children within. Flexbox provides properties for controlling direction, alignment, order, and proportions of items. With flexbox, complex layouts that would require tricky positioning and floats can be achieved with much cleaner and more maintainable code.", "task": "Create a basic flexbox container by adding 'display: flex' to the parent element. Then set flex-direction to 'row' to make the items display horizontally (this is the default behavior, but it's good to specify it explicitly).", "previewHTML": "
Item 1
Item 2
Item 3
", diff --git a/lessons/01-advanced-selectors.json b/lessons/01-advanced-selectors.json index 6d233f0..71c0880 100644 --- a/lessons/01-advanced-selectors.json +++ b/lessons/01-advanced-selectors.json @@ -1,13 +1,13 @@ { "$schema": "../schemas/code-crispies-module-schema.json", "id": "css-advanced-selectors", - "title": "CSS: Advanced Selectors", + "title": "Adv. Selectors", "description": "Master advanced CSS selector techniques including attribute selectors, combinators, and pseudo-classes. This module builds on basic selectors to give you precise control over element targeting, enabling sophisticated styling patterns and interactive effects.", "difficulty": "intermediate", "lessons": [ { "id": "attribute-selectors", - "title": "Attribute Selectors: Targeting by HTML Attributes", + "title": "[attribute]", "description": "Attribute selectors allow you to target elements based on their HTML attributes and attribute values. They are incredibly powerful for styling forms, links, and other elements with specific attributes. The basic syntax uses square brackets: [attribute] selects elements with that attribute, [attribute=\"value\"] selects elements where the attribute equals exactly that value, and [attribute^=\"value\"] selects elements where the attribute starts with that value. You can style these selected elements using properties like border to add visual boundaries and background-color to highlight specific form fields or links.", "task": "Create a CSS rule using an attribute selector that targets all input elements with type=\"text\". Give them a lightblue background and a 2px solid blue border.", "previewHTML": "
\n

\n

\n

\n

\n
", @@ -70,7 +70,7 @@ }, { "id": "attribute-partial-matching", - "title": "Attribute Partial Matching", + "title": "Attr Matching", "description": "Attribute selectors support partial matching patterns that let you target elements based on portions of attribute values. The [attribute^=\"value\"] selector matches elements where the attribute starts with the specified value, [attribute$=\"value\"] matches where it ends with the value, and [attribute*=\"value\"] matches where the value appears anywhere within the attribute. These patterns are particularly useful for styling external links, file types, or elements with class names that follow naming conventions. When styling these matched elements, you can use properties like color to change text color and text-decoration to add visual emphasis like underlines.", "task": "Create a CSS rule that targets all anchor elements (a) with href attributes starting with \"https\". Style them with green text color and underline text decoration.", "previewHTML": "

Different Types of Links

\n", @@ -130,7 +130,7 @@ }, { "id": "child-combinator", - "title": "Child Combinator: Direct Children Only", + "title": "Child (>)", "description": "The child combinator (>) selects elements that are direct children of another element, not grandchildren or deeper descendants. This is crucial when you have nested structures where you want to style only the outer level. For example, in a navigation menu with dropdowns, you might want main menu items to have different styling than submenu items. The child combinator (>) gives you surgical precision - ul > li targets only direct list items, while ul li would target ALL list items including nested ones. This prevents style inheritance chaos in complex layouts.", "task": "Use the child combinator to target only the direct li children of .main-nav. Give them a cornflowerblue background and white text color. Notice how the nested submenu items remain completely unstyled!", "previewHTML": "", @@ -188,7 +188,7 @@ }, { "id": "descendant-combinator", - "title": "Descendant Combinator: All Nested Elements", + "title": "Descendant", "description": "The descendant combinator uses a space between selectors to target elements that are nested anywhere inside other elements, regardless of how deeply nested they are. For example, nav a selects all anchor elements inside navigation elements, whether they're direct children or nested several levels deep. This is broader than the child combinator and is useful for applying consistent styling to all elements of a certain type within a container. When styling descendants, you can use properties like text-decoration to control link appearance and color to set consistent text colors throughout a section. The descendant combinator is one of the most commonly used combinators in CSS.", "task": "Use the descendant combinator to target all anchor elements (a) inside the nav element. Remove their underlines with text-decoration: none and make them blue.", "previewHTML": "\n

This link outside nav should not be affected.

", @@ -246,7 +246,7 @@ }, { "id": "adjacent-sibling-combinator", - "title": "Adjacent Sibling Combinator: The Next Element", + "title": "Adjacent (+)", "description": "The adjacent sibling combinator (+) selects an element that immediately follows another element at the same level in the HTML structure. Both elements must share the same parent, and there can be no other elements between them. For example, h1 + p selects paragraph elements that come directly after h1 headings. This combinator is particularly useful for styling elements that have special relationships, like the first paragraph after a heading, or labels that follow form inputs. When styling adjacent siblings, you can use properties like margin-top to adjust spacing and font-style to add emphasis like italics to create visual hierarchy.", "task": "Use the adjacent sibling combinator to target paragraphs that immediately follow h2 headings. Remove their top margin with margin-top: 0 and make them italic.", "previewHTML": "

First Heading

\n

This paragraph directly follows h2 (should be affected).

\n

This paragraph comes after another paragraph (should NOT be affected).

\n

Second Heading

\n

This paragraph also directly follows h2 (should be affected).

\n
This div comes after h2 but is not a paragraph.
\n

This paragraph comes after a div (should NOT be affected).

", @@ -304,7 +304,7 @@ }, { "id": "general-sibling-combinator", - "title": "General Sibling Combinator: All Following Siblings", + "title": "Sibling (~)", "description": "The general sibling combinator (~) selects all elements that follow another element at the same level, not just the immediately adjacent one. Unlike the adjacent sibling combinator, there can be other elements between the target elements, as long as they all share the same parent and the selected elements come after the reference element. For example, h2 ~ p selects all paragraph elements that appear after any h2 heading at the same level. When styling general siblings, you can use properties like color to change text color and padding-left to create visual indentation, helping to show the relationship between related content sections.", "task": "Use the general sibling combinator to target all paragraphs that come after the h3 heading (at the same level). Give them a gray color and 20px of left padding.", "previewHTML": "
\n

This paragraph comes before h3 (should NOT be affected).

\n

Section Title

\n

First paragraph after h3 (should be affected).

\n
Some other content in between
\n

Second paragraph after h3 (should also be affected).

\n More content\n

Third paragraph after h3 (should also be affected).

\n
", @@ -362,7 +362,7 @@ }, { "id": "hover-pseudo-class", - "title": "The :hover Pseudo-Class", + "title": ":hover", "description": "The :hover pseudo-class applies styles when a user hovers their mouse over an element. This creates interactive feedback that improves user experience by providing visual cues about clickable or interactive elements. Hover effects are commonly used on links, buttons, and other interactive elements to indicate their interactive nature. When creating hover effects, you can use properties like background-color to change the background on hover and color to change text color, creating clear visual feedback. The :hover pseudo-class only applies while the mouse cursor is positioned over the element, reverting to the normal state when the cursor moves away.", "task": "Create a hover effect for the button element. On hover, change the background to darkblue and the text color to white.", "previewHTML": "

Interactive Button

\n

Hover over the button below to see the effect:

\n\n

The button should change colors when you hover over it.

", @@ -420,7 +420,7 @@ }, { "id": "first-child-pseudo-class", - "title": "The :first-child Pseudo-Class", + "title": ":first-child", "description": "The :first-child pseudo-class selects elements that are the first child of their parent element. This is useful for applying special styling to the first item in lists, the first paragraph in articles, or the first element in any container. For example, li:first-child selects the first list item in each list, while p:first-child selects paragraphs that are the first child element of their container. When styling first children, you can use properties like font-weight to make the first item bold and margin-top to adjust spacing, helping create visual hierarchy and improve the layout of your content.", "task": "Use the :first-child pseudo-class to target the first list item in each list. Make it bold and remove its top margin.", "previewHTML": "

Multiple Lists

\n

Fruits

\n\n

Colors

\n", diff --git a/lessons/02-css-only-carousel.json b/lessons/02-css-only-carousel.json index 593ed84..a9d6d2b 100644 --- a/lessons/02-css-only-carousel.json +++ b/lessons/02-css-only-carousel.json @@ -1,13 +1,13 @@ { "$schema": "../schemas/code-crispies-module-schema.json", "id": "css-carousels", - "title": "CSS Carousels", + "title": "Carousels", "description": "Learn to create modern, accessible carousels using pure CSS with scroll snapping, scroll buttons, and scroll markers. This module covers advanced CSS features that enable interactive carousel components without JavaScript, focusing on responsive design and user accessibility.", "difficulty": "intermediate", "lessons": [ { "id": "basic-horizontal-scroll", - "title": "Creating a Basic Horizontal Scroll Container", + "title": "Scroll Container", "description": "Before building carousels, we need to understand how to create horizontally scrolling containers. A scroll container is created by setting the overflow-x property to scroll on a container element. This allows content that exceeds the container's width to be scrolled horizontally instead of breaking to new lines or being hidden.", "task": "Create a horizontal scroll container by setting overflow-x: scroll on the .container element. This will allow the wide content inside to scroll horizontally.", "previewHTML": "
\n
Item 1
\n
Item 2
\n
Item 3
\n
Item 4
\n
Item 5
\n
", @@ -41,7 +41,7 @@ }, { "id": "scroll-snap-introduction", - "title": "Adding Scroll Snap Behavior", + "title": "Scroll Snap", "description": "Scroll snapping makes carousels feel more polished by ensuring that items align properly after scrolling. The scroll-snap-type property is applied to the scroll container, while scroll-snap-align is applied to the items inside. The x mandatory value means horizontal snapping is required.", "task": "Add scroll snapping to the container by setting scroll-snap-type: x mandatory. Then add scroll-snap-align: center to the items so they snap to the center of the container.", "previewHTML": "
\n
Item 1
\n
Item 2
\n
Item 3
\n
Item 4
\n
Item 5
\n
\n

Try scrolling in the container above - items should snap into place!

", @@ -77,7 +77,7 @@ }, { "id": "flexbox-carousel-layout", - "title": "Building a Full-Width Item Carousel with Flexbox", + "title": "Full-Width Items", "description": "For carousels where each item takes the full width (like image slideshows), we use flexbox with flex: 0 0 100% on each item. This means: no grow (0), no shrink (0), and take 100% of the container width. Combined with a horizontal gap, this creates distinct pages.", "task": "Create a full-width carousel layout using flexbox. Set display: flex and gap: 20px on the container, then flex: 0 0 100% on the items.", "previewHTML": "
\n
Slide 1
\n
Slide 2
\n
Slide 3
\n
Slide 4
\n
", @@ -113,7 +113,7 @@ }, { "id": "scroll-buttons-basic", - "title": "Adding Scroll Buttons", + "title": "Scroll Buttons", "description": "CSS scroll buttons are created using the ::scroll-button() pseudo-element. You specify the direction (left, right, up, down) and set content to make them visible. The browser automatically handles the scrolling behavior and disables buttons when they can't scroll further.", "task": "Add scroll buttons by creating ::scroll-button(left) and ::scroll-button(right) pseudo-elements. Set their content to arrow symbols and style them with a font size and color.", "previewHTML": "
\n
Slide 1
\n
Slide 2
\n
Slide 3
\n
Slide 4
\n
", @@ -154,7 +154,7 @@ }, { "id": "scroll-markers-introduction", - "title": "Creating Scroll Markers", + "title": "Scroll Markers", "description": "Scroll markers are navigation dots that show your position in the carousel and allow jumping to specific slides. They're created using ::scroll-marker pseudo-elements on the slide items, and collected in a ::scroll-marker-group. The scroll-marker-group property must be set to after or before to enable them.", "task": "Enable scroll markers by setting scroll-marker-group: after on the carousel. Then style the markers using ::scroll-marker pseudo-elements with circular appearance.", "previewHTML": "
\n
Slide 1
\n
Slide 2
\n
Slide 3
\n
Slide 4
\n
", @@ -195,7 +195,7 @@ }, { "id": "active-marker-styling", - "title": "Highlighting the Active Marker", + "title": "Active Marker", "description": "The :target-current pseudo-class automatically selects the scroll marker that corresponds to the currently visible slide. This is essential for user experience as it shows which slide is active. You can style it differently to indicate the current position.", "task": "Use the :target-current pseudo-class to highlight the active scroll marker. Change its background color to make it stand out from inactive markers.", "previewHTML": "
\n
Slide 1
\n
Slide 2
\n
Slide 3
\n
Slide 4
\n
\n

Scroll or click markers to see the active state change!

", @@ -226,7 +226,7 @@ }, { "id": "multi-column-carousel", - "title": "Multi-Item Carousel with CSS Columns", + "title": "Multi-Item", "description": "For responsive carousels showing multiple items per page, CSS multi-column layout is ideal. Using columns: 1 creates full-width columns, and items flow naturally into each column. The ::column pseudo-element represents each generated column and can have scroll-snap alignment.", "task": "Create a multi-item carousel using columns: 1 for the layout and scroll-snap-align: center on the ::column pseudo-elements to snap to each column.", "previewHTML": "
\n
Item 1
\n
Item 2
\n
Item 3
\n
Item 4
\n
Item 5
\n
Item 6
\n
Item 7
\n
Item 8
\n
", @@ -262,7 +262,7 @@ }, { "id": "complete-carousel-styling", - "title": "Creating a Complete Styled Carousel", + "title": "Complete Carousel", "description": "A professional carousel combines all the features we've learned: scroll snapping, scroll buttons, scroll markers, and proper styling for different states. This includes hover effects, disabled states for buttons, and positioning for optimal user experience.", "task": "Complete the carousel by adding hover effects to buttons using :hover, styling disabled buttons with :disabled, and ensuring the marker group has proper flexbox layout.", "previewHTML": "
\n
🌅 Slide 1
\n
🌄 Slide 2
\n
🏔️ Slide 3
\n
🌊 Slide 4
\n
🌆 Slide 5
\n
", diff --git a/lessons/02-selectors.json b/lessons/02-selectors.json index a0fbe2e..0cefd14 100644 --- a/lessons/02-selectors.json +++ b/lessons/02-selectors.json @@ -1,7 +1,7 @@ { "$schema": "../schemas/code-crispies-module-schema.json", "id": "selectors", - "title": "WIP: Specificity", + "title": "Specificity", "description": "Master the art of targeting HTML elements using various CSS selectors, from basics to specificity rules.", "difficulty": "beginner", "lessons": [ diff --git a/lessons/03-colors.json b/lessons/03-colors.json index a11508b..7607599 100644 --- a/lessons/03-colors.json +++ b/lessons/03-colors.json @@ -1,7 +1,7 @@ { "$schema": "../schemas/code-crispies-module-schema.json", "id": "colors-backgrounds", - "title": "WIP: Colors & Backgrounds", + "title": "Colors", "description": "Learn how to apply and manipulate colors, backgrounds, and graphical fills using CSS properties.", "difficulty": "beginner", "lessons": [ diff --git a/lessons/04-typography.json b/lessons/04-typography.json index 8073c00..0205fbe 100644 --- a/lessons/04-typography.json +++ b/lessons/04-typography.json @@ -1,7 +1,7 @@ { "$schema": "../schemas/code-crispies-module-schema.json", "id": "typography-fonts", - "title": "Typography & Fonts", + "title": "Typography", "description": "Learn how to control text appearance through font selection, sizing, spacing, and decorative effects.", "difficulty": "beginner", "lessons": [ diff --git a/lessons/07-layouts.json b/lessons/07-layouts.json index 1cc70ce..8c93fd7 100644 --- a/lessons/07-layouts.json +++ b/lessons/07-layouts.json @@ -1,13 +1,13 @@ { "$schema": "../schemas/code-crispies-module-schema.json", "id": "layouts", - "title": "Flexbox & Grid", + "title": "Layouts", "description": "Master modern CSS layout techniques with Flexbox and Grid for responsive, powerful designs.", "difficulty": "intermediate", "lessons": [ { "id": "layouts-1", - "title": "Flexbox Fundamentals", + "title": "Flex Basics", "description": "Learn the core properties of Flexbox to align, distribute space, and order items in a container.", "task": "Set .flex-container to display: flex, and center its children both horizontally and vertically.", "previewHTML": "
1
2
3
", @@ -25,7 +25,7 @@ }, { "id": "layouts-2", - "title": "Flexbox Advanced Features", + "title": "Flex Advanced", "description": "Control wrapping, ordering, and flexible growth/shrink of items in a flex container.", "task": "Allow items to wrap and set .flex-item to flex: 1 1 100px.", "previewHTML": "
A
B
C
", @@ -47,7 +47,7 @@ }, { "id": "layouts-3", - "title": "Grid Layout Basics", + "title": "Grid Basics", "description": "Define grid containers, set rows and columns, and place items in a structured grid.", "task": "Set .grid-container to display: grid with three equal columns and a 1rem gap.", "previewHTML": "
1
2
3
4
", @@ -76,7 +76,7 @@ }, { "id": "layouts-4", - "title": "Grid Item Placement", + "title": "Grid Placement", "description": "Control the span and position of grid items with grid-column and grid-row.", "task": "Span the first grid item across 2 columns using grid-column: 1 / span 2.", "previewHTML": "
Featured
2
3
4
", diff --git a/lessons/10-tailwind-basics.json b/lessons/10-tailwind-basics.json index 66d75ed..58ddd19 100644 --- a/lessons/10-tailwind-basics.json +++ b/lessons/10-tailwind-basics.json @@ -1,14 +1,14 @@ { "$schema": "../schemas/code-crispies-module-schema.json", "id": "tailwind-basics", - "title": "Tailwind: Basics", + "title": "Tailwind", "description": "Learn how Tailwind CSS revolutionizes styling by replacing traditional CSS selectors with utility-first classes. Understand the philosophy behind utility classes and how they solve common CSS problems like specificity conflicts and maintenance complexity.", "mode": "tailwind", "difficulty": "beginner", "lessons": [ { "id": "bg-colors", - "title": "Background Colors", + "title": "Backgrounds", "description": "Learn to apply background colors using Tailwind utilities.", "task": "Add a blue background to the div using Tailwind classes.", "previewHTML": "
Hello Tailwind!
", @@ -26,7 +26,7 @@ }, { "id": "utility-first-philosophy", - "title": "Understanding Utility-First Design", + "title": "Utility-First", "description": "Tailwind CSS follows a utility-first approach where instead of writing custom CSS classes, you compose designs using small, single-purpose utility classes. Unlike traditional CSS where you might write .card { background: white; padding: 1rem; border-radius: 0.5rem; }, Tailwind provides pre-built utilities like bg-white, p-4, and rounded.

The bg-white utility sets background-color: white, p-4 applies padding: 1rem on all sides, and rounded adds border-radius: 0.25rem. This approach eliminates the need to context-switch between HTML and CSS files.", "task": "Create a white card-like container with a small drop-shadow, 1rem padding and rounded corners.", "previewHTML": "
\n
\n

Card Title

\n

This is a card component built entirely with utility classes!

\n
\n
", @@ -59,7 +59,7 @@ }, { "id": "text-utilities", - "title": "Text Color and Size Utilities", + "title": "Text Utilities", "description": "Tailwind provides comprehensive text utilities for styling typography. Text colors use the pattern text-{color}-{shade} where colors include red, blue, green, etc., and shades range from 50 (lightest) to 950 (darkest). For example, text-blue-600 applies a medium blue color.

Text sizes follow the pattern text-{size} with options like text-sm (0.875rem), text-base (1rem), text-lg (1.125rem), text-xl (1.25rem), and larger sizes up to text-9xl. Font weights use font-{weight} such as font-normal, font-medium, font-semibold, and font-bold.", "task": "Style the heading with text-blue-600 for color, text-2xl for size, and font-bold for weight.", "previewHTML": "
\n

Welcome to Tailwind CSS

\n

This heading demonstrates text utilities in action.

\n
", @@ -87,7 +87,7 @@ }, { "id": "spacing-utilities", - "title": "Spacing with Padding and Margin", + "title": "Spacing", "description": "Tailwind's spacing utilities follow a consistent pattern using a spacing scale where each unit represents 0.25rem (4px). Padding utilities use p-{size} for all sides, px-{size} for horizontal (left/right), py-{size} for vertical (top/bottom), or individual sides like pt-{size}, pr-{size}, pb-{size}, pl-{size}.

Common sizes include p-2 (0.5rem), p-4 (1rem), p-6 (1.5rem), and p-8 (2rem). Margin follows the same pattern but uses m- instead of p-. For example, mx-auto centers an element horizontally by applying automatic left and right margins.", "task": "Style the button with px-6 for horizontal padding, py-3 for vertical padding, and mx-auto to center it.", "previewHTML": "
\n \n
", @@ -115,7 +115,7 @@ }, { "id": "responsive-design", - "title": "Responsive Design with Breakpoint Prefixes", + "title": "Breakpoints", "description": "Tailwind uses a mobile-first responsive design approach with breakpoint prefixes. The base utilities apply to all screen sizes, then you add prefixes for larger screens: sm: (640px+), md: (768px+), lg: (1024px+), xl: (1280px+), and 2xl: (1536px+).

For example, text-base md:text-lg lg:text-xl makes text normal size on mobile, larger on tablets (md), and even larger on desktop (lg). Each breakpoint overrides the previous one, so p-4 md:p-6 lg:p-8 means 1rem padding on mobile, 1.5rem on tablets, and 2rem on desktop.

Width utilities like w-full (100% width), w-1/2 (50% width), or fixed sizes like w-64 (16rem) can also be made responsive.", "task": "Make the box responsive: w-full on mobile, md:w-1/2 on tablets, and lg:w-1/3 on desktop. Also add responsive text sizing with text-lg, md:text-xl, and lg:text-2xl.", "previewHTML": "
\n
\n Responsive Box
\n Resize your browser to see the effect!\n
\n
", diff --git a/lessons/20-html-elements.json b/lessons/20-html-elements.json index 9d668e3..7410d07 100644 --- a/lessons/20-html-elements.json +++ b/lessons/20-html-elements.json @@ -1,7 +1,7 @@ { "$schema": "../schemas/code-crispies-module-schema.json", "id": "html-elements", - "title": "HTML Elements: Block vs Inline", + "title": "HTML Elements", "description": "Understanding the fundamental difference between container (block) and inline elements", "mode": "html", "difficulty": "beginner", @@ -32,7 +32,7 @@ }, { "id": "semantic-containers", - "title": "Semantic Container Elements", + "title": "Semantic Tags", "description": "Modern HTML uses semantic containers that describe their content:

<header> - Page or section header
<nav> - Navigation links
<main> - Main content area
<section> - Thematic grouping
<article> - Self-contained content
<footer> - Page or section footer", "task": "Create a basic page structure:
1. Add a <header> with an <h1> containing the text 'My Website'
2. Add a <main> element with a paragraph saying 'Welcome to my site!'
3. Add a <footer> with a paragraph saying 'Copyright 2025'", "previewHTML": "", @@ -66,7 +66,7 @@ }, { "id": "div-vs-span", - "title": "Generic Containers: div and span", + "title": "div & span", "description": "When you need a container without semantic meaning:

<div> - Generic block container (for layout/grouping)
<span> - Generic inline container (for styling text portions)

Use semantic elements when possible, div/span when no semantic element fits.", "task": "Wrap the word 'highlighted' in a <span> to style it differently. Wrap the whole quote in a <div>.", "previewHTML": "", diff --git a/lessons/21-html-forms-basic.json b/lessons/21-html-forms-basic.json index 6933576..e199d60 100644 --- a/lessons/21-html-forms-basic.json +++ b/lessons/21-html-forms-basic.json @@ -1,7 +1,7 @@ { "$schema": "../schemas/code-crispies-module-schema.json", "id": "html-forms-basic", - "title": "HTML Forms: Basic Inputs", + "title": "Form Inputs", "description": "Learn to create forms with various input types", "mode": "html", "difficulty": "beginner", diff --git a/lessons/22-html-forms-validation.json b/lessons/22-html-forms-validation.json index b00fff0..94f448e 100644 --- a/lessons/22-html-forms-validation.json +++ b/lessons/22-html-forms-validation.json @@ -1,7 +1,7 @@ { "$schema": "../schemas/code-crispies-module-schema.json", "id": "html-forms-validation", - "title": "HTML Forms: Validation", + "title": "Validation", "description": "Learn HTML5 built-in form validation attributes", "mode": "html", "difficulty": "intermediate", @@ -32,7 +32,7 @@ }, { "id": "input-constraints", - "title": "Input Constraints", + "title": "Constraints", "description": "Control what users can enter:

minlength / maxlength - Text length limits
min / max - Number range
pattern - Regex pattern matching
placeholder - Hint text (not a label!)", "task": "Add validation to the password input:
1. Add minlength=\"8\" for minimum length
2. Add maxlength=\"20\" for maximum length
3. Add placeholder=\"Enter password\" as a hint", "previewHTML": "", @@ -61,7 +61,7 @@ }, { "id": "complete-registration", - "title": "Complete Registration Form", + "title": "Full Form", "description": "Build a complete registration form with all validation concepts:

- Required fields marked with *
- Email validation (use type=\"email\")
- Password with length constraints
- Terms checkbox (required)
- Submit button", "task": "Complete the registration form. Add required attributes, proper input types, and validation constraints.", "previewHTML": "", diff --git a/lessons/23-html-details-summary.json b/lessons/23-html-details-summary.json index 59ff8be..2c6dcc9 100644 --- a/lessons/23-html-details-summary.json +++ b/lessons/23-html-details-summary.json @@ -1,14 +1,14 @@ { "$schema": "../schemas/code-crispies-module-schema.json", "id": "html-details-summary", - "title": "Details & Summary: Disclosure Widgets", + "title": "Disclosure", "description": "Create expandable content sections without JavaScript", "mode": "html", "difficulty": "beginner", "lessons": [ { "id": "details-summary-basic", - "title": "Your First Disclosure Widget", + "title": "First Widget", "description": "The <details> element creates a collapsible section. The <summary> provides the clickable label.

Click the summary to toggle the hidden content - no JavaScript needed!", "task": "Create a <details> element with:
1. A <summary> saying 'Click to reveal'
2. A <p> with the text 'This content was hidden!'", "previewHTML": "", diff --git a/lessons/24-html-progress-meter.json b/lessons/24-html-progress-meter.json index 5dcfa6e..46e6677 100644 --- a/lessons/24-html-progress-meter.json +++ b/lessons/24-html-progress-meter.json @@ -1,7 +1,7 @@ { "$schema": "../schemas/code-crispies-module-schema.json", "id": "html-progress-meter", - "title": "Progress & Meter Elements", + "title": "Progress/Meter", "description": "Display completion status and scalar measurements natively", "mode": "html", "difficulty": "beginner", diff --git a/lessons/25-html-datalist.json b/lessons/25-html-datalist.json index 067d23c..9dda987 100644 --- a/lessons/25-html-datalist.json +++ b/lessons/25-html-datalist.json @@ -1,7 +1,7 @@ { "$schema": "../schemas/code-crispies-module-schema.json", "id": "html-datalist", - "title": "Datalist: Autocomplete Inputs", + "title": "Datalist", "description": "Provide suggestions for text inputs without JavaScript", "mode": "html", "difficulty": "beginner", diff --git a/lessons/26-html-data-attributes.json b/lessons/26-html-data-attributes.json index 1ad2a7c..a8e03c2 100644 --- a/lessons/26-html-data-attributes.json +++ b/lessons/26-html-data-attributes.json @@ -1,7 +1,7 @@ { "$schema": "../schemas/code-crispies-module-schema.json", "id": "html-data-attributes", - "title": "Custom Data Attributes", + "title": "Data Attrs", "description": "Store custom data on HTML elements with data-* attributes", "mode": "html", "difficulty": "beginner", diff --git a/lessons/27-html-dialog.json b/lessons/27-html-dialog.json index 15b0a32..28b3501 100644 --- a/lessons/27-html-dialog.json +++ b/lessons/27-html-dialog.json @@ -1,7 +1,7 @@ { "$schema": "../schemas/code-crispies-module-schema.json", "id": "html-dialog", - "title": "Native Dialog Element", + "title": "Dialogs", "description": "Create modal dialogs without JavaScript libraries", "mode": "html", "difficulty": "beginner", @@ -47,7 +47,7 @@ }, { "id": "dialog-form", - "title": "Dialog with Form", + "title": "Dialog + Form", "description": "Dialogs can contain full forms. The method=\"dialog\" makes the form close the dialog on submit instead of sending data.

This pattern is perfect for confirmation dialogs, quick inputs, or settings panels.", "task": "Create a confirmation dialog:
1. Add open to show it
2. An <h2> saying 'Confirm Delete'
3. A <p> asking 'Are you sure?'
4. A <form method=\"dialog\"> with Cancel and Delete buttons", "previewHTML": "", diff --git a/lessons/28-html-forms-fieldset.json b/lessons/28-html-forms-fieldset.json index 5be0f2c..6cb24ea 100644 --- a/lessons/28-html-forms-fieldset.json +++ b/lessons/28-html-forms-fieldset.json @@ -1,7 +1,7 @@ { "$schema": "../schemas/code-crispies-module-schema.json", "id": "html-forms-fieldset", - "title": "Forms with Fieldsets", + "title": "Fieldsets", "description": "Group form controls with fieldset and legend elements", "mode": "html", "difficulty": "beginner", diff --git a/lessons/29-html-figure.json b/lessons/29-html-figure.json index 6eeb8ee..dcd5cb5 100644 --- a/lessons/29-html-figure.json +++ b/lessons/29-html-figure.json @@ -1,7 +1,7 @@ { "$schema": "../schemas/code-crispies-module-schema.json", "id": "html-figure", - "title": "Figure & Figcaption", + "title": "Figure", "description": "Create self-contained content with captions", "mode": "html", "difficulty": "beginner", diff --git a/lessons/30-html-tables.json b/lessons/30-html-tables.json index a60d32c..1d35a4e 100644 --- a/lessons/30-html-tables.json +++ b/lessons/30-html-tables.json @@ -1,7 +1,7 @@ { "$schema": "../schemas/code-crispies-module-schema.json", "id": "html-tables", - "title": "HTML Tables", + "title": "Tables", "description": "Create structured data tables with headers and captions", "mode": "html", "difficulty": "beginner", diff --git a/lessons/31-html-marquee.json b/lessons/31-html-marquee.json index 696ed3c..385b67e 100644 --- a/lessons/31-html-marquee.json +++ b/lessons/31-html-marquee.json @@ -1,7 +1,7 @@ { "$schema": "../schemas/code-crispies-module-schema.json", "id": "html-marquee", - "title": "The Marquee Element", + "title": "Marquee", "description": "Create scrolling text with the classic (deprecated but fun!) marquee element", "mode": "html", "difficulty": "beginner", diff --git a/lessons/32-html-svg.json b/lessons/32-html-svg.json index b7c0a44..663ec2b 100644 --- a/lessons/32-html-svg.json +++ b/lessons/32-html-svg.json @@ -1,7 +1,7 @@ { "$schema": "../schemas/code-crispies-module-schema.json", "id": "html-svg", - "title": "SVG Basics", + "title": "SVG", "description": "Draw scalable vector graphics directly in HTML", "mode": "html", "difficulty": "beginner", diff --git a/lessons/tailwindcss.json b/lessons/tailwindcss.json index 654f612..e15ea10 100644 --- a/lessons/tailwindcss.json +++ b/lessons/tailwindcss.json @@ -1,7 +1,7 @@ { "$schema": "../schemas/code-crispies-module-schema.json", "id": "tailwindcss-basics", - "title": "Tailwind CSS Basics", + "title": "TW Basics", "description": "Learn how to use Tailwind CSS utility classes to quickly style your HTML elements", "difficulty": "beginner", "lessons": [