Freecodecamp: Beta - CSS Grid - Use grid-column to control spacing - Add Visual Reference

[mstellaluna]

Challenge Name

http://localhost:3000/en/challenges/css-grid/use-gridcolumn-to-control-spacing

Issue Description

There isn't an issue with the challenge itself
But campers may have an issue visualizing the grid lines referred to in the challenge without a visual aid
Two possibilities.
Either:

1) we can add an external link to an image or reference documentation
2) add them to the preview

Browser Information

• Browser Name, Version:
• Operating System:
• Mobile, Desktop, or Tablet:

Your Code

Screenshot

ORIGINAL PREVIEW:

SUGGESTION 1: ADD EXTERNAL RESOURCE LINK:
css-tricks

SUGGESTION 2: ADD TO PREVIEW - so something like this I guess

[ahmadabdolsaheb]

@mstellaluna @moT01 adding a visual reference is a great idea.
option 1 is easier. maybe we make a simple diagram internally for this challenge.
option 2, adding the lines is also easy. I could just add a border to the cells; however, I am not sure if it would be helpful unless we started adding text and numbers outside the grid which might make the seed more complicated.

[moT01]

@ahmadabdolsaheb @mstellaluna

The hypothetical horizontal and vertical lines that create the grid are referred to as lines. These lines are numbered starting with 1 at the top left corner of the grid and count right for columns:

And down for rows:

Add some images with a little change of the description. What do you think?

[mstellaluna]

@moT01 @ahmadabdolsaheb you mean to the lesson? I think that would be easiest. Kind of how I believe its the anchor challenge in the basic HTML has a image in the lesson..

[moT01]

Yes @mstellaluna, those images would be directly in the description is what I had in mind.

[moT01]

I can add those

[mstellaluna]

@moT01 @ahmadabdolsaheb yea that is easiest way and the camper can always easily refer back to it

[ahmadabdolsaheb]

@moT01 @mstellaluna On the side note, would combining the two pictures save some space?

[moT01]

@ahmadabdolsaheb I would guess yes. I thought they would be easier to understand if they were separate. I'll add them and see how much space it's taking up - and maybe combine them if it doesn't look good.

[moT01]

@raisedadead hey, you said we dont want images in challenge descriptions, I had that planned for this - what if I just put the image in the seed code and it shows up in the preview?

[moT01]

okay, if we dont want images in the description - thats the new plan - put it in the seed code and show it in the preview... I see some other images hosted on aws @mstellaluna I think you were right - it looks like there's a freecodecamp account - do any of you know who can put a picture there for me? here's the new pic...

[mstellaluna]

I don't have access to the AWS account, I'm not sure who does.

[raisedadead]

@QuincyLarson can upload them to the bucket for you.

[raisedadead]

You can share a link or the image in this thread

[QuincyLarson]

@mstellaluna we have eliminated all images from freeCodeCamp's curriculum in favor of text-based explanations. There are a number of reasons for this (performance, offline capability, accessibility).

Instead of using an image, since this is a pretty simple thing, could we just build this using HTML and CSS and show it in the Preview section of the challenge, then have the camper interact with it some how?

[moT01]

How does this look? https://codepen.io/moT01/pen/OQqKyq?editors=1000

[ahmadabdolsaheb]

@moT01 looks good.

[QuincyLarson]

@ahmadabdolsaheb Yes - this looks great! You might also try just adding this to the lesson text since we can add HTML in there. That would simplify how the Preview pane and code editor look.

[ahmadabdolsaheb]

@QuincyLarson @moT01 the challenge seed only accepts inline html styling and writing inline animations is not possible. So i converted the styles to inline styles and removed the animation.
here is what I got:
https://codepen.io/abdolsa/pen/mxmYaw?editors=1000
let me know if it needs improvements or not. thanks

[moT01]

@ahmadabdolsaheb looks good to me :smile: