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

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 @camperextraordinaire 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.

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 @camperextraordinaire @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.

Failed:Your Technical Documentation project should use at least one media query.

Hi Quincy, Iā€™ve gotten a lot of value out of FCC already, so Iā€™d love to contribute back to it in whatever way I can. After I finish the last couple of lessons in the new curriculum, Iā€™m going to go back through it, see what I see, and take some notes as I go. Iā€™ve already started doing that with the current lesson Iā€™m on, and itā€™s helping me to pinpoint some things. (I wish Iā€™d done this from the start, but hindsight is 20/20, as they sayā€¦).

Iā€™ve been noticing a few other sequencing issues like the one @ancienthero mentioned, but Iā€™m never quite sure if something truly hasnā€™t been introduced before or if my memory is just lousy (always a possibility), so I think it would also be useful to keep track of when and where some concepts first appear as I go through everything, so I can be more definitive about these sort of issues.

1 Like