# U1LA6 Lab: CheeseBook Computers with Bulma
### Teacher Notes
The biggest difficulty that students face when using Bulma is generally putting things in the wrong place. This includes putting class names under the wrong `div` (captured mainly in Part 1) and copying and pasting pre-written components or other layouts in the wrong sections (mainly covered in Part 2). Comments have been written throughout the `index.html` and referenced in the directions below to help prevent such errors, but be sure to have students undo their changes until they get to a working version of their code when necessary to spot hard-to-spot errors.
The Bulma documentation is well written, and it provides comprehensive definitions and examples for everything used below. For every newly introduced class or component, a link is provided linking to the corresponding page. As students progress through the lab, they will feel more comfortable using Bulma as well as reading through the documentation, but know that this, just like any documentation, can be overwhelming at first glance.
**Students should utilize the Starter Code (**[**repl.it** ](https://replit.com/@qrtnycs4all/U1LA6-Mini-Project-Starter-Code#index.html)**|** [**github**](https://github.com/nycdoe-cs4all/interactive-web/tree/main/unit-1-html-and-css-good-vs-bad-design/U1LAB6/U1LAB6-Starter)**) for this project.**
### Prompt
You've already seen how to style a website using CSS. Now, there are a whole bunch of different packages online (known as *frameworks*) that consist of pre-written CSS rulesets for classes that we can import and use to quickly style different portions of our websites. Today we bring to life the *"CheeseBook"* website using the *Bulma framework*.
**Directions**: For the entirety of this lab, use [the Bulma documentation](https://bulma.io/documentation/) as you walk through these steps that will guide you in adding Bulma to the website.
#### Part 1
1. First, before using Bulma, you need to import the framework by linking it at the top of the `index.html`. Uncomment the following line in the head of the file under the link for the `style.css`:
```html
```
2. If you do this correctly, you should already see some changes being done to the web page. There is a good amount of pre-written HTML with Bulma classes already included within.
3. Now add the `section` class to the first `div` written in the body. The `section` class will add margin around everything within the `div`. Check out [the documentation for "section"](https://bulma.io/documentation/layout/section/) for more information. The code should look as follows:
```html
...
```
4. The computers are meant to be in a row, all the same size. In the `index.html`, notice that the outermost `div` has a class of `columns` (plural) and some of the inner `div`s have a class of `column` (singular). There are two `div`s without the class `column`. Add the `column` class to the two `div`s and see the changes made. Check out [the documentation for "columns"](https://bulma.io/documentation/columns/basics/) for more information.
5. In the last of those `div`s, there is an empty class in the button element. Add the `button` class to the last button, and notice what changes were made. Check out [the documentation for "buttons"](https://bulma.io/documentation/elements/button/) for more information.
6. The next section in the `index.html` is labeled as *"Picture Ad 1"*. The wrapper div already contains the class `columns`; add the class `column` to the 2 "card" `div`s inside. Then, for the `div` with the `class= "content"`, include the helper `has-text-centered` to center the text. This is what some of the code should look like.
```html
"We love...
```
7. Now that you have some practice with `columns` and `column`, properly add the class names to `Picture Ad 2` which should have 3 columns inside.
8. For the same `Picture Ad 2`, notice that all three section on the webpage are the same size. They each take up *one-third* of the space horizontally. Find the two `div`s that contain the left and right image, and add the class name `is-one-quarter` to them both. Their outermost `div` is of `class="card"` Check out [the documentation for "column sizes"](https://bulma.io/documentation/columns/sizes/) for more information. Some of the code should look as follows:
```html
```
9. Finally for Part 1, use part 3 to put everything we've done so far together.
* Use `columns` and `column` to display the 2 *image* and *text* `div`s horizontally,
* Add the `has-text-centered` class name to the div with the text, and
* Add the `is-two-fifths` class to the div with the image so that it only takes up *two-fifths* of the page horizontally instead of *one-half*.
10. Congrats! Take a step back and notice how much you've done by simply adding class names but not writing any CSS.
#### Part 2
1. In part 1, the HTML was already written for you, and you added pre-written CSS class names to change the webpage. For this next section, you will be copying and pasting pre-written HTML from the Bulma website using their *layouts* and *components* such as a `Hero`, `Navbar`, `Footer`, and `Cards`.
2. Check out [the documentation for Hero](https://bulma.io/documentation/layout/hero/). Copy and paste the the first example for `Hero` into the `index.html` where the comment indicates. Then, delete the `p` element of `class="subtitle"`. Try this yourself before looking at the code below to check your work. The code should look as follows:
```html
Hero title
```
3. Now, make the following changes and additions to the Hero. Notice the changes on the website after each addition:
* Change the title text to *"Welcome to CheeseBook"*
* Add the class `is-fullheight` to the outermost `section` with `class="hero"`.
* Add the following classes to the paragraph element with the new title. Click on any of them to see the documentation for more information:
* [has-text-white](https://bulma.io/documentation/helpers/color-helpers/#text-color) - makes the font color white,
* [is-size-1](https://bulma.io/documentation/helpers/typography-helpers/#size) - increases the font size,
* [has-background-link](https://bulma.io/documentation/helpers/color-helpers/#background-color) - changes the background color around the font to "link", and
* [px-3](https://bulma.io/documentation/helpers/typography-helpers/#size) - adds 3 units of padding to the left and right (x-axis).
4. Finally for the `Hero`, add the class name `blue-image` to the outermost `section` with `class="hero is-fullheight"`. This is a class ruleset that has been written in the `style.css`. Check it out to see how it's styled. Then, see what happens on the webpage as a result. Your final hero section should look as follows:
```html
Welcome to CheeseBook
```
5. For the `Navbar`, [checkout the documentation](https://bulma.io/documentation/components/navbar/) and copy and paste the large first example under the comment in the HTML for it. Refresh the website and scroll to the top. You should now see a beautiful little navbar. Incase you're stuck, the first couple of lines in your `index.html` should look as follows:
```html