1. Personal Portfolio Website
Objective: Build a personal portfolio showcasing your work.
Key Concepts: Flexbox, Grid, Responsive Design.
2. Landing Page Design
Objective: Design a product landing page.
Key Concepts: Flexbox, Buttons, Forms.
3. E-commerce Product Card
Objective: Create a product card for e-commerce.
Key Concepts: Box Model, Flexbox, Hover Effects.
4. CSS Animated Navigation Menu
Objective: Build an animated navigation bar.
Key Concepts: Transitions, Hover Effects, Flexbox.
5. CSS Pricing Table
Objective: Create a responsive pricing table.
Key Concepts: Grid Layout, Media Queries.
6. CSS Form Design
Objective: Design custom forms.
Key Concepts: Form Styling, Input Focus, Hover Effects.
7. Sticky Sidebar Layout
Objective: Create a layout with a sticky sidebar.
Key Concepts: Positioning, Flexbox, Fixed Positioning.
8. CSS Image Gallery
Objective: Build an image gallery with hover effects.
Key Concepts: Grid Layout, Hover Effects, Modals.
9. Parallax Scrolling Website
Objective: Create a parallax scrolling effect.
Key Concepts: Background Attachments, Scroll Events.
10. CSS Slideshow/Carousel
Objective: Build an image slider.
Key Concepts: CSS Animations, Transitions, Flexbox.
11. CSS Loading Spinner
Objective: Create a loading spinner.
Key Concepts: CSS Animations, Border Radius.
12. CSS Tooltip
Objective: Build a custom tooltip.
Key Concepts: Positioning, Transitions, Hover Effects.
13. CSS Modal Window
Objective: Design a modal window.
Key Concepts: Positioning, Flexbox, Transitions.
14. CSS Timeline
Objective: Create a vertical timeline.
Key Concepts: Flexbox, Pseudo-elements.
15. CSS 3D Card Flip
Objective: Create a 3D card flip effect.
Key Concepts: 3D Transforms, Perspective, Hover Effects.