Scribd
Upload
0 views

CSS Assignment Set

Uploaded by

mh3947493
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
0 views

CSS Assignment Set

Uploaded by

mh3947493
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

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

You might also like