# Week 02 - Simple Lesson
by Steve, Yukari and Katrina

---
### Tinker Tasks
* Like we did with the prior Tinker, fork the codepen to play with it.
* COMPARE AND CONTRAST this Tinker (which uses Bootstrap) with last week’s codepen.
* Use the guiding prompts and questions to manipulate the code one thing at a time and see what happens.
* Articulate your understanding and share your findings and insights with your weekly group and/or the class.
### FRAMEWORK: OVERARCHING

* In the settings of the CSS Pane (click on the gear) there is a section called Add External CSS. Remove the resource (Bootstrap) line.

:::info
**Group's Answer:**
Booatrap's external CSS source can define the overall page design. When this is removed it reverts to the existing format of HTML.
:::
* What happens to the page and why?
> When we remove the external CSS source (of Bootstrap), the design and styling of the whole resets back to the styling defined within HTML.
[name=Katrina]
> When deleting the CSS source, the entire page shifts back to an HTML basic format with no stylizing. It reminds me of the style of webpages from back in the early 2000s.
[name=Steve]
> CSS formatting and styles that were set by bootstrap are deleted.
[name=Yukari]
* You can add the resource back: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css
* Enter the above resource directly into your browser URL input to go to the page and scan through the resource.
* What is Bootstrap really?
:::info
**Group's Answer:**
Bootstrap looks like a very long HTML document, with various CSS rules and designs. We can use it to develop faster than you can develop manually.
:::

> Based on the structure and pattern, Bootstrap at its core is an **HTML Document**. When added as a CSS resource, Bootstrap (to simply put it), contains design templates to help build responsive front-end web development faster than hand coding. [name=Katrina]
> I agree with Katrina, bootstrap seems to ben extremely extensive HTML document with very detailed CSS rules and designs, that can be implemented into webpages to save the time of hand-coding each of those CSS design rules.
[name=Steve]
> Bootstrap resources seem to contain very long HTML and CSS elements. This made it possible for developers to develop with minimal adjustment so that they could be designed for any device.
[name=Yukari]
* I have a few CSS rules in the CSS pane. Comment them out.
* What happens to the page and why?
:::info
**Group's Answer:**
When we delete a CSS rule, the style of the defined class reverts to the default style.
:::
> When we temporarily remove some (or all) CSS rules in the CSS pane, the styling for the defined classes returns to its default styling. For example, if we remove the code below:
`.jumbotron {
background-color: #666;
color: #FFF;
}`
The styling for the Jumbotron (header) will return to its default which is gray background and black font color. [name=Katrina]
>The default shows back up when we remove the very few specific CSS style rules. However, this doesn't affect the column and preset rules from the Bootstrap import, so I can see that the CSS section, when Bootstrap is applied, can be used to add additional rules on top of the Bootstrap.
[name=Steve]
> If you comment out some CSS rules, for example, the style of `class = jambotron` specified in CSS is removed and the defaults are shown.
[name=Yukari]

* What is the relation between my CSS and the External Resource?
:::info
**Group's Answer:**
External resources are a library of design templates that developers can use if they choose to add them, and a set of preset templates that can be used when building web pages without the need for manual coding.
:::
> The External Resource can be seen as a library (or series of instructions) of design templates available for developers to use if they decide to add it in. While there are available design templates, developers or in this case, Jin, can still further specify the design preference for each classes in the CSS pane. [name=Katrina]
>I agree with Katrina, the external resource is a set of preset templates that can be used when building a webpage, rather than having to hand-code. The additional CSS rules are added to further design the webpage on top of the bootstrap rules.[name=Steve]
> Since the external resources act like design templates, when adding them, can save time to code and make development easier. It’s possible to add CSS styles from above with the external resources.
[name=Yukari]
* How does my CSS “intersect” with the External Resource?
:::info
**Group's Answer:**
Identifies the affected HTML document elements and tells the browser how to style these elements. When we select a particular element of HTML and further customize its style, our own CSS "intersects" with external resources. The CSS rules we enter apply our own CSS rules, overriding the automatic Bootstrap CSS rules.
:::
> By defining the "External Resource" as a library of design templates (which contains series of instructions to be applied on HTML elements by default), we assume that it does 2 things:
> 1) It identifies the elements in an HTML document that will be affected
> 2) It tells the browser how to style (or show) these elements
>
> Our own CSS "intersects" with the external resource when we select certain elements in our HTML and further customise its styling. By adding CSS rules, we can assume that CSS will be applying our own CSS rules overriding its default design template (for the specific elements selected in the HTML document).
> [name=Katrina]
>The CSS rules that we input seem to override the automatic Bootstrap CSS rules, and they work together with Bootstrap providing the underlying basic design elements, which then intersects with the secondary CSS rules that we enter manually.
[name=Steve]
> If specify CSS rule and it intersects with an external resource, boosttrap will apply its own template to the CSS.
[name=Yukari]
* What do you think is the sequence of how the External Resource and my CSS are loaded?
:::info
**Group's Answer:**
Following the way the browser loads and parses the HTML document, we assume that follow the same sequence when loading CSS. External resources are recognized first, and then additional CSS rules are loaded.
:::
> Following how the browser loads and parse an HTML Document, I would assume that it follows the same sequence when loading CSS. Once a browser identifies elements in the HTML where CSS rules are defined - my guess is that it will first run it through the External Resource - and then run it again to check whether additional styling (own CSS) is set for these elements. If there are additional styling (or !important is defined), browsers will then further apply the rules defined in the CSS - overriding the default settings in the External Resource or adding on top of it. [name=Katrina]
> The external resource seems to be recognized first, and then the extra CSS rules are loaded after. I'm curious what other external resources could be loaded that can take precedence over the hard-coded CSS rules, besides Bootstrap? Are there many pre-set templates that can be added in as external resources?
[name=Steve]
> External resources are loaded first, then the additional code specified in CSS is loaded.
[name=Yukari]
* What kinds of things could happen, if I am careless with my own CSS rules?
:::info
**Group's Answer:**
It will be difficult to debug. Even if we define a particular CSS rule, it may not apply. Also, when working on a collaborative project, it's important to keep our CSS clean and tidy so everyone is on the same page for each class and section design element.
:::
> :see_no_evil: Based on personal experience, it is wise to NOT be careless with our CSS rules. *(Really save yourself - and your teammates from it!)* Kidding aside, when we design a much complex website, chances are we will have tons of CSS rules to compliment our External Resource. This is great as it provides endless design possibilities, but the more complex our CSS rules - the higher chance that we might have conflicting rules that points to the same element. This is one example of how we can be "careless" with our own CSS rules. When these happens, these are the possible consequences:
> 1. Debugging will *surely* be harder
> 2. At times, even if we define certain CSS rules - we may find that it doesn't apply. This is usually the case when there's conflicting declarations in CSS. (Although we can use !important to solve this issue, it is not the best practice)
> 3. *Of course*, Your teammates will not be happy :crying_cat_face:[name=Katrina]
> When designing the CSS coding for our mini projects last week, I realized how important it is to have cleanly coded CSS rules - since even with such a simple design webpage, there are so many CSS design rules and many can overlap within the different levels of nesting design. Especially when working on collaborative projects, it's important to keep the CSS cleanly organized so that everyone is on the same page (pun intended) about the design elements of each class and section. [name=Steve]
> An error can occur if you are not careful with CSS rules. For example, if not to be careful that booster's external resources are loaded first, when add them later, your existing CSS styles will change.
[name=Yukari]
* Are you stuck with all of Bootstrap’s rules? How does our own CSS come into play if we don’t like a particular Bootstrap rule?
:::info
**Group's Answer:**
We don't stick to all of Bootstrap's rules. We can also create our own CSS and add it on top of Bootstrap external resources. We can inspect it as needed and actually create our own CSS.
:::
> (Just a guess, mixed with a little bit of research) I do not believe that we're stuck with all of Bootstrap's rule. Although based from my personal experiment, it is best to stick to Bootstrap's "fundamental rules" on `containers`,`row`, `column` as well as utilising its grid system. However, when it comes to certain elements, I believe still have much flexibility on defining or creating our own CSS rules.
> Another option - which I think we can explore later on is to create our own CSS and add it on top of the Bootstrap External Resource. Based on some tutorial videos in Youtube, you can actually create your own CSS if you wish to. So we are not really limited to blindly following Bootstrap's rules. :muscle: [name=Katrina]
> I don't believe that we're stuck with Bootstrap's rules, because we could use !important to override some of the preset design elements of Bootstrap. However, I'm not sure of other ways that we could override Bootstrap's presets? [name=Steve]
> I'm not very stuck with boosttrap’s rules. I think they can learn each time according to their needs. [name=Yukari]
* Compare this Tinker’s custom CSS vs. last week’s CSS.
* What kind of specific rules did I have to make last week that I did not have to do this week to achieve a very similar result?
:::info
**Group's Answer**
Comparing last week's tinker with this week's, there are many CSS rules not included in the new Bootstrap version. For examples are typography, spaces, text, fonts, tables, and `img` CSS elements.
:::
> Comparing last week's Tinker vs this week's Tinker, there were a lot of CSS rules last week that were not specified for this week's Tinker. Some examples are rules on typography, spacing and text. [name=Katrina]
> There are many CSS rules that weren't included within the new Bootstrap version, including the font, table, and `img` specific CSS design elements. [name=Steve]
> Comparing this tinker with the previous tinker, there were some CSS rules not included in the previous. For example, text, image, tables.
[name=Yukari]
* What then is the *advantage* of using a framework like Bootstrap?
:::info
**Group's Answer:**
It provides developers with existing elements to use faster and easier for development. Because we can create a website with a specific design without creating CSS, we don't have to worry about initial design, which is very complex and has many CSS rules. As long as it has that function, we can quickly launch a service without being aware of the design.
:::
> Using Bootstrap is like using a template. It provides developers a ready-made elements to use for faster and easier front-web development (also responsive!) Definitely a time-saver! [name=Katrina]
> Bootstrap is an incredibly time-saving resource, and allows us to start building out the "meat & potatoes" main content within our website, so that we don't get bogged down in the very intricate and CSS-rule-heavy initial design of a webpage. It allows a designer to already have a template to build upon, a base foundation that will then be added onto so that we can focus on the page content itself. [name=Steve]
> The advantage of Bootstrap is that you can create a website with a certain design without creating CSS. I think that the most frequently used applications are web apps and web services. Even if it's functionally good, it's not a good service without a UI. In that respect, boostrap makes it easy to create a well-designed site. It seems that it can be used because it is possible to quickly launch a service without thinking about designing, as long as it has functions. [name=Yukari]
* What are some *disadvantages* of using a framework like Bootstrap?
:::info
**Group's Answer:**
If you're a beginner of bootstrap, it's difficult to get used to extending the contents of your library. Also, excessive reliance on bootstrap settings can lead to a lack of design creativity. For example, if you create only bootstrap, you will get something with a similar atmosphere. Filespace may be wasted if it contains unused styles and JavaScript.
:::
> 1. When we decide to use Bootstrap, there are certain rules that we must adhere (or agree with its developers) in order to efficiently build our site (and prevent unnecessary complications or errors down the road). Some may view this as limiting when it comes to their design.
>2. As a Bootstrap beginner, it is challenging to be familiar with the extend of the library's content. The more we become familiar with its library, the wider the possibilities are in terms of building our page. In short, there is a learning curve.
>3. I guess since it's a template widely-available for all web developers, if we do not customise our site, there's a high probability that most websites will somehow look the same. [name=Katrina]

> Although Bootstrap seems like a blessing, automatically loading all of the preset designs for us, I think there are two distinct disadvantages to using Bootstrap:
> 1. As a beginning coder, I think the temptation of overreliance on the preset Bootstrap settings may lead to an unintentional lack of creativity in design.
> 2. Although I'm sure we'll work more on how to override many of the bootstrap elements, for now it seems that it's like a Drupal website, where things are pre-designed and we just plug and play with a few additional rules.[name=Steve]

> * If you create only with boostrap, each one will have a similar atmosphere
> * It might be waste of file space because unused styles and javaScript are included
> * If you don't like any style, you'll have to write extra CSS to counteract it, resulting in a bloated CSS [name=Yukari]

* Compare the HTML from this week’s Tinker vs. last week’s Tinker HTML.
* I use a class called `.container` in both. Is this a special `class`? Are they the same thing?
:::info
**Group's Answer:** We do not consider `.container` as a special class. Given that the function of `container` is to create boxed contents and contains preset margin for responsive behaviour, both Tinkers used containers it the same way. However, we also acknowledge that the structure where the `.container` class is placed affects the overall visual presentation of the page.
:::
> `container` is not a special class, however, I would agrue that it is used the same thing last week and in this week's Tinker - the only difference is the structure or sequence of where `container` is placed. For both Tinkers, `container` is used to create boxed content (and usually have a preset margin for responsive behaviour). [name=Katrina]
> I don't think that this is a special class, but it does interact with the bootstrap in different ways. Where last week's tinker had all the sub-`container` levels, the bootstrap allows for us to only use the initial container class and then design further within that through the external resource. [name=Steve]
> This is not a special class, but you can use boosttrap to flexibly design the contents of your container class. [name=Yukari]
* There are many more `classes` used in this week’s Tinker. Where do these classes come from?
:::info
**Group's Answer:** These classes used in this week's Tinker come from the preset settings of Bootstrap. With these settings, developers can essentally hand-pick from a variety of present options and apply or use these settings to build your page.
:::
> These are classes that are preset in Bootstrap that developers use to create their responsive pages. [name=Katrina]
> These classes come from the preset settings throughout the very extensive bootstrap HTML code. By utilizing the column sizing (such as `col-xs-4`), you can utilize the settings already preset, and essentially hand-pick from a variety of preset options, like shopping a store shelf for the exact product you want. [name=Steve]
> These classes are very useful classes that you can specify in boosttrap. [name=Yukari]
* Remove classes like `thumbnail` and some of the `danger`, `info`, etc. classes in the table and/or try adding them to other elements. Might work, might not.
* How do these kinds of classes relate and rely on the bigger structure and class rules of a framework?
:::info
**Group's Answer:** Since Bootstrap contains preset settings on these classes, any changes or deviation way from these rules will have an effect on how your elements will behave on your page. Using these preset settings allow developers to "plug and play" these classes - if there are certain rules missing, and there's no overriding CSS rules defined for that classes, your elements will lose its styling and preset settings and will not behave as planned.
:::
> Since Bootstrap contains preset setting on these classes, any changes or deviation away from these rules will affect how your elements will be displayed. Like what was discussed in the Framework discussion above, when a browser loads your CSS and parse it against the External Resource, if there are certain rules missing, and there's no further CSS rules defined for that specific classes, expect that your elements will not behave as expected. [name=Katrina]
> Commenting out the `thumbnail` increases the `img`to full size, essentially removing any CSS design elements to the image itself. Bootstrap makes it easy to auto-scale images within a webpage. The `danger`, `info`, etc are design elements that apply to shading within a table. Bootstrap definitely makes it faster to build out a table, but as a novice, it seems to have so many possible design elements that it can be a little overwhelming at times. [name=Steve]
> Removing the Danger info class will change the look in the browser as these classes rely on boosttrap resources. [name=Yukari]
* Analyze the form and refer to http://getbootstrap.com/css/#forms. Try to convert this BASIC form to an **horizontal form** and/or an **inline form**. Some of the examples have extra attributes like `id`, `placeholder`.
* Are the non-class attributes important in terms of getting Bootstrap to work? (How do you know?)
:::info
**Group's Answer:** Non-class attributes are important especially when we are working with forms and its layout. Non-class attributes such as `type`, `for` and `placeholder` defines how the `<input>` element will be displayed. This will also provide your users to know what type of information are they suppose to enter on certain fields. This is also important for Bootstrap because it allows users to further customise styling its forms using .form-control and [input group.](https://getbootstrap.com/docs/4.0/components/input-group/)
:::
> Non-class attributes are important especially when we are working with forms. Non-class attributes such as `type`, `for` and `placeholder` defines how the `<input>` element will be displayed. This will also provide your users to know what type of information are they suppose to enter on certain fields. This is also important for Bootstrap because it allows users to further customise styling its forms using .form-control and [input group.](https://getbootstrap.com/docs/4.0/components/input-group/)
[name=Katrina]
> They're important for bootstrap, but also to visualize how to lay out the form itself. If we just change the form class to `inline` but don't change anything else, for example, the content doesn't disappear but it appears ina way that is antithetical to its purpose. So having the `id` and `placeholder` work like adding `#` as a deadlink symbol in the HTML code, that can then be replaced and filled in with the necessary material. [name=Steve]
> These are very important for formatting the form. [name=Yukari]
* If you deviate from the specifications, particularly: 1) the classes used, 2) the hierarchy expected, how might that affect your result?
:::info
**Group's Answer:** Visually, it will cause some elements to be misaligned which can be slightly frustrating when we are building our page. This has been one of the most common patterns we see when we deviate from the specifications of classes and if we interchange its hierarchy.
:::
> Most common result I experienced is misalignment of content, which can really be irritating at times! So it is important to take note of the hierarchy and classes defined in Bootstrap documentation. Also, elements will not behave as expected when there's deviation from the preset rules. [name=Katrina]
> The form is pre-built using layers of stacked rules, so by changing the hierarchy of the form contents, it can impact the visualization and functionality of the form itself. [name=Steve]
> If you deviate from the specifications, particularly, unexpected results may occur. This is very confusing for developers. [name=Yukari]
* Manipulate the form to “exclude” certain classes as prescribed by the Bootstrap guide and examples.
* How does not following the specifications affect the output?
:::info
**Group's Answer:** Likewise, when we exclude certain classes prescribed by the documentation, we can see some misalignment on some elements. It can also affect some of its functionalities for specific classes such as `.sr-only `. Excluding `.sr-only ` does not affect any change visually but affects the accessibility of the form. `.sr-only` (sr stands for Screen Readers - a program that helps blind people use computers).

:::
> As anticipated, when we exclude some classes from the form, elements will be misaligned. However, there are specific classes such as `.sr-only `that does not affect any visualisation but affects the accessibility of one's form. `.sr-only` (sr stands for Screen Readers - a program that helps blind people use computers).[name=Katrina]
> Commenting out some of the classes used can affect the functionality, just like if we didn't build out the form properly using basic HTML itself. The layered and stacked classes are more important for the bootstrap element, but it's as if we were commenting out `type` in just the basic HTML version - it removes some of the basic functionality of the form. [name=Steve]
> The look of the browser applied by boostrap changes. [name=Yukari]
* What are the key aspects you need to be paying attention to when learning and implementing these framework features?
:::info
**Group's Answer:** When learning and implementing these framework features, understanding the structure and hierarchy of the framework is utmost important. Establish a strong foundation of understanding the structure of the framework, before continuing to add on to it or build upon it. To put it simply, learn the basics first - and once we are familiar with its rules, structure, syntax and pattern, only then we can work towards a much more complex features.
:::
> For anyone who is learning to code, respect the structure and hierarchy of the framework. This will definitely make our lives easier. But, I also understand that there are some developers who might feel limited by these preset rules. Advice is, just like anything in life, learn the basics first then once you are familiar and skilled, start to further customise - or even create your own CSS. [name=Katrina]
> Especially as a novice coding learner, it's important to follow the hierarchy and framework of the bootstrap so that the forms and other coded features work properly when implemented. [name=Steve]
> While there are various advantages to using the framework, be aware that there are disadvantages to using the framework. [name=Yukari]
* What is the best way to learn how to use a new framework feature?
:::info
**Group's Answer:** For our group, the best way to learn is by experimenting through trial and error. This can be approached in two ways: 1 - we can apply it in our own projects and customise the rules to see how it works together; 2 - we can look at the code, deconstruct it like what we have been doing (adding classes, removing existing classes, rearranging the hierarch) to also see how the elements affect the visual presentation of our project.
:::
> FCC is a great way to start - but to be honest, it is not enough. The best way to learn how to use a framework feature is to try it out THEN verbally explain how or why these codes are structured as such. Then, try to manipulate the elements to see how it is related or how it affects your page visually. Destructuring is also one of the best ways to learn and understand how a block of code works (this is my personal favourite.) [name=Katrina]
> So far, it's been very helpful to use the combination of the FCC elementary trainings, seeing those trainings implemented in tinkers, and then to be able to tinker with them before actually starting to use them in our own projects. [name=Steve]
> I think it's best to actually explore the framework features, try them out, and see how it will work. [name=Yukari]
* Think about your experience building a page from scratch last week.
* What is your attitude on using, learning new frameworks like this?
:::info
**Group's Answer:** Most of us in the group definitely felt the steep learning curve of getting familiarise with Bootstrap (with 3 or 4 other platforms we are working on to build our site). We felt intimidated as the information can be way too overwhelming - but taking a step back and understanding each component and the foundations of the framework helped us quite a lot. We also felt the thrill of excitement when we start to see our page come together once we started building our projects.
:::
> There's definitely a learning curve - and to be honest, looking at the Boostrap documentation can be overwhelming. But it was exciting to put things together and understanding how seemingly parts work together. THEN, when you encounter errors - that's when the real challenge begins!! [name=Katrina]
> It was very daunting at first - it's scary to be faced with a blank page! But then, as we started to be able to add in features and sections from various FCC trainings (and with the help of tinkers to be able to confirm that we were using them correctly), it began to seem more possible, and it's SUCH a proud feeling to code our first webpage! [name=Steve]
> I am very interested in learning new frameworks. These will help me in the future when I develop something. [name=Yukari]
### GRID SYSTEM

<div class="container">
   <div class="row">
     <div class="col-__-__">
       <!-- CONTENT -->
     </div>
   </div>
 </div>

* FIND the above pattern(s) within the HTML.
* Move a .row to the outside of a container. What happens?
:::info
**Group's Answer:** When we move .row outside of a container, it will cause the row to be misaligned.
:::
> The elements within the container are misaligned.[name=Katrina]
> The pages in the container are misaligned.[name=Yukari Kimura]
> I agree with Yukari - the row is misaligned with the container so it is outside of the container column format. [name=Steve]
* Move a column outside a row but within a container. What happens?
:::info
**Group's Answer:** The visual presentation of a page is not affected when we move a column outside a row but within a container.
:::
> No change at all. [name=Katrina]
> No particular change is seen.[name=Yukari Kimura]
> I don't see a change when moving the column outside of the row. [name=Steve]

* What is the importance of using these three classes together `container`, `row`, `col-__-__` and in the correct hierarchical sequence?
:::info
**Group's Answer:** `Container` has the role of centering the contents of the screen, so it should be used as the first class in CONTENT. It can be compared to a "box". Inside the box, you then have `row` and `column` - depending on how much content you have, you can have multiple `container` or `rows` and `columns` within the same `container` given that you follow the preset hierarchical sequence. The bootstrap external resource uses the rows and columns within those containers in hierarchical order.
:::
> `Container` can be compared to a "box". Inside the box, you then have `row` and `column` - depending on how much content you have, you can have multiple `container` or `rows` and `columns` within the same `container` given that you follow the preset hierarchical sequence. This sequence is based on Bootstrap's GRID System to layout and align content. [name=Katrina]
> `Container` has the role of centering the contents of the screen, so it should be used as the first class in CONTENT. And put the grid system of `row` and `col-__-__` in `container` element. Thus, an error will occur if it is not the correct hierarchical sequence.[name=Yukari Kimura]
> `container` is the main bucket to center everything within the page itself, and then the bootstrap external resource uses the rows and columns within those containers in hierarchical order. [name=Steve]
* Manipulate some of the content inside the columns to different parts of the page, keeping in mind whether the content is inside a `row`, or a `container`, or none.
* What happens when content falls outside of the columns?
:::info
**Group's Answer:** Moving items outside of containers moves the text to the far left of the screen as basic HTML text (e.g. When it is out of the `container`, it moved to the far left. When out of the `row`, it didn't change anything. When out of the `col-__-__`, it was slightly offset to the left), and there is an evident pattern when the hierarchy is not followed is the misalignment of content and layout.
:::
> The evident pattern when the hierarchy is not followed is the misalignment of content and layout. [name=Katrina]
> When the content ``<h2>Introduction to Purrr</h2>`` is moved out of the columns, the position of the sentence itself moves, although there is no big change.
> e.g. When it is out of the `container`, it moved to the far left. When out of the `row`, it didn't change anything. When out of the `col-__-__`, it was slightly offset to the left.[name=Yukari Kimura]
> Moving items outside of containers moves the text to the far left of the screen as basic HTML text, whereas moving the content simply outside of the row just misaligns the text with the particular alignment. [name=Steve]
* Manipulate the column classes to replace some `col-xs-__` to `col-lg-__`. Then, drag your browser screen out to make it really large or really small. Or you can zoom in or zoom out of your browser to get the similar effect.
* What does the `xs`, `sm`, `md`, `lg`, `xl` represent in the column class notation?
:::info
**Group's Answer:** These represent the five grid tiers available in the Boostrap Grid System. These sizes corresponds to the range of devices the framework supports (`xs` is extra small、`sm` is small、`md` is medium、`lg` is large、`xl` is extra large.) Expanding the table elements expands the table across the entire container.
:::
> These represents the five grid tiers available in the Boostrap Grid System. These sizes corresponds to the range of devices the framework supports. This helps developers easily create pages that are responsive. [name=Katrina]
> These represent the sizes of the columns. Changing the table elements to xl expands the table across the entire container. [name=Steve]
> `xs` is extra small、`sm` is small、`md` is medium、`lg` is large、`xl` is extra large. [name=Yukari Kimura]
* Manipulate the column classes to replace some `col-__-12` to `col-__-3`. This is partly dependent on how large your browser window is so you might have to play with the size or zoom in and out to see differences.
* What does the `number` in the column name represent with respect to the GRID system?
:::info
**Group's Answer:** It shows the width, and is based on the column layout shown in the Bootstrap training. The number in the column name represents the number of column across the Grid System. As we have learned, Bootstrap's Grid System has a classic 12 column units. Given this, we can define our column based on the grid sytem, as long as it equates to 12. For example, if we want 3 equal columns, we can define it as `col-__4, col-__4, col-__4`. In the same way, if we want to have 2 columns but have the left column wider, we can define it as `col-__8,col-__4` (as long as it equates to 12).
:::
> The number in the column name represents the number of column across the Grid System. As we have learned, Bootstrap's Grid System has a classic 12 column units. Given this, we can define our column based on the grid sytem, as long as it equates to 12. For example, if we want 3 equal columns, we can define it as `col-__4, col-__4, col-__4`. In the same way, if we want to have 2 columns but have the left column wider, we can define it as `col-__8,col-__4` (as long as it equates to 12) [name=Katrina]
> It shows the width of the column. [name=Yukari Kimura]
> It shows the width, and is based on the column layout shown in the Bootstrap training. [name=Steve]
* Carefully observe and compare this column **class naming system** (i.e. opinion) that Bootstrap has, with the column naming system of these other GRID SYSTEMS:
* https://semantic-ui.com/collections/grid.html
* Click on the <> on the page to see the actual code with classes
* http://materializecss.com/grid.html
* http://getskeleton.com/#grid
* What are the similarities and what are the differences?
:::info
**Group's Answer:**
> Similarities:
> All systems contains `row` and `column` classes.
> All systems allows users to set different column sizes
> The size can be set.
> They are based on column width, and the container contents can be adjusted based on the number of columns. <br>
Differences:
>The UI grid has a total of 16 columns unlike Bootstrap which has 12 columns
> In the UI grid, `row` can be explicit (adding the `row` element) - or implicit (which automatically when there's no more space left in the previous row). In Bootstrap, one must explicitly include `row` element.
> The syntax for the `column` is different based on the framework. In the UI grid, it follows a `four wide column` which places the width first, while in Bootstrap, the width is placed at the end of the code `col-xs-4`
> Layout range to be specified.
> The column count in each system is different. Therefore, the programmer would need to adapt their webpage for the column widths coded into the HTML code.
:::
> Similarity:
> 1. All systems contains `row` and `column` classes.
> 2. All systems allows users to set different column sizes
> Differences:
> 1. The UI grid has a total of 16 columns unlike Bootstrap which has 12 columns
> 2. In the UI grid, `row` can be explicit (adding the `row` element) - or implicit (which automatically when there's no more space left in the previous row). In Bootstrap, one must explicitly include `row` element.
> 3. The syntax for the `column` is different based on the framework. In the UI grid, it follows a `four wide column` which places the width first, while in Bootstrap, the width is placed at the end of the code `col-xs-4`
> [name=Katrina]

> Similarity: The size can be set.
Differences: Layout range to be specified. [name=Yukari Kimura]
>Similarity: They are based on column width, and the container contents can be adjusted based on the number of columns.
>Difference: the column count in each system. Therefore, the programmer would need to adapt their webpage for the column widths coded into the HTML code. [name=Steve]
* What is a Grid System convention vs. rule? Can you give an example?
:::info
**Group's Answer:**
> Rule Examples:
> Rows must be placed within a `container` (fixed-width) for proper alignment and padding
> Content should be placed within columns
> Codes in the order of class = `container`, class = `row`, class = `col-__-__`.
> The necessary hierarchy of nesting rows and columns within containers. <br>
> Convention Examples:
> Grid columns are created by specifying the number of 12 available columns you wish to use depending on the needs of your page
> When setting the column width with the `number`, basically specify a total of `12` for each prefix.
> When the column width is determined through the `col-__-__`
:::
> Grid System **rules** examples:
> 1. Rows must be placed within a `container` (fixed-width) for proper alignment and padding
> 2. Content should be placed within columns
>
> Grid System **conventions** example:
> 1. Grid columns are created by specifying the number of 12 available columns you wish to use depending on the needs of your page
> [name=Katrina]

> Rule: e.g, codes in the order of class = `container`, class = `row`, class = `col-__-__`.
Convention: e.g, When setting the column width with the `number`, basically specify a total of `12` for each prefix.[name=Yukari Kimura]
> An example of a rule is the necessary hierarchy of nesting rows and columns within containers. An example of a convention is when the column width is determined through the `col-__-__` [name=Steve]
* What would happen to my columns if I remove Bootstrap from my page?
:::info
**Group's Answer:** The `col-__-__` element is deleted and each contents are arranged vertically. Removing Bootstrap from the page does not only cause the content to lose all its preset styling applied - but most importantly removes the *responsiveness* of the page. This can be seen when you adjust the size of the page in CodePen. The content would revert to basic HTML and all of the preset CSS styling would be removed automatically.
:::
> Removing Bootstrap from the page does not only cause the content to lose all its preset styling applied - but most importantly removes the *responsiveness* of the page. This can be seen when you adjust the size of the page in CodePen. [name=Katrina]
> The `col-__-__` element is deleted and each contents are arranged vertically.[name=Yukari Kimura]
> The content would revert to basic HTML and all of the preset CSS styling would be removed automatically. [name=Steve]
* Is the class, col-xs-6 for example, really that special?
:::info
**Group's Answer:** What is 'special' when it comes to coding? :smile: It's special in terms of dividing the screen based on column width! Very important for bootstrap use. `col-xs-6` is a class that sets a column width to 6 and becomes just the size of the screen divided into two - which I guess is pretty flat so not so special!
:::
> What is 'special' when it comes to coding? :smile: For me, `col-xs-6` is a class that sets a column width to 6 - which I guess is pretty flat so not so special![name=Katrina]
> `col-xs-6` becomes just the size of the screen divided into two. [name=Yukari Kimura]
> It's special in terms of dividing the screen based on column width! Very important for bootstrap use! [name=Steve]
* Visit the following link: [Grid System Explained](https://lmgtfy.com/?q=youtube+bootstrap+grid+system)
* What is the advantage of using popular tools like Bootstrap?
:::info
**Group's Answer:** It leads to a very user-friendly design, and even though it's a new format to learn and incorporate within the HTML coding, it creates a template that we can build off of. The trainings on Bootstrap helped a lot as well, and it seems like such a useful way to design interactive webpages with more freedom than simple HTML. One of the things we appreciate the most when learning about Bootstrap is the amount of resource available online to help further understand and make codes sense. Although it's overwhelming, there are various communities of developers (online and offline) that are more than willing to help when you post questions online (for example in StackOverflow). Also, tons of tutorial videos are already available to help aid beginners! A few other advantages that we noticed are:
> * Absorb the browsing environment.
> * Easy to introduce responsive.
> * Even if you are not familiar with design, you can incorporate recent designs.
> * Design process and coding process can be integrated, shortening the construction period.
:::
> One of the things I appreciate the most when learning about Bootstrap is the amount of resource available online to help further understand and make codes sense. Although it's overwhelming, there are various communities of developers (online and offline) that are more than willing to help when you post questions online (for example in StackOverflow). Also, tons of tutorial videos are already available to help aid beginners like me! [name=Katrina]

> * Absorb the browsing environment.
> * Easy to introduce responsive.
> * Even if you are not familiar with design, you can incorporate recent designs.
> * Design process and coding process can be integrated, shortening the construction period.[name=Yukari Kimura]
> It leads to a very user-friendly design, and even though it's a new format to learn and incorporate within the HTML coding, it creates a template that we can build off of. The trainings on Bootstrap helped a lot as well, and it seems like such a useful way to design interactive webpages with more freedom than simple HTML. [name=Steve]
:::success
Did you know? As a student, you have access to the full Lynda.com library. These are fantastic resources if you want to actually see the details of specific feature implementation.

Thing with these tutorials is that they tend to explain *how to do* specific things, but don’t quite address the issue of deeper understanding to explicitly address how concepts relate and tie together. That said, used in *conjunction* with activities like the Tinkers, can be a very powerful combo.

To access Lynda.com:

* Log IN with your student account
* http://www.tc.columbia.edu/idesign/resources
* See the Bootstrap Essentials VIDEO Tutorial
* https://www.lynda.com/Bootstrap-tutorials/Bootstrap-3-Essential-Training/417641-2.html
:::

* How does the combination of different ways of observing, manipulating, thinking, and applying code help learners to develop a comprehensive mental model of understanding?
:::info
**Group's Answer:** With various ways of observing, manipulating, thinking, and applying code, the knowledge on the development side increases and the mental model becomes even better. Going through these processes does not only make learners familiar with the technical side of coding - but it helps learners develop computational thinking. This kind of multimodal and well-rounded coding learning helps us when we are envisioning interactive design models for educational purposes. The more we are exposed to the thought-process of how other developers build there sites, the more we learn about the best practices of efficient coding. When you're trying to develop a website or an app with many features, you'll know how to organize your information. You can create easy-to-use websites and apps:smile:
:::
> Going through these processes does not only make learners familiar with the technical side of coding - but it helps learners develop computational thinking. The more we are exposed to the thought-process of how other developers build there sites, the more we learn about the best practices of efficient coding. [name=Katrina]
> With various ways of observing, manipulating, thinking, and applying code, the knowledge on the development side increases and the mental model becomes even better. When you're trying to develop a website or an app with many features, you'll know how to organize your information. You can create easy-to-use websites and apps:smile:[name=Yukari Kimura]
> This kind of multimodal and well-rounded coding learning helps us when we are envisioning interactive design models for educational purposes. [name=Steve]
### COMPONENTS
* Browse through the different [COMPONENTS](http://getbootstrap.com/components/) of the Bootstrap Framework and observe **the pattern** of how the documentation is presented. Experiment with BUTTONS for a good example: http://getbootstrap.com/components/#btn-groups
* When learning to use new components in a framework, what do you think is the best practice on how to learn about the feature?
:::info
**Group's Answer:** It's best practice to try the feature you want to use and see what the changes appear on screen. These are useful features to try within a Tinker - it feels more comfortable actually implementing things such as these buttons once we've already successfully seen or used them within tinkers where it seems "safer" to use in a pre-existing webpage code. One of the noticable pattern in the Button Documentation is that it starts with the simple fundamentals before presenting further complex options or customisation for the buttons. We can follow this similar sequence when learning about a feature. First, we need to understand the fundamental components of a new feature. Once we do, only then we should add on other classes or styling for the new feature.
:::
> One of the noticable pattern in the Button Documentation is that it starts with the simple fundamentals before presenting further complex options or customisation for the buttons. We can follow this similar sequence when learning about a feature. First, we need to understand the fundamental components of a new feature. Once we do, only then we should add on other classes or styling for the new feature. [name=Katrina]
> I think it's best practice to try the feature you want to use and see what the changes appear on screen.[name=Yukari Kimura]
> These are useful features to try within a Tinker - I think that I feel more comfortable actually implementing things such as these buttons once I've already successfully seen or used them within tinkers where it seems "safer" to use in a pre-existing webpage code. [name=Steve]
* In my table, I have “Extremely Deadly” as a label of sorts, that is bright red which is defined by the `.danger` class. OVERRIDE this rule in your custom CSS pane to make `danger` a `pink` color.
* What affect might this have on other parts of my page?
:::info
**Group's Answer:** Adjusting the color for the `danger` class can happen by just changing the label class in the CSS code. It instantly overrides the basic bootstrap `.danger` class. To change the `danger` label to `pink`, we can add the following code on the CSS Pane:
`.label-danger {
background: #FFC0CB;}`
However, by adding this code, this will be applied to all `.label-danger` throughout the page. The color of “Very deadly” label might disappear, giving an error in other table color areas. If there's just 1 particular label that we want to change to pink, we could give it an `id` so that we can isolate the styling applied to that specific `id`.
:::
> To change the `danger` label to `pink`, I added the following code on the CSS Pane:
> `.label-danger {
background: #FFC0CB;}`
> However, by adding this code, this will be applied to all `.label-danger` throughout the page. If there's just 1 particular label that we want to change to pink, my suggestion is to give it an `id` so that we can isolate the styling applied to that specific `id`.
> [name=Katrina]

> The color of “Very deadly” label might disappear, giving an error in other table color areas.[name=Yukari Kimura]
> Adjusting the color for the `danger` class can happen by just changing the label class in the CSS code. It instantly overrides the basic bootstrap `.danger` class. [name=Steve]
* Pick a few different components you find interesting. Try to implement them into your Tinker fork on Codepen.
* Share with your group what you found about the experience of learning to use new features and what your takeaway was.
:::info
**Individual Answers Below:**
:::
> I've been reading/learning about Bootstrap since last week and have applied some features on my first project, however, I still find it overwhelming especially looking at the documentation. I realised that the learning curve is steep - especially when there's a lot of documentation to go through. What helped me (or still helping me) is going through the structure of Bootstap first (understanding it) before randomly jumping to different features to apply.
> Main key takeaway is that understand the fundamentals of Bootstrap - framework, structure, syntax and patterns first - because once you have a strong understanding or foundation, it becomes easier to understand other features as it is easier to spot patterns and structure. Also, widen your pool of inspiration when it comes to building your site - use the Inspect mode in Google and peek at their code. Try to understand it - even if there's a struggle - but spot the patterns, see if you can also map our their page using containers (I draw boxes on paper) to further have an idea how pages are developed by professionals.
> [name=Katrina]

> `Breadcrumb` seems to be a very useful component. Indicates the hierarchy in which the current page is located.
`Navbar` is the perfect style for navigation headers on websites and applications. Often used to create a header menu bar.
`Pagenation` can provide a page feed function when there are multiple pages.[name=Yukari Kimura]
>I was fascinated by the Carousel feature of bootstrap, found in the bootstrap components guide. I use Drupal often for work, but that is such a WISIWIG (what I see is what I get) template. They utilize the carousel feature as a flashy aspect of their templates, and now I can see behind the curtain for how to implement that through bootstrap. [name=Steve]

### JAVASCRIPT
:::info
Some components, mostly those that will react to user interaction are driven by Javascript. We aren’t quite there yet. You are free to play with these features, but for the group conversation try to focus on the non-programmatic features.
:::

* Looking forward to seeing what you come up with. :smile_cat: