We don't have a design for the tutorial landing page :-( Right now it looks like this:

Totally depressing. It doesn't have to be crazy - just a little more inspiring.

@solipet I'm not going to review the install instructions. I trust ya'll to get this looking sharp and ready to go. Just ping me when you feel good about them and I'll merge them for you since master is protected.

If ya'll want more eyes on them ping people in slack and basecamp. If you don't mind, it'd be super helpful if you could merge them together into one pr when you feel like they're ready.

Most of the screenshots throughout the tutorial have really really small text. As a student, I'd really like to be able to click the screenshot and view it larger in a shadowbox.

currently we're using urls to access Google Fonts and JQuery ... which is kinof a bummer when your a dev and your internet is sucking. It's also an unnecessary web request.

Need to upload these assets and then place them appropriately alongside instructions in tutorial

• Command Line - black hexon (CL)
• IRB - red hexagon (RB)
• Rails Server - purple hexagon (RS)
• Rails Console - yellow (RC)
• Text Editor - green (E)

• get rid of ugly default colors like the red in the html blocks

• We also need the contrast to work for anyone who might be colorblind. Here's just one tool for checking it - you can take a screen shot and upload it to here: http://www.color-blindness.com/coblis-color-blindness-simulator/

There is a syntax.scss file that I copied from GH in there that you can start with. The markup might be a little inaccurate in spots with regard to the language in the block - so be sure to check which language is indicated and change that if you need to.

Chapter 9, Step #40:
Spend some time playing around with this relationship. You can do things like my_first_book.reviews.first or my_first_book.review.pluck(:body).
like my_first_book.reviews.first or my_first_book.review.pluck(:body).
To find a complete list of all the things you can do, take a look at the documentation here.

The second command should be "my_first_book.reviews.pluck(:body)"

[Note the plural of "review" instead of the singular.]

Also, in Chapter 11, Step 20: http://localhost:3000/books/1/review/new should read http://localhost:3000/books/1/reviews/new (notice the "s" after reviews).

People might already have a different version of any of the software we ask them to install.

Each big code block should have the path above it to help students navigate.

CSS is my enemy. The steps divs should look like this for tablet and desktop:

Then they should stack nicely - right now the white of the list segment is wrapping around the highlight box but they should both take up the full width of the parent steps div. Here's what it looks like now:

Also - on larger screens the two child divs pull apart with a gutter between them - that shouldn't happen. Maybe we can just prevent the content div from going over a certain width so that we don't have to worry about large screens.

Every flavor of the install instructions should link back to the homepage.

After some delightful copy about relational databases at the very end of this chapter, there's placeholder text for an image: add illustration here

currently the links take you away from the tutorial page ... which is annoying.

So far - I've only been testing on firefox ... sooooooo ya.

There are gifs and images throughout the tutorial that are being sourced from the internet. They should be downloaded and served locally from our assets folder. Feel free to make an assets/images/gifs folder ... or something like that. You'll probably come up with a better name.

right now the tutorial menu is being included on pages that aren't part of the tutorial:

We could get rid of the menu on these pages totally and link to the rest of the site from the body .. maybe? But other ideas are welcome.

Ideally the menu on this index page would have a title and have links to Chapter 1 and the install instructions page.

Step 7 says 'After $rails new', we should remove the $ because it might cause confusion.

There's a really nice and subtle progress bar in the design. We should add this for student sanity. The progress should indicate how many chapters the student has finished, not where they are on the page.

Feel free to check out the full design here:
https://www.dropbox.com/s/yh8zqmaj2xlwq7o/2016-12-06.pdf?dl=0

right now code fencing aka:

code in here

doesn't work with language specific syntax highlighting.

In the original design, Michele had grey for the negative space in the highlight blocks to the right of the steps and it makes really long highlight blocks with little text much easier to look at.

design.pdf

You can also check out the mockups via dropbox: https://www.dropbox.com/s/yh8zqmaj2xlwq7o/2016-12-06.pdf?dl=0

We need large forward and back buttons at the end of every chapter. It'd be nice to have some small, minimal ones in the nav too. They should drop off for smaller screen sizes.

prepare_deploy uses squiggly heredocs that were introduced in Ruby 2.3. If you try running the task on an earlier version of Ruby, it won't work 😿

The link to localhost links back to the tutorial.

The steps containers look broken on large monitors. Also - limit the width of the overall container so that stuff doesn't get too spread out.

This might already be fixed ...

<img src="screenshot.jpg" alt="Browser showing new book page">

does note exist, null, void, so much sadness.

The chapter file name should be long so that it's more descriptive. HOWEVER!!! we don't want the urls to be long. This is totally doable by using the metadata in the chapter files but some research is needed to make it work.

Because we're better than this.

I'd like to have the Bmore on rails logo and the icons for the tutorial github repo, and our twitter - @bmoreonrails

The Bmore On Rails logo can be found here: https://github.com/bmoreonrails/bmoreonrails-media/blob/master/logos/ruby_300.png

Lists in step containers that don't have corresponding highlight blocks to the right of them should pull left and not be centered.

malformed url in step 34 of chapter 3. (extra colon in http://)

There's a link in one of the protips that's supposed to go to the install instructions ... it doesn't link to anything right now.

Basically - we need to build the _sites directory for gh-pages because gh doesn't support our custom tags.

some resources:
https://www.drewsilcock.co.uk/custom-jekyll-plugins

We might have to do something about our links and paths:
http://ricostacruz.com/til/relative-paths-in-jekyll

Chapter 13 introduces A TON!! and deal with a lot of different issues. I think we could break it up into 2 chapters and work on explaining sessions in a little more detail. But this is purely for V2 of the tutorial.

There are some great js based search tools that cram all the site content into a json blob so that it can be searched even though the site is static. Our deployment process will support this type of static search. Let's add it because we love our students.

Here's one option: http://jekyll.tips/jekyll-casts/jekyll-search-using-lunr-js/

There are others out there.

Here's what the design has - feel free to make adjustments if you need to but this was the original design goal:

for some reason Ali's computer uses the arrow and he keeps copying and pasting that ... but normally it's a dollar sign. Be sure to keep arrow for irb.