first commit

2024-01-15 20:14:10 +00:00
commit 8c81ee28b7
3106 changed files with 474415 additions and 0 deletions
--- a/Development.md
+++ b/Development.md
@@ -0,0 +1,135 @@
+## Lecture 1 (13:00)
+
+### Box Dimensions
+
+- A box is sized just big enough for its contents by default.
+- Dimensions are usually specified using either relative or absolute dimensions.
+	- Most common dimensions are px, %, or ems.
+
+#### Relative Dimensions / Measurements
+
+- Relative length units scale better between different rendering mediums.
+
+| Unit | Description |
+|-----|-------------|
+| em | Relative to the font-size of the element (2em means 2times the size of the current font) |
+| ex  | Relative to the x-height of the current font (rarely used) |
+| ch | Relative to width of the "0" (zero) |
+| rem | Relative to font-size of the root element |
+| vw | Relative to 1% of the width of the viewport |
+| vh | Relative to 1% of the height of the viewport |
+| vmin | Relative to 1% of viewport's smaller dimension |
+| vmax | Relative to 1% of viewport's larger dimension |
+| % | Percentage of container dimension |
+
+#### Absolute Dimensions
+
+- Absolute length units are not recommended for use on screen, because screen sizes vary so much.
+- However, they can be used if the output medium is known, such as for print layout.
+
+| Unit | Description |
+| - | - |
+| cm | centimetres |
+| mm | millimetres |
+| in | inches (1in = 96px = 2.54cm) |
+| px | pixels (1px = 1/96th of 1in) |
+| pt | points (1pt = 1/72 of 1in) |
+| pc | picas (1pc = 12 pt) |
+
+#### Limiting Width `min-width`, `max-width`
+
+- Pages can be designed to expand and shrink to fit the users screen.
+	- `min-width` specifies the smallest the box can be
+	- `max-width` specifies the largest the box can be
+	- This is helpful to making sure all pages are legible on all devices and screen sizes.
+
+#### Limiting Height `min-height`, `max-height`
+
+- It is also possible to limit the height of a CSS box using `min-height` and `max-height`.
+- If content is too large for the box it can expand and look unclean.
+- By using the `overflow` property, we can specify what happens to additional content when it is larger than its bounding box.
+
+#### Overflowing Content `overflow`
+
+- The `overflow` property tells the browser how to deal with content that expands outside of the box.
+- It can have the following values:
+	- `hidden` - additional content is discarded at render.
+	- `visible` - default value. Content renders outside of the bounding box.
+	- `scroll` - add a scroll bar to the box to allow additional content to be seen.
+	- `clip` - similar to hidden, but forbids all types of scrolling.
+
+### Box Model
+
+![](Pasted%20image%2020231102132048.png)
+
+- Every box has 3 available properties
+	- `border` - If visible, the width of the border
+	- `margin` - space between this and adjacent boxes
+	- `padding` - space between border and content
+
+#### Border
+
+- The `border` property allows us to specify width, style and colour in one line ( in that order )
+
+```css
+p {
+	width: 250px;
+	border: 3px dotted red;
+}
+```
+
+##### Border Width `border-width`
+
+- Can be defined as `thick` `medium` or `thin`, but usually in pixels.
+- Can also control the 4 borders individually:
+	- `border-top-width: 2px;`
+	- `border-right-width: 1px;`
+	- etc..
+- Or by setting 4 values of `border-width`
+	- `border-width: 2px, 1px, 1px, 2px;`
+	- `border-width: top right bottom left;`
+
+##### Border Style `border-style`
+
+- Controls the style of the border
+	- Accepts: `solid` `dotted` `dashed` `double` `groove` `ridge` `inset` `outset` `hidden` `none`.
+- Can also set style of the borders individually:
+	- `border-top-style: dotted;`
+	- `border-right-style: ridge;`
+	- etc..
+
+##### Border Colour `border-color`
+
+- Can be set to the hard-coded CSS colour values, RGBA, HSLA, etc..
+	- `border-color: darkcyan;`
+- Can be set individually using the same scheme as previous.
+
+#### Padding
+
+- The `padding` property allows us to shorthand set the values for all 4 padding properties in one line
+
+```css
+	padding: 10px 10px 5px 5px;
+```
+
+If we only specify 2 values, they will be treated as \[top/bottom] \[left/right]
+
+#### Margin
+
+- Similar to `padding` and `border`, we have a shorthand property called `margin`
+
+```css
+	margin: 20px 20px 25px 20px;
+```
+
+If we only specify 2 values, they will be treated as \[top/bottom] \[left/right]
+
+#### Centering Content
+
+- Box must have a specified width ( or it will fill the page )
+- Set `left-margin` and `right-margin` to `auto`.
+- Browser will set the margin to the space it could take up, equally, on each side of the box.
+
+Note: Older browsers may need the property `text-align` set to `centre` too.
+
+