freeCodeCamp/create-your-first-css-grid.english.md at bfe76794c069c492202512d29b09e3b134a5d943

Files

Randell Dawson 41718abf76 fix(learn): consolidate comments for responsive web design cert (#38256 )

Related to PR #38040

This PR is an attempt to consolidate/remove as many comments in the challenge seed code in the Responsive Web Design certification challenges, to be able to create a small translation lookup object for translating the English comments to other languages.

2020-02-27 20:50:46 +05:30

1.7 KiB

Raw Blame History

id, title, challengeType, videoUrl, forumTopicId

id	title	challengeType	videoUrl	forumTopicId
5a858944d96184f06fd60d61	Create Your First CSS Grid	0	https://scrimba.com/p/pByETK/cqwREC4	301129

Description

Turn any HTML element into a grid container by setting its display property to grid. This gives you the ability to use all the other properties associated with CSS Grid. Note: In CSS Grid, the parent element is referred to as the container and its children are called items.

Instructions

Change the display of the div with the container class to grid.

Tests

tests:
  - text: <code>container</code> class should have a <code>display</code> property with a value of <code>grid</code>.
    testString: assert(code.match(/.container\s*?{[\s\S]*display\s*?:\s*?grid\s*?;[\s\S]*}/gi));

Challenge Seed

<style>
  .d1{background:LightSkyBlue;}
  .d2{background:LightSalmon;}
  .d3{background:PaleTurquoise;}
  .d4{background:LightPink;}
  .d5{background:PaleGreen;}

  .container {
    font-size: 40px;
    width: 100%;
    background: LightGray;
    /* Only change code below this line */

    
    /* Only change code above this line */
  }
</style>

<div class="container">
  <div class="d1">1</div>
  <div class="d2">2</div>
  <div class="d3">3</div>
  <div class="d4">4</div>
  <div class="d5">5</div>
</div>

Solution

var code = ".container {display: grid;}"

1.7 KiB Raw Blame History