All I know about Front-End I learned here at FCC. It seems odd to offer up a suggestion for the UI of the curriculum pages, but it’s based heavily off of CodePen, so it’s not exactly my idea.
The biggest focuses should be on the code window and the preview, I think. The cramped code entry window makes it a little difficult to really feel how the code all fits together; to see the bigger picture. The cramped preview window distorts the changes made in the code window because everything is tight. This is a problem on my 15-inch laptop, anyway. My huge gaming monitor isn’t an issue, but I doubt everyone has one of those.
I digress. In order to clear up all these windows, I have a few ideas and a picture of a layout I threw together in PowerPoint to better demonstrate. In short, the lesson, tasks, and console window could be relegated to pop-out windows that can easily be hidden. It also seems redundant to have both a ‘tasks’ pane and a ‘tests’ pane that say more or less the same thing.
I’ll just toss out the picture and it should (hopefully) make sense.
Also, I minimized the size of the buttons used in the design. I hope they are as intuitive as I think they are.