css challenges
1. “Create a mobile-friendly navigation bar using Flexbox.”
Hint: Use display: flex, justify-content: space-between, and padding.
Output:
2. “Style a card layout for a product or news article.”
Hint: Use box-shadow, border-radius, and hover effects.
Output:
3. “Add a dark mode toggle style to a webpage.”
Hint: Use a lass like .dark-mode and change background and text colors.
Ouput:
4. “Build a responsive image gallery with 2 columns on mobile and 4 on desktop.”
• Hint: Use CSS Grid and media queries.
Output:
5. “Style a call-to-action button that grows when hovered.”
• Hint: Use transition, transform: scale(1.1);, and a bright color.
Output:
6. “Create a sticky header that stays on top while scrolling.”
• Hint: Use position: sticky; top: 0; and z-index.
Output:
7. “Design a pricing table with three columns and a highlighted plan.”
• Hint: Use Flexbox or Grid and background-color for emphasis.
Output:
8. “Add animation to a loading spinner.”
• Hint: Use @keyframes and animation to rotate a div.
Output:
9. “Make a form input field that changes border color when focused.”
• Hint: Use the :focus pseudo-class
Output:
10. “Style a timeline for a project or life journey.”
• Hint: Use vertical Flexbox or pseudo-elements like ::before.
Output: