Freecodecamp: [beta] Move a Relatively Positioned Element with CSS Offsets - needs better verbiage

Created on 12 Feb 2018  路  26Comments  路  Source: freeCodeCamp/freeCodeCamp

Challenge Name

Applied Visual Design: Move a Relatively Positioned Element with CSS Offsets
https://beta.freecodecamp.org/en/challenges/applied-visual-design/move-a-relatively-positioned-element-with-css-offsets

Issue Description

I think it would be easier to understand the effect if it were explained that it's not really moving in the opposite direction, but rather it's moving away from the referenced side. You might say:
"Assigning a value to top moves the element away from the top, left moves the element away from the left side, etc."

learn

Most helpful comment

We want to tackle this current issue with the imgur, and then on whenever the audit is done on the code-base, we can collectively move over everything to S3.

As for Quincy's comment, I think, we want to keep it to the minimum where it becomes essential.

All 26 comments

I wonder if there is a way to add an additional visual element to help with the confusion?

One idea would be to adjust the challenge to be with colored blocks like in this Basic CSS challenge.

I think adding an image like the above blocks showing before and after with the CSS could be hugely beneficial. Maybe have two block on top of each other, one stays put while the user is able to adjust the CSS and see the second block move relative to the position of the first?

I think the simplest way to illustrate would be to take advantage of the fact that there's live output to editor changes (i.e, user could see what's going on as they make changes). Maybe including some default values would help:

Example:

<head>
    <style>
        h2 {
            position: relative;
            /*Only Change Code Below*/
            right: 10px;
            top: 5px;
            /*Only Change Code Above*/
        }
    </style>
</head>

<body>
    <h1>On Being Well-Positioned</h1>
    <h2>Move me!</h2>
    <p>I still think the h2 is where it normally sits.</p>
</body>

-Or-
a simple animated gif could illustrate the basic concept
fcc_css_offset_concept

Well, whatever you folks decide. My point is just that the current wording is actually going to cause confusion. I've learned the offsets before, and this is the first time I've seen an exercise that made it confusing.

@ReveurGAM I do agree with you still on the wording, we are just brain storming some other ideas to accompany the words.
Something like:

The CSS offsets of top or bottom, and left or right tell the browser how far to offset an item relative to where it would sit in the normal flow of the document. You're offsetting an element away from a given spot, which moves the element away from the referenced side (effectively, the opposite direction). As you saw in the last challenge, using the top offset moved the h2 downwards. Likewise, using a left offset moves an item to the right.

@qmikew1 I like both ideas, I think the best would be expanding the gif to have the css next to it? Like for top it had the same gif but had css to the side that said "top: 10px;" to show what each did? Ideally, I would think we would want to have the learner type as much of the code as possible.

I generally would agree that learners should be typing as much code as possible; however, in this specific context/challenge, it's not immediately apparent what should go there in terms of top/bottom/left/right (or units). The prior challenge Change an Element's Relative Position there is an example of bottom: 10px; (and, yes, one could piece together what to do from that example.....but) - so including default (or showing an example in description) would seem to be, actually, consistent with prior challenges.

In terms of design decisions (inclusion/lack of inclusion, placement etc.) that's up to folks evaluating issues.

@TJBarrettJR I like your wording, and I also like the idea of a visual aid. Not everyone learns from words alone, and FCC doesn't use many visuals. Yes, you can play with the values and see it change in the preview panel, but I suspect some people don't realize/feel comfortable/or whatever doing that for a variety of reasons. Anything that stacks the deck in the learner's favor, without taking away the challenge, tends to be a good thing to add.

@qmikew1 BTW, I like your gif. Did you make that?

@all:
Moved to forum.

ty :smile: yep (did it in fireworks)

@ReveurGAM I think there could be a lot of good discussion about the second part of what you put, but I think it may be better suited for the true forums.

For updating the wording for this challenge. I can certainly look into how to get going on that if you would like? If so, when I get home from work, I will read more into contributing and getting moving on this.

@TJBarrettJR Where in the forums would you suggest I put my idea?
Update: Moved.

If you are up to tackling the wording, I have no objections. Are you going to put in that image that @qmikew1 made? @raisedadead Is this okay with you folks?

@ReveurGAM I would think here in the contributors category?

I think @TJBarrettJR suggestion in https://github.com/freeCodeCamp/freeCodeCamp/issues/16692#issuecomment-365664126 seems reasonable for the verbiage.

Also, I am in favor of the visual aid, @qmikew1 could you upload the GIF to imgur and share a link that can be embedded in the challenge?

And once ready we can have a PR, whosoever amongst you are interested in so.

@raisedadead, @TJBarrettJR here's the image link -imgur can be kind of flaky (if so, I'll use my normal image hosting service)

@raisedadead do we want this image to be present just after the description of the challenge? I can do this.

@qmikew1 thanks for the image.

We are undertaking a separate task #15941 for moving over images. Please feel free to follow along and pitch in.

@ninadingole yes, that sounds right.

@raisedadead So do you want the image on S3 or imgur?

Also, what about Quincy's note that he wants to eliminate images, in that thread you just referenced (10/7/17)?

We want to tackle this current issue with the imgur, and then on whenever the audit is done on the code-base, we can collectively move over everything to S3.

As for Quincy's comment, I think, we want to keep it to the minimum where it becomes essential.

@ninadingole are you taking care of this? Just want to verify if I should get started on it or not.

@TJBarrettJR yes, I am starting on this.

@ninadingole @raisedadead I think that perhaps the image should be instead with a new guide page for this challenge instead of on the challenge itself. Based upon the discussion in this issue we may be better suited by having this image in the guide instead with any additional explanation we feel is needed.

I think the wording probably does still need a change, just shift the image to a guide instead of the main challenge section.

Thoughts? @ReveurGAM @qmikew1

@TJBarrettJR I like the guide idea (vs. in-challenge) - one of the issues with images is theming (general, page mode (night vs. not etc.) - and I feel like it's easy to break consistency.

@TJBarrettJR I didn't even know that the guides existed (I've never used the hints) until I saw your message on my forum thread. FCC's lack of links to relevant topics outside of FCC is a thing I do not like, and I don't agree with putting an image that is supposed to help with immediate comprehension of something in a guide. It's the educator in me. I don't like the barebones approach because it only works for some learners. However, this is not my site, so I have abide by the way things are made, even if I know they are not good.

To clarify, I dislike the lack of external links because one problem with searching is you're going to hit a lot of bad sites that either give incorrect or out-dated info. It's hard for a noob to know where to search and which sites to avoid.

What's wrong with the revised wording?

I don't follow about the theming. Unless you're planning to make multiple images to match the themes, which is (IMHO) a waste of space, a single image should be fine. If you really want to be strict, then you'd need to make sure that all images across the site followed a specific set of rules regarding coloration, border, corners, and so on, unless the challenge warranted something different.

Hey, I linked the guide on the forums post we were talking in.

@TJBarrettJR Yup. I noticed a typo in what I wrote. I don't like the idea of putting an image meant to clean up an immediate comprehension problem into the guide. But, again, it's not my site.

Hi @TJBarrettJR @ReveurGAM @qmikew1 I merged a PR from @ninadingole for this issue to resolve this in the interim, however as most of us are inclined that a guide is a better place for this additional help, it would be great if someone can create a article with the same image and link it in the challenge.

@raisedadead @TJBarrettJR @reveurGAM, If it's not pressing (like within 48 hrs or something) I can put something together (assuming via the process in guides readme - ) Will take the guide-centric convo to gitter-contributors' channel for follow-up or questions etc. - Again though probably looking at 1-3 days

Hi @qmikew1 of course take all the time you need, and thanks a lot for contributing.

Was this page helpful?
0 / 5 - 0 ratings