Suggestion: Wider context for code in RWD Beta

In RWB, the placement of the instructions interrupts the code and makes indentation unclear, especially for a beginner that may not know what to look for yet.

I noticed several instances where putting longer, uninterrupted part of the code in the highlighted editor might help with clarity.

Examples

Step 21: change the error message or expand the highlighted code. (Error message when h3 is in the wrong location: “There should be an h3 element right above the second section element’s closing tag.”)

Step 23: include figure in highlighted editor to match the instructions (“A figure caption (figcaption) element is used to add a caption to describe the image contained withing the figure element.”) and to show the placement of figcaption within figure.

Step 50: include fieldset in highlighted editor to match the instructions (“The legend element acts as a caption for the content in the fieldset element.”) and to show the placement of legend within fieldset.

Proposed solutions

• Expand the code on case-per-case basis.
• Permanently move the instructions box on top of the code editor. (I think that would make everything clearer and more accessible with well defined sections on the page, but I imagine it would be harder to implement now.)

[WaterBloom]

@ahmadabdolsaheb Hello, sorry for the late reply.

I am interested in knowing more about this: " it takes me a while to find and re-focus on the editor." Are you having difficulty locating the instructions? do also look around for the tests and the submit button? More context is appreciated.

After seeing this notification, I opened the curriculum on a random step to see if I could provide you with more information. I mostly forgot how the page was structured and my eyes just ran across the page in no specific order. “Check your code” was the first text I read, as it draws the most attention, and then “index.html”.

An easy fix would be to scroll the editor so the instructions are always almost at the top of the “page”. That way the eyes know where to go on each challenge. (right now it scrolls to the center)

I believe that would be very helpful!

(I think it would also be nice if the navigation breadcrumbs were more subtle, and if the buttons like “index.html”, “style.csss” and “preview” looked more like toggle buttons – now they remind me of tabs but disconnected from their sections, and they also draw more attention than is perhaps needed?)

Thank you for checking in on this!

[moT01]

I’m fine with changing the three lessons mentioned here, but we could maybe use a discussion on how those regions should be. There’s probably going to be many steps where the editable region could be bigger or smaller or different. Maybe we need some hard rules on how to apply them. Something like - for HTML steps, include the parent element in the region. For CSS steps, include the whole selector.

There may be instances where rules like that don’t work out so well. Like for the first steps of the Cat Photo project, we may want to be more specific about where to add code - and on later steps or projects, more vague. So I don’t know.