CodePen

HTML

            
              <h3>How to make pancakes</h3>
<section>
  <p>Put the flour into a large bowl, make a well in the centre and pour in the milk and eggs. Give the liquid mixture a quick whisk before incorporating the flour. Continue to whisk until you have a smooth batter.</p>
  <p>Now add 1 tbsp vegetable oil and whisk thoroughly.</p>
  <p>Take a crêpe pan, or large frying pan, dip some kitchen roll in the oil and carefully wipe the inside of the pan. Heat the pan over a medium heat for a minute.</p>
  <p>Add just under a ladleful of batter to the pan and immediately start swirling it round the pan to get a nice even layer.</p>
  <p>Cook the pancake for approximately 30-40 seconds. Use a palette knife to lift the pancake carefully to look at the underside to check it is golden-brown before turning over. Cook the other side for approx 30-40 seconds and transfer to a serving plate.</p>
  </section>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              body {
  counter-reset: section;           /* Set the section counter to 0 */
}
p:before {
  counter-increment: section;      /* Increment the section counter */
  content: "Step  " counter(section) ": "; /* Display the counter */
    font-weight: bold;
  padding-top: 5px;
  padding-bottom: 10px;
  color: #242424;
  font-size: 20px;
}
h3 {
      font-weight: bold;
  padding-top: 5px;
  padding-bottom: 10px;
  color: #242424;
  font-size: 20px;
 text-align: center;
  font-family: arial;
}

section {
  width: 600px;
  margin: auto;
  font-size: 16px;
  line-height: 24px;
  font-family: arial;
}
p {
  margin-bottom: 10px;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................