CSS Cheatsheet - Animations

Learn by doing!
On a frontend development journey I have created a cheat-sheet for each topic relating to styling CSS. This project focuses on CSS animations.

Mission

As a frontend developer, I want to quickly and easily reference CSS elements or values when working on a project.

Requirements

• Web Browser

Technologies

• HTML
• CSS

Resources

• Font Awesome
• Google fonts

Software Applications

• VS Code
• CodePen
• Git & Github Desktop
• OpenOffice

Project Plan

1. Setup
   
   1. Github repo and licence
   2. Create README and CONTRIBUTORS
   3. Create INDEX and STYLES
2. Content
   
   1. Gather content
   2. Organise text content
   3. Create page map
3. Design
   
   1. Wireframe
   2. Mockup design
   3. Colour scheme
   4. Fonts and Icons
   5. Prototype
4. Build
   
   1. HTML skeleton
   2. Header
   3. Navigation
   4. Sections and Subsections
   5. Figures and Media
   6. Aside
   7. Footer
5. Styling
   
   1. Page Layout
   2. Sections
   3. Backgrounds
   4. Text and Fonts
   5. Icons and Media
   6. Colours and light/dark modes
   7. Responsivesness
   8. Accessibility
   9. Print view
6. Testing
   
   1. Clean HTML
   2. Clean CSS
   3. Different viewport sizes
   4. Different browsers
   5. Broken link check

Contributors

Mary Ronan - MazOnTheMoon

See contributors

Related Projects

Cascade & Inheritance
Box Model
Units & Values
Selectors
Display & Positioning
Flexbox
Grid
Backgrounds
Text & Fonts
Lists & Links
Images
Transitions & Transforms

License

This project is licensed under Unlicense - see the LICENSE.md file for details

Acknowledgments

We would like to offer our appreciation to Spotify and the The Last of Us Game soundtrack for providing the suitable background noise for this project