Home

Awesome

Learning CSS / CSS3

Just one of the things I'm learning. https://github.com/hchiam/learning

There's a lot of notes here! Intended use: Ctrl+F to help myself recall things. Or run a bookmarklet to randomly choose something on this page to review: https://github.com/hchiam/learning-js/blob/main/bookmarklets/random-css-tip-from-github-readme.js#L1

https://github.com/hchiam/learning-sass

https://css-tricks.com

https://codepen.io/hchiam

https://app.memrise.com/course/700033/learn-css

https://css-for-js.dev

Miscellaneous notes

(Make VSCode ignore auto-formatting with prettier.setting > Prettier: Require Config. Or just temporarily turn off formatting on save: editor.formatOnSave.)

GUI challenges playlist with Adam Argyle

https://youtube.com/playlist?list=PLNYkxOF6rcIAaV1wwI9540OC_3XoIzMjQ

more recent CodePen experiments and notes made during/after taking CSS in JS course:

extra flexbox notes

extra CSS grid notes

other stuff

@keyframes rise-from-offscreen {
  from {
    transform: translateY(calc(100% + var(--spacing)));
  }
  to {
    transform: translateY(0);
  }
}
.help-circle {
  --spacing: 32px;
  animation: rise-from-offscreen 1s both infinite;
  animation-delay: 1s;
  position: fixed;
  bottom: var(--spacing);
  right: var(--spacing);
}