Beginner Projects

Build these on your own using what you learned in Level 1. Start from clean, semantic HTML (see HTML), keep all styles in an external stylesheet, and check it with the CSS Validator.

1. Style a Personal Profile Page

Give a simple profile page a color palette, a readable font stack, a comfortable line length (max-width in ch), styled links with hover and focus states, and a round profile photo.

2. Recipe Card

Style a recipe as a card: border, radius, padding, and shadow; a styled ingredients list with custom markers; numbered steps; and a small table of cooking times with zebra stripes.

3. Navigation Bar

Turn a ul of links into a horizontal navigation bar with Flexbox: logo on the left, links on the right, a highlighted current page, and visible keyboard focus.

4. Pricing Cards

Three pricing plans side by side with Flexbox, equal heights, a highlighted "Most popular" plan, and buttons styled consistently.

5. Styled Contact Form

Style labels, inputs, a select, a text area, and a submit button: full-width fields, clear focus rings, and hover and disabled button states.