Chapter 13 Intermediate 58 Questions

Practice Questions — The Box Model - Margin, Border, Padding

← Back to Notes
16 Easy
19 Medium
10 Hard

Topic-Specific Questions

Question 1
Easy
What is the actual rendered width?
.box {
  box-sizing: content-box;
  width: 200px;
  padding: 10px;
  border: 5px solid black;
}
Add content width + padding (both sides) + border (both sides).
230px (200 + 10 + 10 + 5 + 5)
Question 2
Easy
What is the actual rendered width?
.box {
  box-sizing: border-box;
  width: 200px;
  padding: 10px;
  border: 5px solid black;
}
border-box means width = total.
200px
Question 3
Easy
What does padding: 10px 20px mean?
Two-value shorthand.
Top and bottom padding are 10px, left and right are 20px.
Question 4
Easy
What does padding: 10px 20px 30px 40px do?
Four values go clockwise from top.
Top 10, right 20, bottom 30, left 40. Clockwise order.
Question 5
Easy
How do you center a 600px wide div horizontally on the page?
margin auto.
div { width: 600px; margin: 0 auto; }
Question 6
Easy
What does border-radius: 50% do on a 100x100 square?
Half the size in any direction.
Turns it into a circle.
Question 7
Easy
What are the border shorthand values in order?
Three parts.
width, style, color. Example: border: 2px solid #a855f7;
Question 8
Easy
What does box-shadow: 0 4px 6px rgba(0,0,0,0.1) create?
Positive y offset pushes the shadow down.
A subtle drop shadow 4px below the element with a 6px blur at 10% black opacity.
Question 9
Easy
What is the difference between outline and border?
One takes space, the other does not.
outline does NOT take up space (draws outside the border on top of other content). border takes up space and can shift layout.
Question 10
Easy
What is the universal box-sizing reset?
Applies border-box to everything.
*, *::before, *::after { box-sizing: border-box; }
Question 11
Medium
What is the total height?
div { height: 100px; padding: 20px; border: 5px solid; box-sizing: content-box; }
Add padding and border to height.
150px (100 + 20 + 20 + 5 + 5)
Question 12
Medium
What is the space between these two elements?
h1 { margin-bottom: 50px; }
p  { margin-top: 30px; }
Vertical margin collapse.
50px (the larger of the two collapses with the smaller).
Question 13
Medium
What does this make?
.avatar { width: 100px; height: 100px; border-radius: 50%; }
50% on a square.
A circle with 100px diameter.
Question 14
Medium
How do you round only the top-left and top-right corners?
Four-value border-radius.
border-radius: 12px 12px 0 0;
Question 15
Medium
Why does this button shift 2px when focused?
button:focus { border: 2px solid blue; }
Borders occupy space.
Because the border adds 2px on each side, changing the button's size and causing layout shift.
Question 16
Medium
What does margin: 20px auto 0 mean?
Three-value shorthand.
Top: 20px, left/right: auto (centers horizontally), bottom: 0.
Question 17
Medium
What does box-shadow: inset 0 2px 4px rgba(0,0,0,0.1) do?
inset.
Creates a shadow INSIDE the element, giving it a sunken or pressed-in look.
Question 18
Medium
How can you prevent vertical margin collapse between two elements?
Break the direct adjacency.
Add padding, a border, or use a flex/grid container -- anything that separates the touching margins. Using gap in flex/grid also avoids collapse.
Question 19
Medium
What does margin-top: -20px do?
Negative margin.
Pulls the element upward by 20px, potentially overlapping the element above it.
Question 20
Medium
Which border style is solid vs dashed vs dotted?
Common style keywords.
solid (continuous line), dashed (short line segments with gaps), dotted (round dots with gaps).
Question 21
Hard
What is the total width?
*, *::before, *::after { box-sizing: border-box; }
.box { width: 500px; padding: 40px; border: 10px solid; }
With the reset, border-box applies.
500px exactly. The content area inside is 500 - 80 (padding) - 20 (border) = 400px.
Question 22
Hard
What is the effective vertical gap?
.parent { padding: 10px; }
.parent > .a { margin-bottom: 30px; }
.parent > .b { margin-top: 20px; }
Margins inside a padded parent.
30px gap between the two children (collapse still happens -- they are siblings). The padding only affects the edges of the parent.
Question 23
Hard
What does this shadow look like?
box-shadow:
  0 1px 2px rgba(0,0,0,0.08),
  0 8px 24px rgba(0,0,0,0.12);
Two shadows stacked.
A realistic layered drop shadow: a crisp close shadow for contact, plus a softer larger shadow for ambient light diffusion.
Question 24
Hard
Why is border-box considered more intuitive than content-box?
Think: 'width: 300px' should mean what?
With border-box, width actually equals the rendered width of the box including padding and border. With content-box, adding padding or a border unexpectedly makes the box bigger, which often breaks layouts.
Question 25
Hard
When does margin collapse NOT happen?
Think about contexts that stop it.
Margin collapse does not happen: (1) between flex or grid children (flexbox and grid have their own spacing rules), (2) when the parent has padding or a border in between, (3) for horizontal margins, (4) for positioned elements (absolute/fixed), (5) for inline-block elements.

Mixed & Application Questions

Question 1
Easy
Which layer is innermost?
Content, padding, border, margin.
Content.
Question 2
Easy
Which layer pushes OTHER elements away?
The outermost one.
Margin.
Question 3
Easy
Which layer gives an element internal breathing room?
Space around the content inside the border.
Padding.
Question 4
Easy
Can the border layer have a background color of its own?
No, but the padding shows the element's background.
The background-color of the element fills the content AND padding areas by default, stopping at the border. The border itself has its own color.
Question 5
Easy
What does padding: 0 do?
Removes padding.
Removes all padding from the element on all four sides.
Question 6
Easy
Which value of border-radius turns a 150x150 square into a circle?
Half the size.
75px or 50%
Question 7
Medium
What is the pattern in padding: a b c (three values)?
Top, horizontal, bottom.
a = top, b = left and right (horizontal), c = bottom.
Question 8
Medium
What are the units of the box-shadow offsets?
Positive vs negative.
Lengths (usually px). Positive x moves right, positive y moves down. Negative moves in the opposite direction.
Question 9
Medium
Does outline-offset increase or decrease the distance from the element?
Positive values.
Positive outline-offset moves the outline further away from the element. Negative brings it closer or overlaps.
Question 10
Medium
What does margin: auto do vertically?
Block layout.
Nothing. auto for vertical margins computes to 0 in normal block layout. It only centers horizontally.
Question 11
Medium
Which CSS property adds rounded corners?
Rounded.
border-radius
Question 12
Medium
What is the difference between padding and margin?
Inside vs outside.
Padding is space INSIDE the border (between content and border). Margin is space OUTSIDE the border (between the element and its neighbors). Padding inherits the element's background; margin is always transparent.
Question 13
Medium
Why use outline instead of border for focus rings?
Layout shift.
outline does not take up space, so the element does not shift when focused. border would add pixels on each side, causing a visible jump.
Question 14
Medium
How do cards get that 'lifted' look?
box-shadow and border-radius.
Set a background-color (usually white), add box-shadow with positive y offset and a blur, and round the corners with border-radius. Example: background: white; border-radius: 12px; box-shadow: 0 10px 25px rgba(0,0,0,0.08);
Question 15
Medium
Why does * { box-sizing: border-box } appear at the top of so many stylesheets?
Default behavior is surprising.
The default box-sizing (content-box) adds padding and border ON TOP of the declared width, making elements wider than expected. The reset switches all elements to border-box so width means the total rendered width, matching intuition.
Question 16
Hard
What is the effect?
.card {
  box-shadow: 0 0 0 2px #a855f7, 0 4px 12px rgba(0,0,0,0.1);
}
Zero offsets with spread.
The first shadow creates a 2px purple ring around the card (like an extra border that does not affect size). The second adds a subtle drop shadow.
Question 17
Hard
What does this border-radius do?
border-radius: 100px / 50px;
Slash separates horizontal and vertical radii.
Creates elliptical corners: 100px horizontal radius and 50px vertical radius. The corners are wider than they are tall.
Question 18
Hard
Why does gap in flex/grid avoid margin collapse?
It is a different mechanism.
gap is a property of the flex/grid container, not a margin on the children. It creates spacing between items without using margins, so the collapse rules do not apply. It also applies uniformly to all sides between items.
Question 19
Hard
What is the difference between box-shadow and filter: drop-shadow()?
One follows the box, the other follows the shape.
box-shadow follows the rectangular box (affected by border-radius). filter: drop-shadow() follows the element's actual visual shape, including transparent areas in images or SVGs. drop-shadow works on pngs/svgs with transparency; box-shadow would shadow the whole rectangle.
Question 20
Hard
What happens if you set padding: 50% on a 200px wide element?
Percentages in padding refer to the parent's width (for ALL sides, including top/bottom).
Both vertical AND horizontal padding compute to 50% of the parent's width (not the element's own width). On a 200px wide parent, that is 100px of padding on all four sides.

Multiple Choice Questions

MCQ 1
Which is the CORRECT order of box model layers from inside out?
  • A. margin, padding, border, content
  • B. content, padding, border, margin
  • C. content, border, padding, margin
  • D. padding, content, border, margin
Answer: B
B is correct. From innermost to outermost: content, padding, border, margin.
MCQ 2
What is the default value of box-sizing?
  • A. border-box
  • B. content-box
  • C. padding-box
  • D. auto
Answer: B
B is correct. By default, width refers to content only. Modern projects override this to border-box.
MCQ 3
Which centers a 600px wide block element horizontally?
  • A. text-align: center
  • B. margin: 0 auto
  • C. padding-left: 50%
  • D. align: center
Answer: B
B is correct. margin: 0 auto with a defined width centers block elements horizontally in their parent.
MCQ 4
Which border-radius value makes a 200x200 square into a circle?
  • A. 20px
  • B. 100%
  • C. 50%
  • D. 180deg
Answer: C
C is correct. 50% border-radius on a square makes a perfect circle. 100% also produces the same visual result for squares.
MCQ 5
What does padding do?
  • A. Adds space outside the border
  • B. Adds space between content and border
  • C. Sets border thickness
  • D. Rounds corners
Answer: B
B is correct. Padding is the inner whitespace between the content and the border.
MCQ 6
Which shorthand sets padding: 10px 20px 30px 40px in TRBL order?
  • A. top right bottom left
  • B. top left bottom right
  • C. top bottom left right
  • D. left right top bottom
Answer: A
A is correct. Four-value shorthand is clockwise: Top, Right, Bottom, Left (TRBL).
MCQ 7
Which property creates a drop shadow on an element?
  • A. text-shadow
  • B. drop-shadow
  • C. box-shadow
  • D. shadow
Answer: C
C is correct. box-shadow adds a shadow to the element's box. text-shadow is for text only.
MCQ 8
What does outline NOT do that border does?
  • A. Have color
  • B. Support rounded corners and affect layout space
  • C. Be solid or dashed
  • D. Work on focus
Answer: B
B is correct. Outline does not take space and doesn't support per-side values or (fully) border-radius effects.
MCQ 9
Which creates an inset shadow (inside the box)?
  • A. box-shadow: inside 0 2px 4px #000
  • B. box-shadow: inset 0 2px 4px #000
  • C. box-shadow: inner 0 2px 4px #000
  • D. box-shadow-inset: 0 2px 4px #000
Answer: B
B is correct. The 'inset' keyword in box-shadow reverses the direction so the shadow appears inside the element.
MCQ 10
Which is valid border shorthand syntax?
  • A. border: solid 2px red
  • B. border: 2px solid red
  • C. border: red 2px solid
  • D. All of the above
Answer: D
D is correct. The border shorthand accepts width, style, and color in any order. 2px solid red is the most common convention.
MCQ 11
What is the rendered width of .box { box-sizing: content-box; width: 400px; padding: 30px; border: 2px solid; }?
  • A. 400px
  • B. 432px
  • C. 460px
  • D. 464px
Answer: D
D is correct. content-box: 400 + 30 + 30 + 2 + 2 = 464px.
MCQ 12
What is the rendered width of .box { box-sizing: border-box; width: 400px; padding: 30px; border: 2px solid; }?
  • A. 400px
  • B. 432px
  • C. 460px
  • D. 464px
Answer: A
A is correct. border-box: width IS the total = 400px. Padding and border eat into the content area.
MCQ 13
What happens with h1 { margin-bottom: 40px; } p { margin-top: 20px; }?
  • A. 60px gap
  • B. 40px gap (margins collapse)
  • C. 20px gap
  • D. 0px gap
Answer: B
B is correct. Vertical margins collapse into the larger value: 40px.
MCQ 14
Which prevents margin collapse between two adjacent block elements?
  • A. Nothing can prevent it
  • B. Add padding or a border to a parent between them, or use flex/grid
  • C. Use position: relative
  • D. Use display: inline
Answer: B
B is correct. Any separator between the touching margins prevents collapse. Flex and grid children never collapse.
MCQ 15
Which shadow produces a subtle, realistic card lift?
  • A. box-shadow: 20px 20px 0 black
  • B. box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1)
  • C. box-shadow: 50px 50px 100px red
  • D. box-shadow: 0 0 0 100px blue
Answer: B
B is correct. Small y-offset, soft blur, low-opacity black gives a realistic lift. Large offsets and high contrast look cartoonish.
MCQ 16
What does margin: 10px 20px 30px (3 values) mean?
  • A. top 10, right 20, bottom 30, left 0
  • B. top 10, left 20, bottom 30, right 0
  • C. top 10, right/left 20, bottom 30
  • D. all 10px
Answer: C
C is correct. Three values: top, horizontal (left/right shared), bottom.
MCQ 17
What is the benefit of a box-sizing universal reset?
  • A. Faster page load
  • B. Width means the total box size, matching intuition
  • C. Better SEO
  • D. Smaller CSS file
Answer: B
B is correct. border-box means width and height are the total, so adding padding does not blow out your layout.
MCQ 18
Which property is best for focus rings on buttons?
  • A. border
  • B. outline
  • C. margin
  • D. padding
Answer: B
B is correct. outline does not take up space, so focus does not shift the button. Always preserve visible focus for accessibility.
MCQ 19
How can negative margins be useful?
  • A. They are never useful
  • B. They pull elements closer or overlap them
  • C. They make elements invisible
  • D. They delete elements
Answer: B
B is correct. Negative margins can pull an element upward onto the previous one or leftward into a sibling. Useful for overlap effects.
MCQ 20
Which border style is best for subtle dividers?
  • A. ridge
  • B. double
  • C. solid with light color
  • D. dashed with thick width
Answer: C
C is correct. A thin solid line in a light color like #e5e7eb is the modern convention for subtle dividers.
MCQ 21
What does box-shadow's spread value do?
  • A. Rotates the shadow
  • B. Expands or shrinks the shadow uniformly in all directions before blur
  • C. Changes the color
  • D. Offsets the shadow diagonally
Answer: B
B is correct. Positive spread makes the shadow larger than the element; negative shrinks it. Useful for creating ring outlines.
MCQ 22
Which pair produces a realistic layered shadow?
  • A. box-shadow: 20px 20px red, 30px 30px blue
  • B. box-shadow: 0 1px 2px rgba(0,0,0,0.08), 0 8px 24px rgba(0,0,0,0.12)
  • C. box-shadow: 0 0 0 100px black, 0 0 0 200px white
  • D. box-shadow: inset 0 0 50px red
Answer: B
B is correct. Two shadows -- one crisp and close, one soft and larger -- mimic how real shadows look with both close contact and ambient light.
MCQ 23
What happens if you set padding-top: 100% on a child?
  • A. It errors
  • B. 100% refers to the parent's WIDTH, creating a square box with a 1:1 aspect ratio
  • C. 100% means the parent's height
  • D. It adds 100 pixels
Answer: B
B is correct. Percentage padding ALWAYS refers to the parent's width, including top and bottom. This is the classic aspect-ratio trick.
MCQ 24
Why use gap instead of margin in a flex container?
  • A. gap is faster
  • B. gap creates spacing between items without affecting the outer edges and does not collapse
  • C. margin does not work in flex containers
  • D. gap is the only way to center
Answer: B
B is correct. gap applies evenly between items, keeps items neatly spaced without manual margin trickery, and never collapses.
MCQ 25
Which border-radius value creates a pill-shaped button?
  • A. 0
  • B. 2px
  • C. 999px (or 9999px)
  • D. 50% width
Answer: C
C is correct. A very large border-radius value caps at the element's half-height, producing fully rounded pill ends.

Coding Challenges

Challenge 1: Profile Card

Easy
Build a profile card for 'Aarav Sharma' with a white background, 24px padding, 16px border-radius, a subtle box-shadow, and a heading plus short bio. The card should be 300px wide and centered on the page.
Sample Input
Open the HTML file
Sample Output
A centered white card with rounded corners, a drop shadow, and text inside.
Use the box-sizing universal reset. Use margin: 0 auto to center. No flexbox.
<!DOCTYPE html>
<html>
<head><style>
  *, *::before, *::after { box-sizing: border-box; }
  body { font-family: Arial, sans-serif; background: #f3f4f6; padding: 40px 0; margin: 0; }
  .card {
    width: 300px;
    background: white;
    padding: 24px;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    margin: 0 auto;
  }
  h2 { margin: 0 0 8px; color: #1a1a2e; }
  p { margin: 0; color: #4b5563; line-height: 1.6; }
</style></head>
<body>
  <div class="card">
    <h2>Aarav Sharma</h2>
    <p>Hi! I am 15 and I love building web apps and playing cricket after school.</p>
  </div>
</body>
</html>

Challenge 2: Circle Avatar

Easy
Create a 120x120 div with initials 'PS' centered inside. Make it a perfect circle using border-radius, give it a purple-to-cyan gradient background, and center the white bold initials.
Sample Input
Open the HTML file
Sample Output
A round gradient avatar with centered initials.
Use border-radius: 50%. Use flex for centering the initials.
<!DOCTYPE html>
<html>
<head><style>
  body { font-family: Arial, sans-serif; background: #f9fafb; padding: 60px; text-align: center; }
  .avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: linear-gradient(135deg, #a855f7, #06b6d4);
    color: white;
    font-size: 44px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    box-shadow: 0 10px 25px rgba(168, 85, 247, 0.3);
  }
</style></head>
<body>
  <div class="avatar">PS</div>
  <p>Priya Sharma</p>
</body>
</html>

Challenge 3: Centered Container

Medium
Build a page with a centered 800px max-width container holding a heading and two paragraphs. Add 40px horizontal padding inside the container. Use a light gray page background and white container background.
Sample Input
Open the HTML file
Sample Output
A centered white container on a gray page with comfortable internal padding.
Use max-width + margin: 0 auto. Box-sizing reset at top. No flexbox.
<!DOCTYPE html>
<html>
<head><style>
  *, *::before, *::after { box-sizing: border-box; }
  body { font-family: Arial, sans-serif; background: #e5e7eb; margin: 0; padding: 40px 0; }
  .container {
    max-width: 800px;
    margin: 0 auto;
    background: white;
    padding: 30px 40px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  }
  h1 { margin: 0 0 16px; color: #a855f7; }
  p { line-height: 1.6; color: #4b5563; }
</style></head>
<body>
  <div class="container">
    <h1>My First Centered Container</h1>
    <p>This container is 800px maximum width with margin 0 auto, so it stays centered regardless of viewport size. By Ishaan Reddy.</p>
    <p>The box-sizing reset makes width and padding behave predictably together. Resize the window to see the container stay centered.</p>
  </div>
</body>
</html>

Challenge 4: Pill-Shaped Button with Focus Ring

Medium
Create a pill-shaped purple button with white text, 14px vertical padding, 32px horizontal padding. When focused, show a visible outline 3px offset from the button so it does not shift. Add a subtle shadow.
Sample Input
Open the HTML file
Sample Output
A rounded purple button. Tab to it to see a focus ring without the button moving.
Use large border-radius. Use outline with outline-offset for focus. Do not remove the outline without replacing it.
<!DOCTYPE html>
<html>
<head><style>
  *, *::before, *::after { box-sizing: border-box; }
  body { font-family: Arial, sans-serif; padding: 60px; background: #f3f4f6; text-align: center; }
  .btn {
    padding: 14px 32px;
    background: #a855f7;
    color: white;
    border: none;
    border-radius: 9999px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 10px 25px rgba(168, 85, 247, 0.3);
  }
  .btn:focus {
    outline: 3px solid #06b6d4;
    outline-offset: 3px;
  }
</style></head>
<body>
  <button class="btn">Get Started</button>
  <p>Press Tab to focus the button by Kavya Patel.</p>
</body>
</html>

Challenge 5: Card Grid with Shadows

Hard
Build a grid of 4 cards side by side. Each card has padding, rounded corners, a layered box-shadow (two stacked shadows for realism), and a heading plus description. Use flex for the grid layout.
Sample Input
Open the HTML file
Sample Output
A row of 4 elegant cards with realistic layered shadows.
Use flex with gap. Use 2 stacked box-shadows. Box-sizing reset.
<!DOCTYPE html>
<html>
<head><style>
  *, *::before, *::after { box-sizing: border-box; }
  body { font-family: Arial, sans-serif; background: #f3f4f6; padding: 40px; margin: 0; }
  .grid { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; }
  .card {
    width: 220px;
    padding: 24px;
    background: white;
    border-radius: 14px;
    box-shadow:
      0 1px 3px rgba(0, 0, 0, 0.08),
      0 10px 30px rgba(0, 0, 0, 0.06);
  }
  .icon {
    width: 48px; height: 48px; border-radius: 12px;
    background: linear-gradient(135deg, #a855f7, #06b6d4);
    margin-bottom: 12px;
  }
  h3 { margin: 0 0 8px; color: #1a1a2e; font-size: 18px; }
  p  { margin: 0; color: #6b7280; line-height: 1.5; font-size: 14px; }
</style></head>
<body>
  <div class="grid">
    <div class="card"><div class="icon"></div><h3>Fast</h3><p>Load pages in under one second for every student.</p></div>
    <div class="card"><div class="icon"></div><h3>Secure</h3><p>Your data is encrypted at rest and in transit.</p></div>
    <div class="card"><div class="icon"></div><h3>Friendly</h3><p>Designed for learners age 10-18 by real teachers.</p></div>
    <div class="card"><div class="icon"></div><h3>Proven</h3><p>Over 500 students graduated with real projects.</p></div>
  </div>
</body>
</html>

Challenge 6: Stylized Product Card

Hard
Build a product card for 'Coding Kit' with: rounded top corners only (top image placeholder), 24px padding in the body, a title, a paragraph, a price row with the current and old prices, and a full-width rounded button. Add a layered shadow.
Sample Input
Open the HTML file
Sample Output
A card with an image area that has rounded top corners only, details below, and a button.
Use individual border-radius properties. Use overflow: hidden or border-radius on container. Layered shadow.
<!DOCTYPE html>
<html>
<head><style>
  *, *::before, *::after { box-sizing: border-box; }
  body { font-family: Arial, sans-serif; background: #f3f4f6; padding: 40px; margin: 0; display: flex; justify-content: center; }
  .card {
    width: 300px;
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow:
      0 1px 3px rgba(0, 0, 0, 0.08),
      0 20px 40px rgba(0, 0, 0, 0.1);
  }
  .image {
    height: 180px;
    background: linear-gradient(135deg, #a855f7, #06b6d4);
    color: white;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; font-weight: bold;
  }
  .body { padding: 24px; }
  h3 { margin: 0 0 8px; color: #1a1a2e; }
  .desc { color: #4b5563; font-size: 14px; line-height: 1.5; margin: 0 0 16px; }
  .prices { display: flex; align-items: baseline; gap: 10px; margin-bottom: 16px; }
  .now { font-size: 26px; font-weight: bold; color: #a855f7; }
  .was { font-size: 16px; color: #9ca3af; text-decoration: line-through; }
  .btn {
    display: block;
    width: 100%;
    padding: 12px;
    background: #1a1a2e;
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
  }
</style></head>
<body>
  <div class="card">
    <div class="image">Coding Kit</div>
    <div class="body">
      <h3>Beginner Coding Kit</h3>
      <p class="desc">Everything Meera needs to start coding: 12 lessons, exercises, and a cheat sheet PDF.</p>
      <div class="prices">
        <span class="now">Rs 1,499</span>
        <span class="was">Rs 2,499</span>
      </div>
      <button class="btn">Add to Cart</button>
    </div>
  </div>
</body>
</html>

Need to Review the Concepts?

Go back to the detailed notes for this chapter.

Read Chapter Notes

Want to learn web development with a live mentor?

Explore our Frontend Masterclass