Merge pull request #115 from mbektasbbg/layout_tutorial_minor_fixes

Layout tutorial minor fixes

Author: mwcraig

notebooks/06.01-widget-layout-and-styling.ipynb

@@ -113,7 +113,7 @@
    "cell_type": "markdown",
    "metadata": {},
    "source": [
-    "The following example shows how to resize a `Button` so that its views have a height of `80px` and a width of `50%` of the available space. It also includes an example of setting a CSS property that requires multiple values (a border, in thise case):"
+    "The following example shows how to resize a `Button` so that its views have a height of `80px` and a width of `50%` of the available space. It also includes an example of setting a CSS property that requires multiple values (a border, in this case):"
    ]
   },
   {
@@ -409,13 +409,13 @@
    "source": [
     "from ipywidgets import Layout, Button, HBox\n",
     "\n",
-    "items_0 = [\n",
+    "items = [\n",
     "    Button(description='weight=1; 0%', layout=Layout(flex='1 1 0%', width='auto'), button_style='danger'),\n",
     "    Button(description='weight=3; 0%', layout=Layout(flex='3 1 0%', width='auto'), button_style='danger'),\n",
     "    Button(description='weight=1; 0%', layout=Layout(flex='1 1 0%', width='auto'), button_style='danger'),\n",
     "]\n",
     "box_layout = Layout(align_items='stretch', width='70%')\n",
-    "HBox(children=items_0, layout=box_layout)"
+    "HBox(children=items, layout=box_layout)"
    ]
   },
   {
@@ -506,7 +506,7 @@
    "source": [
     "**A reactive form**\n",
     "\n",
-    "The form is a `VBox` of width '50%'. Each row in the VBox is an HBox, that justifies the content with space between.."
+    "The form is a `VBox` of width '50%'. Each row in the VBox is an HBox, that justifies the content with space between."
    ]
   },
   {
@@ -676,7 +676,7 @@
    "source": [
     "#### *Compatibility note*\n",
     "\n",
-    "The `overflow_x` and `overflow_y` options are deprecated in ipywidgets `7.5`. Instead, use the shorthand property `overflow='scroll hidden'`. The first part specificies overflow in `x`, the second the overflow in `y`."
+    "The `overflow_x` and `overflow_y` options are deprecated in ipywidgets `7.5`. Instead, use the shorthand property `overflow='scroll hidden'`. The first part specifies overflow in `x`, the second the overflow in `y`."
    ]
   },
   {
@@ -715,7 +715,7 @@
    "cell_type": "markdown",
    "metadata": {},
    "source": [
-    "**Four buttons in a box revisted: Change order and orientation**\n",
+    "**Four buttons in a box revisited: Change order and orientation**\n",
     "\n",
     "This example, from earlier in this notebook, lays out 4 buttons vertically.\n",
     "\n",
@@ -755,7 +755,7 @@
    "cell_type": "markdown",
    "metadata": {},
    "source": [
-    "**Carousel revisted: item layout**\n",
+    "**Carousel revisited: item layout**\n",
     "\n",
     "The code that generated the carousel is reproduced below. Run the cell, then continue reading."
    ]
@@ -817,11 +817,11 @@
     "\n",
     "### Basics\n",
     "\n",
-    "To get started you have to define a container element as a grid with display: grid, set the column and row sizes with grid-template-rows, grid-template-columns, and grid_template_areas, and then place its child elements into the grid with grid-column and grid-row. Similarly to flexbox, the source order of the grid items doesn't matter. Your CSS can place them in any order, which makes it super easy to rearrange your grid with media queries. Imagine defining the layout of your entire page, and then completely rearranging it to accommodate a different screen width all with only a couple lines of CSS. Grid is one of the most powerful CSS modules ever introduced.\n",
+    "To get started you have to define a container element as a grid with display: grid, set the column and row sizes with grid-template-rows, grid-template-columns, and grid_template_areas, and then place its child elements into the grid with grid-column and grid-row. Similar to flexbox, the source order of the grid items doesn't matter. Your CSS can place them in any order, which makes it super easy to rearrange your grid with media queries. Imagine defining the layout of your entire page, and then completely rearranging it to accommodate a different screen width all with only a couple lines of CSS. Grid is one of the most powerful CSS modules ever introduced.\n",
     "\n",
     "### Important terminology\n",
     "\n",
-    "Before diving into the concepts of Grid it's important to understand the terminology. Since the terms involved here are all kinda conceptually similar, it's easy to confuse them with one another if you don't first memorize their meanings defined by the Grid specification. But don't worry, there aren't many of them.\n",
+    "Before diving into the concepts of Grid it's important to understand the terminology. Since the terms involved here are all kind of conceptually similar, it's easy to confuse them with one another if you don't first memorize their meanings defined by the Grid specification. But don't worry, there aren't many of them.\n",
     "\n",
     "**Grid Container**\n",
     "\n",
@@ -934,7 +934,7 @@
    "cell_type": "markdown",
    "metadata": {},
    "source": [
-    "If you don't define a widget for some of the slots, the layout will automatically re-configure itself by merging neighbouring cells"
+    "If you don't define a widget for some of the slots, the layout will automatically re-configure itself by merging neighboring cells"
    ]
   },
   {
@@ -1096,7 +1096,7 @@
    "cell_type": "markdown",
    "metadata": {},
    "source": [
-    "`AppLayout` is a widget layout template that allows you to create an application-like widget arrangements. It consist of a header, a footer, two sidebars and a central pane:"
+    "`AppLayout` is a widget layout template that allows you to create an application-like widget arrangements. It consists of a header, a footer, two sidebars and a central pane:"
    ]
   },
   {