(Note: please click on blog images for bigger, better and clear images)
Header contains a company’s brand identity (logo) and the most important links. Moving header outside visible page (like in image below) when user scrolls down is not a good option. Always flaunt who you are.
Other moving and fixed parts:
Editor area and Result area should always remain fixed on web page independent of scroll (unless when user scrolls to the bottom of the page for footer). Even now Editor and Result areas are somewhat fixed but slightly moves up and down as user scrolls up or down. There is no need for them to move. While writing a line of code user is generally focused on a particular line in editor area and simultaneously going through lesson's instructions. When user scrolls up/down the lesson instruction pane, Editor area also wavers up/down because of which user need to refocus/find her line of code again. Lessons' instructions should move up and down independent of right hand side Editor and Result area.
Run, Reset and Save options:
Run, Reset and Save buttons/info is getting duplicated on screen hence eating a lot of precious web space. Info from both the highlighted areas (in image above) can be clubbed in a single horizontal row. Something like:
Green Run button (Ctrl+enter) then Red Reset button (Alt+R) then Grey Save button (Ctrl+S).
This will also free up some space for increasing height of result area so that users can see more lines of result in result area. Exercises where result is displayed in various lines will be better and fully displayed in that case.
Movement from one section to other:
When one section is finished in a course then link to next section is shown in result area. If we click on that link then next section instruction set appears but it is never completely visible on web page. Some part of the lesson is always hidden at the top. A user has to scroll up the instruction panel to see start of new section’s instruction set.
Wrapping text in Editor as well as Result area:
If some error message is longer than width of the result area then result area doesn't auto-wrap the message. It just goes beyond the console area and is not visible.
Codecademy track>>course>>section alignment: