CSS Assignment – 5

Basic Questions

  1. Add a meta viewport tag in HTML for mobile responsiveness.
  2. Create text that resizes with the screen width using font-size: 5vw;.
  3. Use max-width: 100%; to make an image shrink responsively.
  4. Apply object-fit: cover; to keep an image from stretching.
  5. Create a paragraph with line-height scaling using em.
  6. Apply rem sizing to make consistent padding across 3 divs.
  7. Give a box width: 50% and observe how it adjusts across screen sizes.
  8. Write a media query that changes background coloUr when screen width < 600px.
  9. Create a button that increases font-size at breakpoint (768px).
  10. Apply a media query that hides a sidebar when screen < 500px.
  11. Set different text colours for mobile (under 600px) vs desktop (above 600px).
  12. Create a flex container with 3 items in a row.
  13. Stack the flex items in a column using flex-direction: column;.
  14. Create a 2-column grid with grid-template-columns: 1fr 1fr;.
  15. Add spacing between grid items using gap: 20px;.
  16. Define a CSS variable –main-colour and apply it to colour.
  17. Use var(–padding-size) to apply padding inside a div.
  18. Change a CSS variable value in a :hover state.
  19. Nest two selectors where a paragraph inside a div has different styles.
  20. Use margin-inline: auto; to centre a block element.

Intermediate Questions

  1. Make a mobile-first layout where the nav bar is stacked, but at min-width: 768px it becomes horizontal.
  2. Create media queries for 3 breakpoints: mobile (<600px), tablet (600–1024px), desktop (>1024px).
  3. Build a hero section that uses vh height responsiveness.
  4. Apply max-width: 1200px; to keep content from stretching on wide screens.
  5. Use min-height: 100vh; to create a full-screen hero section.
  6. Make headings scale using clamp(1rem, 5vw, 3rem);.
  7. Create a flexbox layout where direction switches between row and column depending on screen size.
  8. Use Grid to create a responsive 3-column layout that collapses to 1 column on mobile.
  9. Build a flex container with justify-content: space-between; that becomes center on small screens.
  10. Create a 2-row grid with different row heights using grid-template-rows.
  11. Use place-items: center; for centering content inside a grid.
  12. Use nested flexboxes: parent flex → child flex row → responsive stack on small screens.
  13. Create a responsive card layout with grid-auto-rows: minmax(150px, auto).
  14. Use CSS variables to define theme colors (–primary, –secondary) and apply them to 2 sections.
  15. Change theme (dark vs light) by redefining variables in :root.
  16. Combine variables with calc() for responsive margins.
  17. Use gap inside a flexbox container for spacing instead of margin.
  18. Create padding that works in block direction only using padding-block.
  19. Use margin-inline-start and margin-inline-end instead of left/right for logical independence.
  20. Nest 3 selectors using modern CSS nesting to style elements hierarchically.

Advanced Questions

  1. Create a responsive portfolio layout using Grid — four columns on desktop, two on tablet, one on mobile.
  2. Build a navbar that switches between hamburger menu on mobile and full nav on desktop.
  3. Implement a fully fluid image gallery using object-fit and minmax() with grid.
  4. Create a responsive split-screen hero section using Flexbox (image + text side-by-side on desktop, stacked on mobile).
  5. Build a theme switcher (light/dark) using CSS variables and a toggle button.
  6. Define spacing scale variables (–space-xs, –space-s, –space-m, etc.) and apply consistently to design.
  7. Use complex nesting with child selectors and variables for a module-based card layout.
  8. Build a CSS grid + media queries responsive dashboard layout (header, sidebar, content, footer).
  9. Create fluid typography using only responsive units: clamp() with rem + vw.
  10. Build a responsive form layout using grid-auto-flow and place-content: center;.