🧱 Assignment: Building Blocks with Display Properties

Task 1: Color Blocks (15 points)

Create 3 colored blocks using display: block;

Requirements:

• Use <div> elements
• Add display: block;
• Each block: different background color, 100px height, padding 20px
• Add text inside each block

Example Code:

<div style="display: block; background-color: #667eea; 
            height: 100px; padding: 20px; margin: 10px 0; 
            color: white;">
    Block 1
</div>
        

Expected Result:

Task 2: Inline Tags (15 points)

Create a paragraph with inline highlighted words.

Requirements:

• Use <p> for paragraph
• Use <span> with display: inline;
• Highlight at least 5 words with different colors
• Add background color and padding to spans

Example Code:

<p style="font-size: 18px;">
    I love <span style="display: inline; background-color: yellow; 
    padding: 3px;">HTML</span> and 
    <span style="display: inline; background-color: lightblue; 
    padding: 3px;">CSS</span>.
</p>
        

Expected Result:

Task 3: Button Row with Inline-Block (20 points)

Create a row of buttons using display: inline-block;

Requirements:

• Create 4 buttons using <div>
• Each button: display: inline-block;
• Width: 150px, Height: 50px
• Different colors, centered text
• Margin: 5px between buttons

Example Code:

<div style="display: inline-block; width: 150px; height: 50px;
            background-color: #667eea; color: white; 
            text-align: center; line-height: 50px; 
            margin: 5px; border-radius: 5px;">
    Button 1
</div>
        

Expected Result:

Task 4: Card Grid (25 points)

Create a grid of product cards using display: inline-block;

Requirements:

• Create 6 cards (2 rows of 3)
• Each card: width 250px, padding 20px
• Use display: inline-block;
• Each card contains: heading, image placeholder, description, price
• Add border and margin to cards

Example Code:

<div style="display: inline-block; width: 250px; 
            border: 2px solid #ddd; padding: 20px; 
            margin: 10px; border-radius: 8px; 
            vertical-align: top;">
    
    <h3 style="margin-top: 0; color: #667eea;">Product 1</h3>
    
    <div style="width: 100%; height: 150px; 
                background-color: #e9ecef; margin: 10px 0; 
                text-align: center; line-height: 150px; 
                color: #666;">
        Image Placeholder
    </div>
    
    <p>Quality product description here.</p>
    
    <p style="color: #28a745; font-size: 24px; 
              font-weight: bold;">$49.99</p>
    
</div>

<!-- Repeat 5 more times with different products -->
        

Example Output:

Task 5: Mixed Layout (25 points)

Create a page header combining all three display types.

Requirements:

• Container div (block) with background color
• Logo div (inline-block) on left - 100x100px
• Navigation links (inline-block) on right
• Badge spans (inline) inside navigation

Structure:

<div style="display: block; background-color: #2c3e50; 
            padding: 20px;">
    
    <!-- Logo -->
    <div style="display: inline-block; width: 100px; 
                height: 100px; background-color: #667eea; 
                color: white; text-align: center; 
                line-height: 100px;">
        LOGO
    </div>
    
    <!-- Nav Links -->
    <div style="display: inline-block; margin-left: 50px;">
        <a href="#" style="display: inline-block; color: white; 
                          padding: 10px 20px; margin: 0 5px;">
            Home <span style="display: inline; background-color: red; 
                              padding: 2px 6px; border-radius: 10px; 
                              font-size: 12px;">New</span>
        </a>
    </div>
    
</div>
        

Expected Result:

Task 6: Challenge - Dashboard Layout (30 points)

Build a mini dashboard combining everything.

Requirements:

• Main container (block)
• 4 stat boxes (inline-block) - showing numbers like "150 Users", "45 Orders"
• Each stat box: 200px wide, different colors
• Below stats: 3 wider cards (inline-block) for "Recent Activity"
• Use inline spans for small badges/labels

Sample Output:

Answer these in comments in your HTML:

1. When would you use inline-block instead of block?
2. Why can't inline elements have width and height?
3. What's the main advantage of inline-block over inline?
4. How do you center inline-block elements?
5. Can you change a span to display: block? What happens?