refactor: shorten lesson titles and improve content
- Shorten verbose lesson titles for better sidebar display - Minor content improvements across lessons
This commit is contained in:
@@ -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: <kbd>[attribute]</kbd> selects elements with that attribute, <kbd>[attribute=\"value\"]</kbd> selects elements where the attribute equals exactly that value, and <kbd>[attribute^=\"value\"]</kbd> selects elements where the attribute starts with that value. You can style these selected elements using properties like <kbd>border</kbd> to add visual boundaries and <kbd>background-color</kbd> to highlight specific form fields or links.",
|
||||
"task": "Create a CSS rule using an attribute selector that targets all input elements with <kbd>type=\"text\"</kbd>. Give them a <kbd>lightblue</kbd> background and a <kbd>2px solid blue</kbd> border.",
|
||||
"previewHTML": "<form>\n <p><label>Name: <input type=\"text\" placeholder=\"Enter your name\"></label></p>\n <p><label>Email: <input type=\"email\" placeholder=\"Enter your email\"></label></p>\n <p><label>Password: <input type=\"password\" placeholder=\"Enter password\"></label></p>\n <p><button type=\"submit\">Submit</button></p>\n</form>",
|
||||
@@ -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 <kbd>[attribute^=\"value\"]</kbd> selector matches elements where the attribute starts with the specified value, <kbd>[attribute$=\"value\"]</kbd> matches where it ends with the value, and <kbd>[attribute*=\"value\"]</kbd> 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 <kbd>color</kbd> to change text color and <kbd>text-decoration</kbd> to add visual emphasis like underlines.",
|
||||
"task": "Create a CSS rule that targets all anchor elements (<kbd>a</kbd>) with <kbd>href</kbd> attributes starting with <kbd>\"https\"</kbd>. Style them with <kbd>green</kbd> text color and <kbd>underline</kbd> text decoration.",
|
||||
"previewHTML": "<h2>Different Types of Links</h2>\n<ul>\n <li><a href=\"https://example.com\">External HTTPS link</a></li>\n <li><a href=\"http://oldsite.com\">External HTTP link</a></li>\n <li><a href=\"#section1\">Internal anchor link</a></li>\n <li><a href=\"/about\">Relative link</a></li>\n <li><a href=\"https://secure-site.org\">Another HTTPS link</a></li>\n</ul>",
|
||||
@@ -130,7 +130,7 @@
|
||||
},
|
||||
{
|
||||
"id": "child-combinator",
|
||||
"title": "Child Combinator: Direct Children Only",
|
||||
"title": "Child (>)",
|
||||
"description": "The child combinator (<kbd>></kbd>) 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 (<kbd>></kbd>) gives you surgical precision - <kbd>ul > li</kbd> targets only direct list items, while <kbd>ul li</kbd> 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 <kbd>li</kbd> children of <kbd>.main-nav</kbd>. Give them a <kbd>cornflowerblue</kbd> background and <kbd>white</kbd> text color. Notice how the nested submenu items remain completely unstyled!",
|
||||
"previewHTML": "<ul class=\"main-nav\">\n <li>🏠 Home</li>\n <li>📱 Products\n <ul>\n <li>💻 Laptops</li>\n <li>📱 Phones</li>\n <li>⌚ Watches</li>\n </ul>\n </li>\n <li>ℹ️ About\n <ul>\n <li>👥 Team</li>\n <li>📍 Location</li>\n </ul>\n </li>\n <li>📧 Contact</li>\n</ul>",
|
||||
@@ -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, <kbd>nav a</kbd> 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 <kbd>text-decoration</kbd> to control link appearance and <kbd>color</kbd> 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 (<kbd>a</kbd>) inside the <kbd>nav</kbd> element. Remove their underlines with <kbd>text-decoration: none</kbd> and make them <kbd>blue</kbd>.",
|
||||
"previewHTML": "<nav>\n <ul>\n <li><a href=\"#\">Home</a></li>\n <li><a href=\"#\">About</a>\n <ul>\n <li><a href=\"#\">Our Team</a></li>\n <li><a href=\"#\">History</a></li>\n </ul>\n </li>\n <li><a href=\"#\">Contact</a></li>\n </ul>\n</nav>\n<p>This <a href=\"#\">link outside nav</a> should not be affected.</p>",
|
||||
@@ -246,7 +246,7 @@
|
||||
},
|
||||
{
|
||||
"id": "adjacent-sibling-combinator",
|
||||
"title": "Adjacent Sibling Combinator: The Next Element",
|
||||
"title": "Adjacent (+)",
|
||||
"description": "The adjacent sibling combinator (<kbd>+</kbd>) 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, <kbd>h1 + p</kbd> 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 <kbd>margin-top</kbd> to adjust spacing and <kbd>font-style</kbd> to add emphasis like italics to create visual hierarchy.",
|
||||
"task": "Use the adjacent sibling combinator to target paragraphs that immediately follow <kbd>h2</kbd> headings. Remove their top margin with <kbd>margin-top: 0</kbd> and make them italic.",
|
||||
"previewHTML": "<h2>First Heading</h2>\n<p>This paragraph directly follows h2 (should be affected).</p>\n<p>This paragraph comes after another paragraph (should NOT be affected).</p>\n<h2>Second Heading</h2>\n<p>This paragraph also directly follows h2 (should be affected).</p>\n<div>This div comes after h2 but is not a paragraph.</div>\n<p>This paragraph comes after a div (should NOT be affected).</p>",
|
||||
@@ -304,7 +304,7 @@
|
||||
},
|
||||
{
|
||||
"id": "general-sibling-combinator",
|
||||
"title": "General Sibling Combinator: All Following Siblings",
|
||||
"title": "Sibling (~)",
|
||||
"description": "The general sibling combinator (<kbd>~</kbd>) 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, <kbd>h2 ~ p</kbd> selects all paragraph elements that appear after any h2 heading at the same level. When styling general siblings, you can use properties like <kbd>color</kbd> to change text color and <kbd>padding-left</kbd> 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 <kbd>h3</kbd> heading (at the same level). Give them a <kbd>gray</kbd> color and <kbd>20px</kbd> of left padding.",
|
||||
"previewHTML": "<div>\n <p>This paragraph comes before h3 (should NOT be affected).</p>\n <h3>Section Title</h3>\n <p>First paragraph after h3 (should be affected).</p>\n <div>Some other content in between</div>\n <p>Second paragraph after h3 (should also be affected).</p>\n <span>More content</span>\n <p>Third paragraph after h3 (should also be affected).</p>\n</div>",
|
||||
@@ -362,7 +362,7 @@
|
||||
},
|
||||
{
|
||||
"id": "hover-pseudo-class",
|
||||
"title": "The :hover Pseudo-Class",
|
||||
"title": ":hover",
|
||||
"description": "The <kbd>:hover</kbd> 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 <kbd>background-color</kbd> to change the background on hover and <kbd>color</kbd> to change text color, creating clear visual feedback. The <kbd>:hover</kbd> 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 <kbd>darkblue</kbd> and the text color to <kbd>white</kbd>.",
|
||||
"previewHTML": "<h2>Interactive Button</h2>\n<p>Hover over the button below to see the effect:</p>\n<button type=\"button\">Hover Over Me</button>\n<p>The button should change colors when you hover over it.</p>",
|
||||
@@ -420,7 +420,7 @@
|
||||
},
|
||||
{
|
||||
"id": "first-child-pseudo-class",
|
||||
"title": "The :first-child Pseudo-Class",
|
||||
"title": ":first-child",
|
||||
"description": "The <kbd>:first-child</kbd> 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, <kbd>li:first-child</kbd> selects the first list item in each list, while <kbd>p:first-child</kbd> selects paragraphs that are the first child element of their container. When styling first children, you can use properties like <kbd>font-weight</kbd> to make the first item bold and <kbd>margin-top</kbd> to adjust spacing, helping create visual hierarchy and improve the layout of your content.",
|
||||
"task": "Use the <kbd>:first-child</kbd> pseudo-class to target the first list item in each list. Make it <kbd>bold</kbd> and remove its top margin.",
|
||||
"previewHTML": "<h2>Multiple Lists</h2>\n<h3>Fruits</h3>\n<ul>\n <li>Apple (first child)</li>\n <li>Banana</li>\n <li>Orange</li>\n</ul>\n<h3>Colors</h3>\n<ul>\n <li>Red (first child)</li>\n <li>Blue</li>\n <li>Green</li>\n</ul>",
|
||||
|
||||
Reference in New Issue
Block a user