Etch-a-Sketch in Javascript Basics: Consider dropping mention of CSS Grid from instructions

[polycont]

Complete the following REQUIRED checkboxes:

• [x] I have thoroughly read and understand The Odin Project Contributing Guide
• [x] The title of this issue follows the location for request: brief description of request format, e.g. NodeJS course: Add lessons on XYZ

The following checkbox is OPTIONAL:

• [x] I would like to be assigned this issue to work on it

---

1. Description of the Feature Request: On the Discord server, Carlos started a discussion regarding the inclusion/mention of CSS Grid in the Etch-a-Sketch project in the Javascript Basics section of Foundations: https://discord.com/channels/505093832157691914/1014946701217386597

The project's web link: https://www.theodinproject.com/lessons/foundations-etch-a-sketch

His argument -- and that of a few others -- is that since CSS Grid is not taught that early in the curriculum, it might be best to focus learners' attention on CSS Flexbox instead of Grid, since Flexbox is taught by that point. I agree with this. It's all well and good to encourage learners to figure things out for themselves, but why risk creating knowledge gaps (as Manon says in the above-linked thread) when they are going to learn the material later anyway? Shouldn't we be honing their focus on what matters at that moment?

It may be possible to still have Grid be noted, but not in the list of suggested methods. For example, the section in question might read...

"There are several different ways to make the divs appear as a grid (versus just one on each line). Feel free to use any or play with each of them:

• float/clear
• inline-block
• flexbox

In your research, you may come across a tool called 'CSS Grid.' We'd advise you to steer clear of it for now, as it will be covered in more detail later in the course."

Instead of...

"There are several different ways to make the divs appear as a grid (versus just one on each line). Feel free to use any or play with each of them:

• float/clear
• inline-block
• flexbox
• CSS Grid"

2. Acceptance Criteria:

• [ ] Mention of CSS Grid is removed from the Etch-a-Sketch project instructions.

3. Additional Information:

Discord discussion link: https://discord.com/channels/505093832157691914/1014946701217386597

[altruisticnode]

I partially agree with this. Pushing the directive of the project towards Flexbox is a massive plus as it "strikes the iron while it's hot". However, I do believe that there's still a strong middle-ground. Although CSS Grid is taught further in the curriculum, it's still a nice experience to allow a slight push of exploration and self-directed research. Just in a way that would avoid a rabbit hole.

The actual project page does highlight my keypoint:

This project should not be easy for you. You’ll probably have to Google frequently to get the right JavaScript methods and CSS to use – in fact, that’s the point! You can build this using the tools that you have already learned, and there are plenty of resources on the net for learning stuff that we haven’t covered yet if you decide you need it.

Just my two cents, but perhaps something like so will be better:

---

Highly Recommended Methods:

• flexbox
• inline-block

Methods to note:

• CSS Grid
• Float/Clear NOTE: These are not recommended directly for multiple reasons such as the risk of diving into rabbit holes, or searching for obscure and unneeded information. The community may also lack the resources to guide you with this. By choosing these methods, you may be forced to engage very heavily in self-directed research, take caution.

[polycont]

I think that could be a good middle ground! As long as the use of Grid and Float/Clear are not treated as a normal option like any other and are disincentivized to some extent, it could work well.

I'd like to hear some other opinions as well if anyone has time to share them.

[github-actions[bot]]

This issue is stale because it has had no activity for the last 30 days.

[Fiddle-N]

I've just finished the Etch-a-Sketch project and I went the CSS Grid approach. I knew basically nothing about CSS Grid, but my thought was - "hey, the Etch-a-Sketch canvas is literally a grid, so why wouldn't I use the CSS functionality that is specifically designed for grids based on its official name?"

One Kevin Powell YT video along with a CSS Tricks reference article was enough to teach me how to use grid well enough for etch-a-sketch. All I needed is a display: grid and repeat(x, 1fr) in both directions. I'm personally happy I went down that approach because I felt it was a very easy concept to apply with a very small amount of CSS, and very easily manipulable with JS. I do believe it would have been harder for me if I had chosen one of the other options that aren't really the best tool for the job here, which I would have done if the CSS Grid option was not there.

With that said, I appreciate the feedback that others got stuck on Grid and end up asking for help in the server - since that is the case, the section probably should be modified in some way.

Personally, I don't like that "float-clear" is suggested - it seems the obvious wrong way to do it. And categorising both "float-clear" and "CSS Grid" together doesn't really seem that fair to Grid. I think "float-clear" should just be gone as an option.

I think "inline-block" is also probably the wrong way to approach Etch-a-Sketch as well. I would also think this option should go, though it's less bad than "float-clear"; and I'd be interested to hear opinions on why this one should stay.

I think the only two options that should be suggested are flexbox and grid. And for Grid, I think a bit more of a gentler disclaimer would be good; something like the below:

CSS Grid is a 2D grid-based layout system taught later on in the Odin Project, and as such may be a good fit for this problem. If you are feeling adventurous, you may learn about CSS Grid from these resources (insert YT video and CSS tricks article). However, this is a more advanced CSS concept - if you get stuck for too long on this approach, we strongly advise you to switch to using flexbox instead.

[ManonLef]

I see a lot of people struggling in the discord with the basic functionality of etch-a-sketch, and then added on top they're now also struggling with a new topic: grid.

I'd suggest removing the grid suggestion because of this. At this point in the curriculum, students are capable of creating a full flex layout, they should be able to make a flex container and fill them with flex items.

People find their own resources for grid now and it leaves them with some holes in their knowledge. Which can lead to unneeded frustration since the curriculum will cover grid later.

It’s good to stimulate people to do their own research, but they will have plenty of that in the following projects.

This is just my two cents of course.

[JoshDevHub]

I also think it's a good idea to remove it. Keeping things streamlined and increasing competency with flexbox is valuable at this point in Foundations I think.

I also personally think the "float/clear" is a dated approach to this type of problem, and it could stand to be removed as well.

[impronen]

I'd also favor either removing the suggestion or having a stronger disclaimer, like formulated by Fiddle-N. And i absolutely would also remove "inline-block" and "float/clear" - those are not very good tools for this project. The learners focus should imo be learning new JS skills and solidifying flexbox understanding. Mentioning Grid & other options detracts from this.

Lot of people know about grid before hitting this project and those that know about it's existence, might choose to use it but from a perspective of someone who started programming with TOP, I felt already very overwhelmed by this project and the last thing I wanted was to try to learn a whole new CSS strategy.

One possible approach could be removing the mentions of other options and say something like:

This project is also a great way to solidify your skills with flexbox. With flex you can arrange your square divs in a grid.

You might be wondering: what about CSS Grid? Isn't that the perfect tool for this? If you have heard of CSS Grid, it certainly is a good approach to building a grid like layout (it's in the name after all) but we recommend sticking to flexbox at this point. Grid is covered in detail later in the curriculum and diving into it now might lead to rabbit holes.

[jernestmyers]

I unwittingly duplicated this suggestion in Discord's suggestions-bugs channel after seeing two learners struggling with grid in their Etch A Sketch. While it's true that many folks will have good enough problem solving and research skills at this point in the curriculum to learn Grid on their own, it still creates issues in the help channels where enough learners get in over their head with Grid.

As sort of a middle ground, the disclaimer seems like a viable approach. And within the disclaimer, I'd suggest linking to TOP's grid lessons for a couple reasons:

1. I think if learners navigate to the the grid lessons, they'll see lots of lessons and decide now is not the time to dig into grid
2. If a learner decides they do, in fact, want to learn grid, then we can reference those lessons if/when helping folks

I also support removing the float/clear options, maybe even the inline-block approach. But unlike grid (where the name just simply sounds like the right approach), I highly doubt learners actually get lured into float/clear or inline-block.

[robocopyZer0]

@polycont Assigned. I agree.

[KevinMulhern]

Looks like the OP hasn't responded and with how old this issue is they may have forgotten about it. Putting this in for help wanted.

[impronen]

I would be willing to try my hand with this one. Seems like a simple enough thing for me :D

Just to make sure: to me the consensus seems to be to entirely remove the references to other techniques than flex. Or would the disclaimer approach mentioned by jernestmyers be appropriate?

[KevinMulhern]

Thanks for taking this on @impronen 💪

Removing references to anything other than flex is the approach we'd like to go with.

[impronen]

Got it! I'll get to work o>

[polycont]

Sorry -- Appreciate one of you jumping in on this. I tried to push for this months ago, but there seemed to be a lot of resistance on the Discord, so I dropped it and forgot about it.

Glad it finally got some traction! I hope this helps future learners.