CSS Assignment Set
CSS Syntax and Selectors
Assignment 1: Selector Showcase
Create a webpage that demonstrates your understanding of CSS
selectors by styling different HTML elements. The page should include:
- A header with a title
- A navigation menu with at least 5 links
- 3 article sections each containing a heading, paragraph, and image
- A sidebar with a list of items
- A footer with contact information
Apply different CSS selectors to style these elements:
1. Use element selectors for basic styling
2. Use class selectors for common styles
3. Use ID selectors for unique elements
4. Implement at least 2 attribute selectors
5. Use pseudo-classes for interactive elements
6. Include at least 3 different combinators (child, adjacent sibling, etc.)
Assignment 2: Nested Menu Challenge
Create a multi-level dropdown navigation menu using only HTML and
CSS. Requirements:
- Main navigation with at least 5 items
- Each main item should have 3-5 sub-items
- At least 2 items should have a third level of navigation
- Use hover pseudo-class to reveal dropdown menus
- Style each level differently using descendant selectors
- Implement different states for active, visited, and hover
Box Model
Assignment 1: Product Card Layout
Create a responsive product showcase page with cards. Requirements:
- Design at least 5 product cards displayed in a grid
- Each card should include: image, title, description, price, and button
- Apply proper padding, margin, and borders to each card
- Use box-sizing to ensure consistent sizing
- Implement hover effects that modify border, shadow, or scale
- Cards should adjust their layout at different screen sizes
Assignment 2: Profile Dashboard
Create a user profile dashboard with multiple sections using the box
model. Requirements:
- Header with profile picture and user information
- Main section with tabs or panels for different information categories
- Stats section with at least 3 metrics displayed as boxes
- Activity feed with scrollable content
- Settings panel with form elements
- Use border-radius, box-shadow, and outline properties
- Implement various border styles in different dashboard components
Colors
Assignment 1: Color Theme Builder
Create a webpage that showcases a cohesive color scheme.
Requirements:
- Implement a 5-color palette (primary, secondary, accent, background,
text)
- Use at least 3 different color formats (hex, rgb/rgba, hsl/hsla)
- Create sections demonstrating different color combinations
- Include a gradient section with at least 2 different gradients
- Implement color transitions on interactive elements
- Use opacity/transparency in at least 2 components
Assignment 2: Interactive Color Exploration
Create an interactive page where users can see different color
applications. Requirements:
- Design 3 themed sections (e.g., light, dark, colorful)
- Include buttons that switch between color themes
- Each theme should change at least 5 CSS color properties
- Use CSS variables to manage color values
- Implement color contrast guidelines for accessibility
- Include at least one section with a background image with color
overlay
Typography
Assignment 1: Typography Hierarchy
Create a webpage that demonstrates typographic hierarchy.
Requirements:
- Include all heading levels (h1-h6) with appropriate styling
- Design paragraphs with proper line height, spacing, and font size
- Implement at least 2 different font families (one serif, one sans-serif)
- Create styled blockquotes and citations
- Include a section with lists (ordered, unordered, definition)
- Design a section with highlighted text, code blocks, and keyboard
input
- Implement proper text alignment for different content types
Assignment 2: Responsive Text Newsletter
Create a responsive newsletter template with various text elements.
Requirements:
- Design a newsletter with header, multiple article sections, and footer
- Implement responsive font sizes that adjust to screen width
- Create pull quotes and highlighted sections
- Style links with different states (hover, visited, active)
- Include text columns for wider screens
- Implement proper spacing between text elements
- Use text-shadow and letter-spacing for styling certain elements
Units
Assignment 1: Flexible Layout System
Create a flexible webpage layout using relative units. Requirements:
- Design a page with header, navigation, content area, and footer
- Use em/rem units for all text sizing
- Implement percentage-based widths for layout components
- Create at least one element sized with viewport units
- Design a component that uses the calc() function
- Ensure the layout works smoothly across different screen sizes
- Include a section with nested elements that inherit sizing
Assignment 2: Unit Comparison Page
Create a webpage that demonstrates different CSS units side by side.
Requirements:
- Create sections comparing px vs em vs rem sizing
- Design elements using viewport units (vw, vh, vmin, vmax)
- Implement percentage-based elements in different contexts
- Create a component that uses ch units for text-based sizing
- Build a responsive grid using fractional units (fr) with CSS Grid
- Include examples showing how different units behave when the page
is resized
- Implement at least one animation that uses relative units
