devkodeCSS-session.md

Devkode CSS Session

Challenge 1

Create a below design without modifing HTML elements

<div class="wrapper">
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box c">C</div>
  <div class="box d">D</div>
</div>

Expected Output

Challenge 2

Create a skeleton loading screen

Expected Output

Challenge 3

Create a gallery as below using CSS Grid

Optional

• Add skeleton loading screen in the CSS grid before Images load
• Native image lazy loading

Expected Output

Challenge 4

Create a custom progress bar and Add a Two button which should Start and Stop the progress bar

Expected Output

Challenge 5

Create a custom progress bar which should indicate the completion progress of a task when user clicking on the button

Expected Output

Challenge 6

Make an equal spacing between child elements without modifing the html code and without using flex and grid

<div class="wrapper">
  <div class="box">A</div>
  <div class="box">B</div>
  <div class="box">C</div>
  <div class="box">D</div>
</div>

.wrapper {
  width: 300px;
  border: 1px solid #000;
}

.box {
  display: inline-block;
}

Expected Output

Important Questions

• Debounce and Throttling
• What is Reflow and Repaint
• What is RenderTree
• How do you Resetting and Normalization in CSS
• box model
• box sizing
• Shadow DOM
• How to view html Native element code in Developer tool?
• Specificity in css
• Pseudo-classes/ pseudo elements
• Nth child
• Clearfix css
• Transform and Transition
• Animation
• Minified CSS
• Flex, Grid, Inline block, Positions
• Native image lazy loading attribute
• CSS Coverage and Lighthouse