###### tags: `Student List` `Web Fundamentals` `Note Book`
# Student Web Fundamentals Resource List
---

## General Links
---
- [General Links Resource List](/6Q8kmi0XRf2QQ0Mes3cuvA)
- [VS Code Shortcuts](https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf)

## Recommended VS Code Extentions
- [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)
- [Prettier - Code Formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
- [indent-rainbow](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow)
- [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)
- [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare)
- [Code Runner](https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner)
- [JavaScript (ES6) code snippets](https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets)

## Online IDE's or helpers
- [Python Tutor - JS](https://pythontutor.com/javascript.html#mode=edit)
- [Replit](https://replit.com/)
- [CodePen - HTML](https://codepen.io/your-work)
- [HTML Editor](https://html-online.com/editor/)
- [JS Bin](https://jsbin.com/?html,output)

## HTML
---

## CSS
---
- [CSS Cheatsheet](https://web.dev/learn/css/)

### CSS Notes
- [CSS Box Model](/zzbzu0geThGrjTNJfpAtQw)
- [List of CSS Attributes](/87s1n75QSQiSEp8uK09v6w)
- [CSS CheetSheet](/EMgupQ4PTxuzNq4SBGsu7g)

### Box Model
- [w3Schools - Box Model](https://www.w3schools.com/css/css_boxmodel.asp)
- [MDN - Box Model](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model)
- [CSS Tricks - Box Model](https://css-tricks.com/the-css-box-model/)

### FlexBox
- [CSS Tricks - Complete Guide to FlexBox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
- [MDN - FlexBox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox)
- [MDN - FlexBox Explained](https://www.freecodecamp.org/news/an-animated-guide-to-flexbox-d280cf6afc35/)
- [FlexBox Visual](https://jonitrythall.com/flexbox-cheatsheet)

### CSS Playgrounds
- [Grid Garden](https://cssgridgarden.com/)
- [FlexBox Zombies - yes it's free](https://mastery.games/flexboxzombies/)
- [FlexBox Froggy](https://flexboxfroggy.com/)
- [Box Model](https://css-playground.com/view/53/box-model-introduction-playground)
- [CodePen Box Model](https://codepen.io/Ampix0/pen/oWXLeR)
- [CSS PlayGround](https://css-playground.com/)
- [CSS Diner](https://flukeout.github.io/)
- [Flexbox Defense](http://www.flexboxdefense.com/)
- [Code Pen Flex Playground](https://codepen.io/WolfsVeteran/pen/bGNzqQM)

## JS
---

## Algorithms
---

## Extra's
-