CSS Assignment – 6

Basic Questions

  1. Re-write CSS for a button using separate class selectors instead of applying styles directly to the <button>.
  2. Create a style rule that uses a meaningful class name like .btn-primary instead of .red-button.
  3. Practice converting messy CSS classes into BEM format (.card__title, .card__button).
  4. Create a global CSS reset using * { margin: 0; padding: 0; }.
  5. Divide CSS into base, layout, and component files in a small project.
  6. Move inline styles from HTML into an external CSS file.
  7. Create CSS variables (–primary-color, –font-heading) for a landing page.
  8. Use shorthand for margin and padding (e.g., margin: 10px 20px;).
  9. Optimize CSS by grouping selectors that share the same style.
  10. Practice removing styles that are not applied to any HTML element.
  11. Create a hero section with separate BEM classes (.hero__title, .hero__subtitle, .hero__button).
  12. Convert a messy .col1 .col2 .col3 grid into a more meaningful flex/grid layout.
  13. Create a button hover effect with clean BEM (.btn–hover).
  14. Apply a consistent font-family across the project using root-level style.
  15. Optimize CSS by using one class for reusability instead of repeating inline styles on multiple divs.
  16. Write CSS class names in lowercase with hyphens (.main-nav) instead of camelCase.
  17. Document a CSS file with comments, grouping resets, typography, layout, and components.
  18. Create a responsive card layout with clear, reusable class names.
  19. Use minify tools or compressed form of CSS and compare with original.
  20. Create a 3-line comment block describing a CSS file’s module.

Intermediate Questions

  1. Refactor a basic navigation bar with BEM naming (.nav, .nav__item, .nav__link, .nav__link–active).
  2. Build a footer with BEM modifiers for theme (.footer–dark, .footer–light).
  3. Organize a portfolio CSS file into typography.css, layout.css, components.css.
  4. Create CSS variables for an entire project’s color palette & fonts.
  5. Use nesting (if available with PostCSS/SASS-like preprocessor) for .card > p.
  6. Split a single CSS file into partials (header.css, footer.css, etc.) & merge using @import.
  7. Practice using responsive units (rem, vw) instead of fixed px for maintainability.
  8. Identify and clean up duplicate CSS declarations in a file.
  9. Write CSS for .btn–small, .btn–medium, .btn–large variants with BEM modifiers.
  10. Re-organize bad class names (.box1, .box2) into proper semantic BEM names.
  11. Build a simple portfolio landing section with separate .portfolio__title, .portfolio__image
  12. Create a grid-based product card layout with .product__title, .product__image.
  13. Add hover effects using BEM (.product__button–hover).
  14. Optimize CSS in an e-commerce product listing page by using utility classes like .text-center.
  15. Create a responsive navigation bar with .nav__menu, .nav__item, .nav__toggle.
  16. Apply different spacing using utility classes (.m-1, .m-2) for consistency across a project.
  17. Implement media queries in a separate responsive.css file.
  18. Build a 2-column layout landing page with clean BEM classes.
  19. Add a call-to-action button styled using a reusable .btn + modifier.
  20. Use CSS variables (–padding-section, –primary-color) in a multi-section landing page.

Advanced Questions

  1. Refactor an entire multi-page website to use BEM methodology consistently (header, footer, sections, buttons).
  2. Optimize CSS by removing 30% unused rules using dev tools (e.g., Chrome Coverage or PurgeCSS).
  3. Write a style guide file (style.css) that includes base variables, colors, typography, utility classes, and reusables.
  4. Split a large CSS project into modular approach → base/, components/, layout/, themes/.
  5. Build a fully responsive personal portfolio with grid/flex sections: About Me, Projects, Contact.
  6. Create a responsive landing page for a startup (Hero, Features, Pricing, CTA).
  7. Build a complete e-commerce product listing page (grid of products + filters sidebar) with clean CSS organization.
  8. Design an animated dashboard page with BEM classes for .dashboard__card, .dashboard__chart, etc.
  9. Implement a theme switcher (light/dark) across an entire site using only CSS variables.
  10. Create a multi-page site (Home, About, Contact) using modular CSS + responsive layouts.