Skip to content

Latest commit

 

History

History
51 lines (45 loc) · 2.11 KB

notes.md

File metadata and controls

51 lines (45 loc) · 2.11 KB
Raw

notes

  1. backface-visibility property
  2. BEM methodology
  3. coverr.co for cover videos
  4. object-fit property
  5. clip path
  6. box-decoration-break: clone;
  7. solid-color-gradient linear gradient with 2 color stops at same %
  8. general sibling ~
  9. adjascent sibling +
  10. -webkit-input-placeholder
  11. :placeholder-shown
  12. in order to use position absolute parent element must be have position defined.
  13. column-* properties: column-gap, column-rule, column-count;
  14. hyphens needs document language to defined.
  15. autoprefixer for browser support.
  16. display:none doesn't supports animation.
    use opacity: 0; visibility: hidden; instead.
  17. target pseudo class gets attached to the element of window.location.href.
  18. min-width: mobile first & max-width: desktop first.
  19. for specificity purposes we write media queries at last.
  20. order of media queries matters a lot.
  21. ORDER: base + typography > general layout + grid > page layout > components.
  22. way to prevent overflow on parent element when a modal or popup is open.
  23. how to merge branches on github.
  24. responsive images
  • srcset 1x, 2x density descriptors.
  1. @supports queries and graceful degradation.
  2. minification / compression creates great impact on file size.
  3. gtmetrix for website performance tests.

flexbox - trillo project

  1. justify-content - main-axis.
  2. align-items - cross axis - default is stretch.
  3. align-content - only applies when there are more than 1 rows.
  4. default order is zero.
  5. default flex-shrink: 1 hence element is allowed to shrink.
  6. flex containers can be nested.
  7. sprite svg.
  8. currentColor value is like inherit.
  9. z-index only works with position specified.
  10. last-child selects last child of container.
  11. last-of-type selects the same type element.
  12. media queries should be written in ems and not in rems.

Grid layout - Nexter project

  1. we can use line names in repeat function, like this, repeat(3, [col-start] 1fr [col-end] ) which will create col-start 1 to col-start 3 same with col-end.