interactive button added

links/Runtime Summary

@@ -0,0 +1,101 @@
+# nodeJS
+
+**What is it?**
+It's an open source runtime environment
+The runtime operates outside of a browser context - omits browser specific javascript Api's but supports more traditional OS Api's.
+Async I/O to help prevent blocking. 
+
+**What does it allow you to do?**
+Allows you to use javascript on the backend as well as the frontend. The alternative would be a second language - More complex. 
+Allows you to use Npm library - Useful bits of reuseable code that make life easier rather than writing them from scratch.
+
+**Links & Resources**
+https://nodejs.org/en/learn/getting-started/introduction-to-nodejs
+https://www.freecodecamp.org/news/what-is-node-js/
+http://debuggable.com/posts/understanding-node-js:4bd98440-45e4-4a9a-8ef7-0f7ecbdd56cb
+
+
+
+# NPM
+
+**What is a node package manager?**
+
+A Node Package Manager (NPM) is a tool used to manage JavaScript packages (also called modules or libraries) in Node.js projects. It is a online repository for the publishing of open-source Node.js projects.
+
+
+
+text & imagery reference :
+https://www.geeksforgeeks.org/node-js-npm-node-package-manager/
+https://careerfoundry.com/en/blog/web-development/what-is-npm/#what-is-npm
+
+**What is a dependency?**
+
+
+In the npm (Node Package Manager) context, a dependency is a package that your project needs to function properly. These dependencies are typically installed from the npm registry and are listed in the package.json file.
+
+Types of dependencies:
+
+* Regular Dependencies (dependencies) – Required for the app to run.
+* Development Dependencies (devDependencies) – Needed only for development (e.g., testing, linting).
+* Peer Dependencies – Used when a package expects the user to install a dependency manually (common in plugins).
+* Optional Dependencies – Not required, but used if available.
+
+text & imagery reference :
+https://dev.to/tijan_io/understanding-dependencies-and-dev-dependencies-beginners-guide-248h
+
+# Typescript
+What is TS? A programming language on top of JS that is strongly typed. That is, each variable has a type that is known in compilation time, thus is enforces some of the pre requisite semantics that are often implicit in JS. For Example:
+
+First, every variable has a type in runtime, even if we don't think about it explictly.
+
+const x = 5; //type of x = number.
+const y = 2;
+
+function add(x, y){
+return x + y;
+}
+
+Implicit semantics: addition of two numbers (number is a distinct type, as opposed to string, object, boolean, etc).
+
+const x = 'Cat';
+const y = 2;
+
+function add(x, y){
+return x + y;
+}
+
+console.log(add(x, y)) // => outputs 'Cat2' rather than a number.
+
+Beneath the hood, JS coerces y to a string and then concatenates the two strings. so it is really concatenation and not addition.
+
+There are many occasions in which the behavior of JS changes in run-time according to the actual types of the variables, and implicit type coercion happens. And very often, we are not sure what is the desired behaviour.
+
+For example,
+Equality Table
+
+The need arose for strongly typed language as part of the development process, that helps us to write in JS safely. TS is compiled into JS, which can then be run anywhere JS is run.
+
+let y: number = 2;
+let x: number = 'Cat'; // => causes error message(below)
+
+// Type 'string' is not assignable to type 'number'.
+
+function add(x: number, y: number): number {
+return x + y;
+}
+
+console.log(add('Cat', 7)); // => causes error message (below)
+
+// Argument of type 'string' is not assignable to parameter of type 'number'.
+
+How to start using TS?
+–npm module
+–Nuget Package
+
+VS extension
+Bottom Line: It forces us to think about types and the semantics of types (in functions, classes, etc) which are glossed over in JS
+
+Feature	JavaScript (TS)	TypeScript (JS)
+Typing	Dynamic	Optional Static Typing
+Compilation	Interpreted	Compiled to JS
+Error Checking	Runtime	Compile Time

links/fac-31-backend-write-up.md

@@ -0,0 +1,54 @@
+---
+name: name--user-manual
+about: Edit this user manual with your own details
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+# Name
+Red Hellier
+
+## Pronouns
+They/Them
+
+### How I get my best work done:
+When I'm given a clear goal to reach but also with enough creative wiggle room to try different things.
+I work best when I'm with others, whether that's working together on something or both seperatly working in the same space.
+
+### The role I usually take in a team:
+I have worked in lots of different roles and enjoy aspects of them all.
+I find joy in leading a team and organising goals but also can feel the stress of that burden overwhelming.
+
+### My communication style:
+Honest and open
+
+### What I value:
+Flavour in all things
+Kindness and Empathy
+Ability to laugh at situations
+
+### What people misunderstand about me:
+That I'm wrong for liking Pirates of the Carribean 3
+
+### How I like to get my feedback:
+Collaboratively. I am usually receptive to feedback but I sometimes shut down if I feel like I am being given a list of issues to fix.
+I like to have a conversation so that I can better understand what I need to improve and the person feeding back can see where I was coming from.
+
+### Technical strengths & weaknesses:
+Strengths:
+Javascript
+Node.js
+
+Weaknesses:
+HTML and CSS
+git - for now...
+
+
+### Interests (programming or otherwise!):
+DnD
+Dancing
+Chappell Roan / Gay Music
+Board Games
+Cooking

links/fac-31-frontend-writeup.md

@@ -0,0 +1,120 @@
+# CSS Deep-dive
+
+## Semantic HTML - David
+
+In programming we can make a distinction between **syntax** and **semantics**.
+
+Broadly speaking syntax refers to the symbolic representation of code, and semantics refers to the meaning.
+
+In HTML (Hypertext Markup Language), documents are structured through the use of syntactical tags to indicate and divide elements such as paragraphs, links, lists, images, quotes, and forms, among others. The tags inform the semantics, or meaning, of the webpage and its divisions.
+
+If you inspect a website to look at its HTML, you will most often find the ```<div>``` tag used over and over to divide different regions of the page.
+
+HTML actually has many more tags with a better semantic flavour than the most often used tags. These include tags like ```<section>```, ```<aside>```, ```<article>```, and ```<nav>```.
+
+Semantic HTML is the careful use of these more explicit and semantically flavoured tags in creating HTML documents. There are a few reasons for this. For one, it improves the readability of the HTML, with sections and purposes better demarcated by the tags themselves, rather than needing to be distinguished from the anonymous cloud of ```<div>```s.
+
+Semantic HTML also assists and enables accessibility features, including screen-readers, by providing more information about the structure of webpages and documents.
+
+Unfortunately, it remains very common to find very unsemantic HTML in the wild, often because tools that create webpages (such as WYSIWYG pagebuilders) default to creating ```<div>```s to tag sections.
+
+
+
+
+## CSS Execution Order - Rich
+
+# CSS Style Application: Comprehensive Overview
+
+# Specificity Hierarchy
+
+| Priority | Selector Type | Description | Examples |
+|:--------:|:------------:|:------------|:--------:|
+| 1 (Highest) | Inline Styles | Directly on elements | `<h1 style="color: pink;">` |
+| 2 | ID Selectors | Unique element identifiers | `#navbar` |
+| 3 | Classes & Pseudo-classes | Targeted group styles | `.test`, `:hover` |
+| 4 | Attributes | Element attribute matching | `[type="text"]` |
+| 5 (Lowest) | Elements & Pseudo-elements | Basic HTML element styles | `h1`, `::before` |
+
+# Cascade Algorithm Stages
+
+1. **Origin & Importance**
+  - Prioritize style sources
+  - Handle `!important` declarations
+  - Manage browser defaults
+
+2. **Specificity Calculation**
+  - Rank selectors by complexity
+  - Resolve style conflicts
+  - Apply most precise rules
+
+3. **Source Order**
+  - Last defined rule wins
+  - Resolve equal-specificity conflicts
+  - Cascade through stylesheets
+
+4. **Inheritance**
+  - Transmit styles from parent elements
+  - Apply inherited properties
+  - Use inheritance keywords
+
+# Key Principles
+
+- More specific selectors override less specific ones
+- Inline styles have highest precedence
+- Systematic, predictable style application
+
+## Flexbox vs Grid - Anna 
+There are strong similiarities between both, so it's easy to pick up grid if you've learnt flexbox
+- Grid is great for structuring entire page layouts
+    - You can arrange items in both rows and columns simultaneously 
+- Flexbox is great for small components (nav bars, buttons, form layouts)
+    - You can arrange items in a row or column, so items are aligned + distributed along a simple axis
+
+Grid lets you code the website's exact look
+- structured, fixed layout where elements are placed precisely
+- define exact sizes, positions & spacing
+
+Flexbox lets you code a flexible website
+- dynamic layouts that adjust based on screensize and content 
+- distributes space automatically based on available space
+
+Flexbox layouts out an inline list of elements
+CSS grid made them a grid of columns and rows
+
+90% of the time - website navigation should be built with CSS flexbox.
+
+
+
+### Flexbox 
+#### Components
+- Flex Container
+- Flex items 
+#### Flex Direction 
+- Direction items are placed in the container. Default is row, but you can set row-reserve, column & column-reserve
+#### Alignment
+- Justify-content: Aligning flex items along the main axis
+- Align-items: Aligning flex items along the cross axis 
+- Align-content: aligns multiple rows of flex items along the cross axis
+#### Flex Wrap 
+- by default items are placed on one line & content shrinks to fit
+- flex wrap allows items to run onto multiple lines
+
+### Grid
+Grid container, grid items, grid lines, grid tracks, grid cells 
+https://dev.to/ridoy_hasan/css-grid-a-deep-dive-55l7
+
+
+
+
+## ARIA - Connor
+
+ARIA arributes helps to make it more accessable and interactive on areas where it's not possible to do so in pure HTML, accessability like on users who only relies on a screen with no mouse.
+
+A role can be given to an element, to specify what type to give to it, like "progressbar", "toolbar".
+
+Properties and states can then be given to an element, to specify current values for it. Examples like:
+- has a checkbox has been checked
+- Setting current value and range to the progress bar
+- Whenever if a dropdown box is currently drop down.
+
+ARIA should only be used if absolute nessecary, if basic HTML do not have the support of such functionality. 

user-manuals/annaVW.md

@@ -1,27 +1,57 @@
 ---
-name: name--user-manual
+name: annaVW--user-manual
 about: Edit this user manual with your own details
-title: ''
+title: 'Anna VW's user manual'
 labels: ''
 assignees: ''
 
 ---
 
-# Name
-## Pronouns
+# My name is Anna vW
+## My pronouns are: (she/her)
 
 ### How I get my best work done:
+- My best work tends to originate from brainstorms. 
+- This is usually followed by a period of wandering to find a path (searching for info, getting lost, etc).
+- Then a period of intense focus.
+- Sometimes I take myself to a quiet corner/ put on noise-cancelling headphones to focus best. 
 
 ### The role I usually take in a team:
+- I'm good at bringing order to chaos, so tend to end up in a spokesperson or lead role. 
+- I do my best to facilitate group dynamics and ensure everyone is heard. 
+    - I strongly believe that the quietest people in a team are often holding the biggest gems of knowledge.  
+    - Highly recommend reading: [Quiet by Susan Cain](https://uk.bookshop.org/p/books/quiet-the-power-of-introverts-in-a-world-that-can-t-stop-talking-susan-cain/523028?ean=9780141029191) 
 
 ### My communication style:
+- Optimistic
+- I love debating ideas as I believe this enables us to get to better solutions and level up our skills most. I sometimes debate myself
 
 ### What I value:
+- Kindness
+- Community
+- Personal growth
 
 ### What people misunderstand about me:
+⛰️ That I'm willing to die on a hill when I express disagreement. ⛰️ I'm a very optimistic person, and this means that when I have an opinion on something - it can come across as unnaturally strong. 
+
+If you think I'm dying on a hill tell me! I'll slide down quickly! 🏂
 
 ### How I like to get my feedback:
+Frequently and often. 
+
+I love receiving constructive feedback as I strongly believe it helps me to learn faster + become a more rounded human. 
 
 ### Technical strengths & weaknesses:
+- I'm great at ideation, and turning ideans into a plan.
+- I'm comfortable with a high level of uncertainty. 
+- I sometimes skip over the basics when learning new concepts to tackle difficult problem.
+
 
 ### Interests (programming or otherwise!):
+* Growth Product Management
+* Data Analysis
+* UX design
+* Prompt engineering
+* Longboarding (think skateboard but longer) 
+* Singing (am part of a community choir)
+* 3D printing (learning how to design)

user-manuals/connor.md

@@ -7,21 +7,30 @@ assignees: ''
 
 ---
 
-# Name
+# Connor Rowland
 ## Pronouns
+he/him
 
 ### How I get my best work done:
+Trial and error with quick coding, seeing if it would work or not before improving and prettying it up.
 
 ### The role I usually take in a team:
+Helper/Supporter, solving any problems given.
 
 ### My communication style:
+Short informal words, more into visual/graphic communication style.
 
 ### What I value:
+Always trying to find a solution for every situation and scenarios no matter how difficult it is.
 
 ### What people misunderstand about me:
+Not wanting to talk, i just struggle to start a new discussion on it.
 
 ### How I like to get my feedback:
+Ideally in person with visuals to present.
 
 ### Technical strengths & weaknesses:
+Strength on almost anything coding related, weakness on english and wordings.
 
 ### Interests (programming or otherwise!):
+Coding as a hobby, trains, traveling and problem solving games.

user-manuals/davidW.md

@@ -8,12 +8,17 @@ assignees: ''
 ---
 
 # Name
+David
+
 ## Pronouns
+he/him is fine, and actually I don't mind anythiing else either :)
 
 ### How I get my best work done:
 
+
 ### The role I usually take in a team:
 
+
 ### My communication style:
 
 ### What I value: