Practice Problems

Create a new HTML file for each problem, and use either internal or external CSS to style.

File Name: problem1.html
Create four <div> boxes of equal size.
Give each box a different background color using: one named color, one hex, one rgb(), and one hsl().
Add a paragraph inside each box naming the color format used.

File Name: problem2.html
Set a background image on the page (background-image: url(...)) and make it cover the entire viewport.
Add a <section> with a linear gradient background (any direction, any two colors).
Include text in the section to demonstrate color contrast.

File Name: problem3.html
Create a simple button (<button>) with a linear or radial gradient as its background.
Use CSS transitions or :hover effect to slightly change the gradient on hover (optional advanced twist).
Include text to label the button (e.g., “Click Me”).

After completing these exercises, call Mike over for feedback on your newly created HTML and CSS solutions.s.

File Name: problem4.html

Instructions:

HTML Structure:
- Create a standard HTML document.
- In the <body>, add a <div> with a class of "card".
- Inside the card, include:
  - A header element (e.g., <h2>) for the card title.
  - A <p> paragraph for a brief description.
  - A footer element (e.g., <p> or <div>) for additional details.
CSS Styling Requirements:
- Background Image with Gradient Overlay:
  - Apply a background image to the .card using background-image: url("path/to/your-image.jpg");.
  - Overlay a semi-transparent linear gradient on top of the background image (e.g., using background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("path/to/your-image.jpg");).
  - Use background-size: cover; to ensure the image covers the entire card.
- Color Formats in Text:
  - Style the card title using a named color (e.g., color: coral;).
  - Style the paragraph text using a hex code (e.g., color: #FFFFFF;).
  - In the footer, use an RGB or HSL value for the text color.
- Layout:
  - Add padding and a subtle border or box-shadow to enhance the card's appearance.
Objective:
Build a themed card component that combines a background image with a gradient overlay for readability. Practice using multiple color formats for different text elements and ensure the design is visually appealing.

File Name: problem5.html

Instructions:

HTML Structure:
- Create a standard HTML document with three distinct sections:
  - A <header> for the page title.
  - A <section> for the main content.
  - A <footer> for additional information.
- Each section should have its own class or ID for styling (e.g., class="header-section", class="content-section", class="footer-section").
CSS Styling Requirements:
- Header Section:
  - Apply a background image using background-image: url("path/to/header-image.jpg"); and use background-size: cover; to fill the header.
- Content Section:
  - Use a linear gradient as the background (e.g., background: linear-gradient(to right, #FF5733, #FFC300);).
  - Ensure text contrasts well against the gradient.
- Footer Section:
  - Apply a radial gradient (e.g., background: radial-gradient(circle, #003366, #000000);) for a dramatic effect.
- Responsiveness:
  - Use CSS media queries (optional) to adjust background sizes or padding for smaller screens.
- Text Colors:
  - Style headings and paragraphs in each section using different color formats (named, hex, RGB, HSL) to demonstrate versatility.
Objective:
Create a multi-section, responsive layout that uses a mix of background images and gradients. This exercise reinforces applying different color formats and background properties across distinct sections of a webpage.

File Name: problem6.html

Instructions:

HTML Structure:
- Create a standard HTML document.
- In the <body>, add a <div> element with a class of "transition-box".
- Inside the <div>, include some text (e.g., <p>Hover over me!</p>) that explains the interactivity.
CSS Styling Requirements:
- Initial Background:
  - Set the initial background of the box using a linear gradient (e.g., background: linear-gradient(to right, #FF5733, #FFC300);).
  - Define dimensions (e.g., width: 300px; height: 150px;) and center the text.
- Transition Effect:
  - Use CSS transitions to smoothly change the background gradient when the box is hovered over.
  - On :hover, change the gradient to a different set of colors (e.g., background: linear-gradient(to right, #00BFFF, #1E90FF);).
- Additional Styling:
  - Optionally add a border or box-shadow that also transitions on hover for a more dynamic effect.
- Inline Check (Optional):
  - Add an inline style to one element within the box (like a <span>) to test the specificity and observe how it interacts with the hover effects.
Objective:
Develop an interactive box that demonstrates the use of CSS gradients and transitions. This problem helps you practice dynamic styling changes on user interaction while working with various color formats and hover effects.

Day 2: Colors, Background Images, and Gradients in CSS