New reponsive web design

Am I the only one feeling lost in the accessibility section of the NRWD :upside_down_face: :upside_down_face: Come on, this is quite difficult. More explanations will go a long way to help. There are few or no explanations and just directions to do stuff without even understanding what I am doing and why I need this particular code to be used here. On a second thought, I think the old curriculum was much better and easy to understand especially for newbies like me.

1 Like

If you have any questions, feel free to ask them! Many people on the forum are happy to help :slight_smile:

1 Like

I found the accessibility section jarring as well. To me, there’s something kind of “off” and half-baked about it from a curriculum design standpoint.

All of the previous sections are pretty hand-holdy (sometimes to the point of overkill, IMO — although I think it’s good for FCC to err in this direction with this course). They take you through the steps of doing something multiple times across multiple sections before just assuming you know how to do them already. But then all of a sudden, in this section, you’re being nonchalantly asked to do a bunch of relatively more advanced things you’ve only breezed over once in the very short (only 21 steps) previous section (Learn CSS Flexbox by Building a Photo Gallery — the shortest of all the certification’s sections, I believe), like vertically centering children via Flexbot and fixing a header to the top of the viewport (example).

You can eventually figure out what to do with a combination of reviewing your code from the previous section, Googling, and seeing the hint after submitting some wrong or incomplete code, but I think the Flexbox stuff in particular should be gone over more before assuming the student has working knowledge of it. The previous section feels insufficient.

There are also a bunch of steps in the section where the instructions are basically just “here’s a big block of CSS to copy and paste” (example 1 and example 2). None of the previous sections resort to this sort of thing, and it feels kind of phoned in/tossed off and of little pedagogical value.

Anyway, I guess this should maybe be moved to the Contributors section, since it’s not like the OP or I have specific questions about this section (I’ve already completed it), but are just expressing issues we see in it from a learning/curriculum standpoint.

2 Likes

Oh my goodness, I think this is the perfect explanation of my fraustration .Reading this felt like we were coding together :rofl: :rofl: you understood exactly what I meant.And about the copy and paste sections .i have no idea why i am coping this paticullar code.i will definately not know were and how to use it next time :thinking:

2 Likes

It is a difficult balancing act.

On the one hand, we want the camper to keep moving and not get stuck reading article-length explanations before coding the answer.

On the other hand, that often means we have to be terse and sparse with the information given. Often almost to the point where no real explanation is given.

It is more difficult than it looks. The general consensus is (through experience) that people, do not like to read and we have to just keep them coding and moving forward without burying them in information.

But we can get it wrong and you should definitely create an issue if you see something that needs correcting. It is very likely that many of the new challenges need to be polished and updated here and there.

3 Likes

Yeah, I get that difficult balancing act and appreciate the work that’s gone into trying to pull it off. To clarify, though, I’m not saying that I think concepts need to be explained more in this section; rather, I’m suggesting two things:

  1. I think some steps required by this section need to be broken down again (on a purely practical/procedural level) before the curriculum assumes the student knows how to implement them. For example, in a step like this, instead of saying “use Flexbot to center the text,” say something like “use the justify-content property to center the text.”

  2. I think the steps where you’re asked to just copy and paste big blocks of CSS should be broken down a bit more to help the student understand which properties are doing what. For instance, in this step, instead of just saying tidy up the elements by pasting this CSS, say something like “to make the questions more spaced apart, adjust the padding and margin to yadda yadda” and “to accomplish X, change the width to 100% and set the display property to block.” (I say “to accomplish X” because I still don’t know what is the point of these properties in this step; in my Chrome browser, adding them doesn’t make any visual difference in the display page, no matter how I resize it.)

(For context, a couple of lessons after this one, the curriculum is still reminding the student about how to do really basic stuff like setting the language attribute of the HTML tag, so it’s a rather big leap from that to assuming the student can just pull out some specific flexbot properties on command.)

1 Like

Speaking of balancing acts, I’m on this lesson now, and it’s full of steps like this one, where you’re entering the same sort of CSS properties over and over and over again, which is starting to feel tedious and repetitive. Now that I understand what I’m doing with this aspect of the CSS, I wish I could just copy and paste blocks of CSS as in the earlier lesson!

  1. It might be intentional to force the student to refer back to knowledge gained in previous challenges. However, I’m not sure if space-between has been taught before this step in any of the other challenges before it (it might, I don’t know). It isn’t uncommon for the hint text to contain information you are asked to “guess” first, just to let you try your hand at it. But if it’s asking for a completely unknown property or value then it shouldn’t do that.

  2. I agree and the step does not seem to comply with the standards we usually require for the steps.

  3. There is some force repetition and even though it is mentioning the element names and attribute it isn’t showing you the exact syntax.

  4. I can see how it can get tedious but forcing some repetition is also more valuable than you might think. It may feel like an imposition and be a bit boring but it does have an unseen effect that you will start to notice the longer you go. It helps with typing and recalling properties and the values they accept. But if you were coding it for yourself you might do some copy-pasting for sure.


Maybe open an issue for the challenge in point 2?

I do not recommend this when trying to learn something.

If you’re busy memorizing, or taking notes, or copy-pasting from elsewhere you wont remember it or be able to leverage it on the fly, as you’d expect if you “knew” it. Naturally it’s very easy to copy-paste/lookup things when it comes to web development, but that doesn’t mean you “know it”.

However, the simple act of re-doing something multiple times creates “muscle memory”. Typing out similar stuff multiple times may feel boring and repetitive, but doing such will allow you to more easily do the same in the future without any thought.

There is also the possibility you screw something up when doing something “mundane”. Good, then you get the experience of solving such problems and debugging them. You’d rather get skilled at “cleaning up your own messes” when the messes are small, on things you just reviewed, with code you “should know”, than trying to debug code you just wrote for the first time, with minimal experience bugging earlier because you always copy paste it.


As one of my old teachers would say before going into review, “it’s better to be bored than confused!”

Be bored, do the mundane, and get good at it, then you’ve learned it enough to rely on it when you start doing fancier things.

2 Likes
  1. I just ran a search on the previous CSS at the point of the lesson in question and the final CSS of the previous two lessons (the first of which is the one where flex is introduced), and I didn’t see any previous instance of space-between, so I think it hasn’t been touched on before. To be honest, the whole lesson on flex felt overly short (just 22 steps), and it’s odd, because I took a look at the legacy unit on flex, and it seems like there was a lot more covered in it, and it links to some great supplementary material (including this little game, which I think helped me get a grasp of flex more than anything else). Also, in the new curriculum , four lessons after this one, there’s a step that tells the student:

Blockquote Give your .bb1 element these style properties: display: flex; , flex-direction: column; , and align-items: center; . This will center the parts of the building using “flex” or “flexbox”. You will learn about it in more detail on another project.

Notice how this is still assuming the student needs a similar procedure spelled out at a much later point in the curriculum, and notice how it’s promising the student they’ll learn about using flex in more detail on another (presumably later) project, which implies they didn’t learn about it in more detail on the earlier project/lesson on flex! I don’t know, something just feels off with the overall presentation and sequencing here…

  1. Yeah, it did feel out of character in comparison to all the lessons I’ve done before and after this one. There were a few other steps like this as well. I’ll see if I can find them and open an issue on it. If I do that, should I do it on Github right from the start, or should I post about it in the contributor subforum first? (Sorry, I’m new here…)

  2. True/good point!

  3. Also true/good point!

Good points! I don’t disagree with any of that, and I see the sense of it. Although typing the same bits and bobs of HTML tags and CSS properties gets tedious after a while, it’s definitely helped me to internalize both the elements and the syntax.

When I said I wish I could just copy and paste some of the CSS, I primarily had in mind some steps in some of the later CSS lessons where you’re just defining the values of basic properties like height, width, margin, etc. over and over again. At that point, I felt like these properties were already old news, and all I was doing was typing various pre-supplied values ad nauseam. I mean, if I had to come up with the values myself to achieve the desired effect it would be one thing, but the curriculum writer has already figured them out for me, so it just feels like rote repetition .

I suppose that letting the student copy and paste would be worse from an educational standpoint, but I think there are some more useful and interesting ways of presenting these steps. For example, instead of just being told to “set the border to 0,” you could be asked to “use the border property to remove the border” (or to give even less of a hint, just “remove the border”). Or it could even just be something as simple as telling the student to “make the width of X take up half the screen,” instead of telling them to set it at 50%, so they have to translate the verbal instruction into script, remember that fractions are expressed as percentages, etc.

I don’t know… I’m just thinking out loud here! As a former teacher, I’m really digging like 95% of the curriculum and am just trying to put a finger on the 5% that I sense could maybe use some tweaking. On the other hand, though, I am aware that in this context, I’m just a clueless student at this point, so I recognize that I might be missing the intent behind a lot of these decisions!

1 Like

The creators of the curriculum are not beginners, so it is easy for them to forget how it was when they were first learning. I created the first two projects of the new RWD. I tried to build hints that would guide the user on a specific path. You will notice in the beginning of the first project, there is more hand holding than the latter part. My goal was when new concepts were introduced, the hints were more specific about what was probably wrong with the code. When a later step used a previously taught concept, I tried to purposely word the instructions to be a little less “Do x, y, and z”. Also, I am of the same mindset that when something new is introduced, a “why” is given to create a connection between to the “what” is going on.

These projects from conception to writing the hints/tests for them is extremely tedious and take a lot of time. It is quite possible that on some projects, the creator just made a mistake and assumed something had already been taught. This new curriculum is like the old curriculum in the fact that it will be continuously improved as times goes on. The older curriculum is 4+ years old and there still are weekly issues brought up and change implemented to improve it.

3 Likes

Yep, I’m guilty of this too. Also, I’m assuming there are varying degrees of teaching experience in play here as well. And teaching school-aged kids vs. teaching adults who are already educated are two different things and often require different methods. Not to mention that some people seem to learn better with certain methods while others will tend to fail under those same methods. And then throw in the language barriers of a world-wide audience. In other words, there is no perfect approach to teaching this stuff.

I haven’t been around long enough to know the impetus for the switch between the legacy and new version of the RWD courses. But from what I have read in various discussions it seems like the changes were based on user feedback over the years. So perhaps the new method is really what the majority of people who visit this site want. But of course any time you make a change you are going to adversely affect the people who learn better under the old model. Perhaps the switch was too extreme? Perhaps a little more of the old model could be incorporated back into the new model?

As @RandellDawson said, improvements are constantly happening all the time. If you think you have some good ideas for improving the courses then definitely discuss them here and open a github issue once you have them refined. I’ll share one idea I have had for a while now. I think there should be periodic mini-quizzes throughout the steps of a course. Just a question or two, nothing major. But they would be used to reinforce the main topics being taught. From all the time I spend answering questions on the forum I am coming to the conclusion that a lot of people are passing the steps but not really understanding what they are doing to pass the steps. Sort of just going through the motions. I think asking them questions about what they learned will help them think about what they have learned and reinforce it. Perhaps someday I’ll bring it up officially :slight_smile:

If you find similar issues in other steps as with step 47 you might compile a list and post them all to the same issue. If they are similar enough.

Also, only 2 of the 5 properties and values actually do anything, the margin, and padding.

Yes i noticed that at the beggining of the NRWD and i loved it and i even dropped a possitive remark. i could say i was learning but seriously when going futher i dont think i am learning i am just following instuctions and coping and pasting alot.

I can only imagine how much (often tedious) work goes into developing and building these projects from start to finish! My hat really goes off to you all, and like I said in an earlier post, I’m bringing these issues up as someone who thinks 95% of the curriculum is already fantastic and just wants to play some modest part (if I can) in helping to finnese the 5% that might need some kinks worked out (as things like this inevitably do).

Obviously, as someone currently working through the first course, I’m still a complete dumdum when it comes to the technical side of all of this — but maybe that could make me useful as far as identifying issues or a purely educational/presentational level goes. As someone who is coming at this from a beginner’s standpoint but also has a background in both teaching (my previous career) and editing/writing (my current one), I might be well-positioned to identify and articulate issues like the ones we were discussing above .

I’m nearing the end of the course. When I’m done, I could go back through it and take some notes on what I see. At that point, I’ll have a panoramic view of the overall landscape of the curriculum (something it sounds like the curriculum writers might not have had, since different projects were put together by different people) and will be able to see how specific elements (like the flex-related steps ) fit or don’t fit into it.

Lastly, I just wanted to say: As a learner, I noticed and really appreciated the early projects’ gradual transition from heavier to lighter hand holding, as well as the brief explanations for the rationales behind doing things the first time you’re asked to do them. I think the former is one of the most tricky but essential things to fine-tune with a project-based curriculum like this , while the latter goes a long way in giving the student some sense of the rhyme and reason behind what they’re doing, without overwhelming them with too much text and info a la the old curriculum. That brings me to something @bbsmooth wrote, but this post is already long, so I’ll start a another one…

I really love the concision of the text in the new curriculum and the way it keeps the student actively engaged by asking them to carry out steps as quickly as possible, with minimal preamble. I think the combination of those two things is one of the core strengths of the new curriculum and I wouldn’t want to dilute it by reinserting too much old curriculum-style elements directly inside it.

However, when I took a look at it a few days ago, one thing I really liked about the old curriculum was that it linked to some supplementary resources (like this one on flex that I mentioned earlier), which it offered in a “here’s where you can learn more about this topic if you want to (but you don’t need to)” sort of way, leaving it to the student’s discretion. Maybe something like that — occasional links to resources when important topics are introduced , explicitly framed as supplemental material — could help the new curriculum provide students with the best of both worlds? They could learn more about the topics if they want to and if that meshes with their learning styles, but the info wouldn’t bog down the curriculum or slow their progress if they wanted to just keep plowing through the practical side of it. Things like quizzes or challenges could be approached in this way too.

I imagine that the new curriculum will eventually have links to supplementary information but it will probably be in the form of news articles published by freeCodeCamp to keep everything self contained.

One more note about the first few projects in the new RWD. In the beginning, the goal was to minimize the “wall of text” instructions you see in many of the legacy curriculum challenges. In fact, the requirements were to have no more than 2 paragraphs and no more than 2-3 short sentences. From historical data we knew the longer the instructions, the more likely users were to skip over content. The idea was if it took more than a few sentences to explain a syntax/concept in one step, then it should be broken into more steps. I personally believe many of the later developed practice projects probably need at least 25% more steps to make the each step’s instructions more focused and concise. This will happen over a period of 6-12 months. This time next year, you should see a more “complete” version of the projects as staff and volunteers tweak the various steps in them.

Hi Daniel,

Thanks for your detailed and thoughtful feedback on some of these sections of the curriculum. And I appreciate you taking the time to hear @lasjorg @RandellDawson @bbsmooth and @bradtaniguchi out as well.

Now that you have some more insight into our intention with the curriculum design, along with your own first-hand experience (and @VanessaMenya echoing these experiences) – could you help us redesign some of these sections that seem like bottlenecks?

I’d be interested in reading your thoughts about how we could break some of these projects down into smaller bits (more steps) and how we can smooth out the learning curve a bit.

If you can be as detailed as possible, we may be able to incorporate some of this feedback into these projects. Considering that thousands of people work through these sections each day, a lot of people would stand to benefit from your improvements, if you have time to help us with this. :+1:

I’d like to jump in and add that references to media queries in the curriculum appear to be out of order. Step 27 of Building a Piano asks you to use a media query, and a media query is required to complete Build a Technical Documentation Page. However, media queries are only explicitly taught to you in Step 114 of Building a City Skyline. Until I got to the City Skyline lesson, I had actually thought the point of Build a Piano was to teach you to look up things you don’t know about. I was able to complete the step thanks to the hint, regardless.