CSS Assignment – 4

Basic Questions

  1. Create a grid container with display: grid; and two child boxes.
  2. Define a grid with 2 columns and 2 rows using grid-template-columns and grid-template-rows.
  3. Create a grid with 3 equal columns (1fr 1fr 1fr).
  4. Add spacing between grid items using grid-gap: 10px;.
  5. Align grid items to the center using justify-items: center;.
  6. Place one item into the second column with grid-column-start and grid-column-end.
  7. Make a div semi-transparent using opacity: 0.5;.
  8. Add a simple box shadow behind a card.
  9. Apply text-shadow to a heading.
  10. Create a linear gradient background from blue to green.
  11. Apply a radial gradient to a div background.
  12. Set a blur filter on an image using filter: blur(5px);.
  13. Adjust brightness of an image with filter: brightness(70%);.
  14. Create a circular image using clip-path: circle().
  15. Apply a polygonal clip-path (clip-path: polygon(…)) to crop a div.
  16. Add a smooth hover color change for a button using transition: 0.5s;.
  17. Apply transition-timing-function: ease-in; to a hover effect.
  18. Create a text block that fades in using opacity transition.
  19. Animate a box to move left to right using @keyframes.
  20. Create a hover effect that enlarges a card slightly (transform: scale(1.05)).

Intermediate Questions

  1. Create a 3×3 grid layout and place 9 boxes inside it.
  2. Build a layout where the first row takes 100px height and the second auto-adjusts.
  3. Create a grid layout with a sidebar (1fr) and content (3fr).
  4. Use grid-template-areas to build a layout with header, sidebar, and footer.
  5. Make items span across two columns using grid-column: span 2;.
  6. Align all items at the bottom of their grid cells.
  7. Make the grid responsive by using repeat(auto-fill, minmax(150px, 1fr)).
  8. Apply multiple box shadows to create a glowing button.
  9. Use a conic gradient as a background.
  10. Add an image with a grayscale filter (filter: grayscale(100%)).
  11. Apply a hover effect that adds drop-shadow to an image.
  12. Stack text with two different text-shadow values for a 3D effect.
  13. Create a gradient overlay (linear gradient + background-image together).
  14. Create a star-shaped div using clip-path: polygon(…).
  15. Apply an image mask that hides half the image using clip-path: ellipse().
  16. Animate a bouncing ball with @keyframes (transform: translateY).
  17. Create a fade-in effect for text on page load.
  18. Animate a rotating loader using @keyframes and infinite rotation.
  19. Make a button change background-color smoothly with transition.
  20. Delay an animation by 2 seconds with animation-delay.

Advanced Questions

  1. Create a full 2D dashboard layout using grid-template-areas (header / sidebar / content / footer).
  2. Build a responsive image gallery with auto-adjusting columns using auto-fit and minmax().
  3. Design a layout where the sidebar is sticky using Grid + position: sticky.
  4. Mix Grid and Flexbox: Use Grid for overall layout, and Flexbox for navigation inside the header.
  5. Create a radial gradient background animation using CSS @keyframes.
  6. Build a Neumorphism-style card with subtle shadows and gradients.
  7. Create a circular profile image with a gradient border using clip-path and linear-gradient.
  8. Animate a progress bar filling up using @keyframes and width property.
  9. Create a text typing effect using @keyframes and ch steps().
  10. Build a hover effect where an image darkens and text fades in over it using transitions + opacity.