W3D1 outline.md

Warmup

Concepts as experiments
CSS is tough
- Browsers support
- Focus on using Chrome only
- Chrome DevTools = best friend
SASS/SCSS covered later in the week
Bootstrap is to be experimented with
Box-model
- Not perfect but powerful
- Flexbox is improving on it

HTML

Role of HTML
div
main
section, article, header, footer, nav
Class, name & id

CSS

Role of CSS
Box-model
- Each element defined as a box of several edges that contain regions:
  - Content
  - Padding
  - Border
  - Margin

Margin
+--------------------------------------+
|  Border                              |
|  +-------------------------------+   |
|  |  Padding                      |   |
|  |  +-------------------------+  |   |
|  |  |                         |  |   |
|  |  | Content                 |  |   |
|  |  | +-------------------+   |  |   |
|  |  | | Content goes Here |   |  |   |
|  |  | +-------------------+   |  |   |
|  |  |                         |  |   |
|  |  +-------------------------+  |   |
|  |                               |   |
|  +-------------------------------+   |
+--------------------------------------+

Content box vs border box
Using box-sizing: content-box setting the width, height related properties set the size of the content region to the given values
Using box-sizing: border-box setting the width, height related properties set the size of the border region to the given values

In this example, content-box would have a width of 216px but border-box would have the width of 200px;

.content-box {
  width: 200px;
  height: 100px;
  padding: 8px 4px;
}

.border-box {
  box-sizing: border-box;
  width: 200px;
  height: 100px;
  padding: 8px 4px;
}

kowsheek/W3D1 outline.md

Warmup

HTML

CSS