###### tags: `Note Book` `CSS`
# CSS Notes
---

## Links
- [CSS CheetSheet](/EMgupQ4PTxuzNq4SBGsu7g)
- [CSS Box Model](/zzbzu0geThGrjTNJfpAtQw)
- [List of CSS Attributes](/87s1n75QSQiSEp8uK09v6w)
- [More styling with CSS](/z21pFrlSTSKtzf0z6LW1Kg)
- [Flexbox, Media Queries, and CSS Reset](/cMyw0vpoRFS__dZYM48F8A)
- [LESS](/fGzQTZXjQMOJRjW6k14Zvw)

## Playgrounds
- [Mixed CSS playgrounds BeeDev Helpers](https://helper.beedev-services.com/fundamentals/cssTools.html)

### BoxModel
- [Box Model](https://css-playground.com/view/53/box-model-introduction-playground)
- [CodePen Box Model](https://codepen.io/Ampix0/pen/oWXLeR)
- [CSS Diner](https://flukeout.github.io/)

### FlexBox
- [FlexBox Zombies - yes it's free](https://mastery.games/flexboxzombies/)
- [FlexBox Froggy](https://flexboxfroggy.com/)
- [Flexbox Defense](http://www.flexboxdefense.com/)
- [Code Pen Flex Playground](https://codepen.io/WolfsVeteran/pen/bGNzqQM)

### Grids
- [Grid Garden](https://cssgridgarden.com/)

## HTML & CSS
- [Smarter Way to Learn HTML & CSS](http://www.asmarterwaytolearn.com/htmlcss/h.html)
- [Self Learning Resources](https://thecodingsteps.tech/?page_id=2)

## CSS
- [CSS Tricks - Centering](https://css-tricks.com/centering-css-complete-guide/)

### Fonts
- [Archetype - Fonts](https://archetypeapp.com/#)
- [Font Awesome Cheatsheet](https://codepen.io/MarkBoots/full/YzqRKPw)

### Colors
- [HTML Color Names](http://www.html-color-names.com/)
- [w3schools - HTML Color Picker](https://www.w3schools.com/colors/colors_picker.asp)

### Backgrounds
- [Transparent Textures](https://www.transparenttextures.com/)

### Resets
- [CSS Reset](https://meyerweb.com/eric/tools/css/reset/)
- [CSS Reset Collection](https://perishablepress.com/a-killer-collection-of-global-css-reset-styles/)

### 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)
- [More FlexBox](https://semicolon.dev/tutorial/css/flex-tutorial)

### BootStrap
- [Bootstrap Cheat Sheet](https://hackerthemes.com/bootstrap-cheatsheet/)
- [Bootstrap](https://getbootstrap.com/docs/5.0/getting-started/introduction/)
- [Bootstrap Version](https://www.bootstrapcdn.com/)