Bootstrap - should we integrate it at all? If yes when and where?

[mariusandra]

I don't think it's a good idea to use bootstrap in the app.

I think it's good to tell them, at the end of the CSS block, that CSS frameworks exist and are here to make your life easier, but using it in the HTML page is a bit of an overkill.

The idea is to make web technologies more approachable to the participants and the best way to do so is to have them have ownership over what they create. My girls in the last edition created very interesting personalised HTML/CSS pages. Adding bootstrap in the end ruined the magic a bit and placed them in cookie-cutter molds.

I don't see any strong advantages in adding bootstrap and copy/pasting this code:

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">My cool page</a>
    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="/pages/introductions">Introduction</a></li>
            <li><a href="/pages/second_page">Second page</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

How about just

<header>
  ...
  <nav>
    <a href='/page1'>Homepage</a>
    <a href='/page2'>Page 2</a>
  </nav>
</header>

... instead, with some styles that they can make on their own.

The resulting page is much cleaner and a lot more approachable.

While I'm at it, I would also remove these code blocks:

<ul class="list-group">
  <% @hobbies.each_with_index do |hobby, i| %>
    <li class="list-group-item <%= i < 3 ? '' : 'hide' %>">
      <%= hobby %>
    </li>
  <% end %>
</ul>

and

<ul class="list-group">
  <% @hobbies.first(3).each do |hobby, i| %>
    <li class="list-group-item">
      <%= hobby %>
    </li>
  <% end %>
  <% @hobbies.drop(3).each do |hobby, i| %>
    <li class="list-group-item">
      <%= hobby %>
    </li>
  <% end %>
</ul>

[ddefrenne]

Using Bootstrap seems indeed to be overkill, especially since they already receive so much information. I just mentioned it and explained what it is, before continuing.

The code blocks you mentioned I skipped as well, as I didn't feel they were of much use to the participants. It would just confuse them imo.

[otagi]

Agreed. The Bootstrap navbar is too big and complex for beginners. Simply copy-pasting it blindly is not ideal. And they would be bored pretty quickly if we had to explain every Bootstrap class in it. A simple custom navbar is more rewarding IMHO.

We can still mention Bootstrap at the end, for those who are eager to experiment by themselves after the session.

[alicetragedy]

:+1:

[Bertg]

Actually I had the exact opposite experience. Where both girls indicated "Why did we go through all that trouble if it's this easy [using bootstrap]?"

I would suggest ONLY using bootstrap, and go into the details of CSS if the Girl would like. Just like with Rails we skip over a lot of things (HTTP verbs, SQL, classes etc...) I think we should jump over the CSS details, and only dive into them if they want to.

[wrtsprt]

I agree with @Bertg. Let's add it as an optional block and have the coach decide if it is digestible at that moment or not.

[ddefrenne]

I think the participants will learn nothing about CSS when just using Bootstrap. They'll just learn how to use Bootstrap and add classes or ids to elements. By showing them CSS you show them one of the tools to change how the site looks to how they want it, compared to giving them something that was decided by other people.

Apart from that, like @otagi already said, there's too much code in something like the navbar while they just barely met HTML.

[mariusandra]

Interesting. My girls were very happy to learn the details of CSS. This means they could now go on any website, inspect the elements and play around: change colours, fonts, learn how things are done, etc.

One of them actually started re-implementing the homepage of Google in a second_page.html. Glossing over the details of CSS would have robbed them of this richness. None of them had experience with CSS before.

I would encourage making web technologies more approachable in general versus having nicer-looking buttons and layouts on a small page that nobody will see.

[toch]

(quick comment aside the topic: "My girls" is not necessary a good way to systematically refer to the participants, it could be felt in different way (without mentioning the different meaning) IMHO. What about "my students"? I think it's important.)

[mariusandra]

(aside reply: Apologies, I meant no disrespect to anyone and I can see how it can be misinterpreted. I will use the neutral terms "students" and "participants" from now.)

[oana-sipos]

@toch I am sure @marius0 was so into how to make it better, that he didn't even realize what words he chose. Reading all your comments on the thread, all I could feel is joy that so many people are interested in improving this guide we have started! Personally, I didn't find it offensive and I think we should go on with discussing about what else we need to change to make this new guide better. This is our focus now ;) Keep the ideas coming.

[wrtsprt]

I think what our discussions shows is that there are very different needs for individual students. One of the main responsibilities for any coach is IMHO to try and adjust the content to the actual students working through it. This might be by going over chapters slower or quicker, depending.

I would suggest we come up with a good concept of optional content blocks to use. Bootstrap is clearly something debatable and we'll never agree on anything there. If it's in an optional block the coach can decide depending on how the sessions went so far if that would be too much or not.

So what I think we should do here is: add some simple show / hide functionality for blocks. (doesn't have to be generic yet). Hide bootstrap stuff inside this block and check that following the rest of the guide we don't rely on content from that optional block.