containing

,
, and elements.","Give the main element a profile-card class, then style its border and spacing."],"explanation":"Semantic elements describe the content first; a reusable class then controls the card presentation.","solution":"
\n
Ada Lovelace
\n
First computer programmer and mathematical thinker.
\n View projects\n
\n","languageSolutions":{"htmlcss":"
\n
Ada Lovelace
\n
First computer programmer and mathematical thinker.
\n View projects\n
\n"},"starterCode":{"htmlcss":"
\n \n
"},"walkthrough":["Create one semantic container.","Add the name, description, and action link.","Style the card and turn the link into a clear action."],"walkthroughCode":["
","

Ada Lovelace

First computer programmer.

",".profile-card { padding: 24px; border: 2px solid #7fd8f0; }"],"points":10},{"id":"beginner-htmlcss-2","title":"Create a responsive action row","task":"Create Save and Cancel buttons in a flex row. On screens 520px wide or smaller, stack them vertically.","checkQuestion":"Does your HTML + CSS code include every required part and run without errors?","acceptedKeywords":[["button"],["display","flex"],["@media"],["flex-direction","column"]],"languageChecks":{"htmlcss":"$7:props:children:1:props:steps:1:acceptedKeywords"},"hints":["Use display: flex and gap on .actions.","Inside @media (max-width: 520px), change flex-direction to column."],"explanation":"Flexbox handles the normal row, while one small media query adapts the same controls for narrow screens.","solution":"

\n \n \n

\n","languageSolutions":{"htmlcss":"

\n \n \n

\n"},"starterCode":{"htmlcss":"

\n \n

\n"},"walkthrough":["Add both action buttons.","Lay them out with flexbox.","Add a narrow-screen override."],"walkthroughCode":["\n",".actions { display: flex; gap: 12px; }","@media (max-width: 520px) { .actions { flex-direction: column; } }"],"points":10},{"id":"beginner-htmlcss-3","title":"Style a status list","task":"Make a three-item unordered list. Mark one item done with a class and show it with a line through the text.","checkQuestion":"Does your HTML + CSS code include every required part and run without errors?","acceptedKeywords":[["ul"],["li"],["done"],["line-through"]],"languageChecks":{"htmlcss":"$7:props:children:1:props:steps:2:acceptedKeywords"},"hints":["Use one

children.","Add class=\"done\" to one item and target .done in CSS."],"explanation":"A state class keeps meaning in the HTML and appearance in CSS, making the pattern easy to reuse.","solution":"
- Read the lesson
- Try the challenge
- Review the solution
\n","languageSolutions":{"htmlcss":"
- Read the lesson
- Try the challenge
- Review the solution
\n"},"starterCode":{"htmlcss":"
"},"walkthrough":["Create the list structure.","Identify the completed item with a class.","Style that state without changing the other items."],"walkthroughCode":["
- One
- Two
- Three
","
Read the lesson