mazonthemoon/css_cheatsheet_animations

Learn by Doing! On my journey of FrontEnd Development I've created cheat-sheets for the different topics and this one is for CSS animations.

css_cheatsheet_animations's Issues

style_section_backgrounds

Alignment of sections completed in grey-scale. Add backgrounds/colour and borders to improve legibility

Add text content to sections in main

Content provided in "content.odt" in assets folder. All text content prepared to be copied into document. Note the code keywords should be set using a span (see SNIPPETS for the span to copy/paste)

Content layout styling

Page blocks to be created and positioned for accessibility.

content-section-styling

Main page layout has been completed.Styling for code snippets and code examples sections next to be done. Each code snippet is already in INDEX.html with id, need to create css rules to show these code snippets in action

style_responsive_layout

Set breakpoints for tablet, laptop and monitor views with layout resize as applicable for each (refer to wireframe in figma - link in SNIPPETS)

style_media

Add CSS3 icon to header with simple animation and test any external links for media/icons

style-text

Style text for readability, legibility and contrast

testing

Refer to README for list of tests

style-print

Create media query for print view to include:

• reset colours suitable for print
• remove any unneeded elements
• Change font to be print-friendly
• Add external links

style-dark-light-colour-mode

Add colour variables for light mode and dark mode based on browser preference and do final check for sufficient contrast

style-a11y

Add aria-roles where required and test accessibility on different screen sizes and preferences for colour mode and animations