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":"$6: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