Loading...

Go Back

Finish
Go Back Course Outline

CSS Full Course


Practical Projects

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.

Go Back

Finish