add css and react docs

README.md

@@ -1,4 +1,3 @@
-# Readme.md
+# About
 
-- fold all: `Ctrl + K + 0`
-- unfold all: `Ctrl + K + J`
+Here I store crucial info to prepare to the interview for both, a candidate and interviewer.

css/CSS.css

@@ -0,0 +1,141 @@
+/*
+  - ABCD, priority rules
+  - preprocessors (Sass, Less)
+  - frameworks (Bootstrap, Material)
+  - BEM (block__element--modifier)
+  - flex vs grid
+  - units (px, em, rem, %)
+*/
+
+/* Flexbox (1-dimensional layout system) */
+.flex-container {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+
+  /* horizontal alignment (flex-start, flex-end, center, space-around, space-between) */
+  justify-content: center;
+  /* vertical alignment (flex-start, flex-end, center, baseline, stretch) */
+  align-items: center;
+
+  .flex-item {
+    order: 1;
+    /*  flex: [grow] [shrink] [basis], default: 0 1 auto */
+    flex: 1 1 100px;
+    /*  distribute extra space, default: 0 */
+    flex-grow: 1;
+    /*  defines how box shrinks, default: 1 */
+    flex-shrink: 3;
+    /*  min width */
+    flex-basis: 100px;
+    /*  will overwrite vertical align-items (flex-start, flex-end, center) */
+    align-self: flex-start;
+  }
+}
+
+/* Grid (2-dimensional layout system) */
+.grid-container {
+  /* grid | inline-grid */
+  display: grid;
+  /* 3 cols, divide remaining space evenly */
+  grid-template-columns: 100px auto 20%;
+  /* 2 rows, divide remaining space evenly */
+  grid-template-rows: auto auto;
+
+  /* center, start, end, space-evenly, space-around */
+  justify-content: center;
+  /* center, start, end, space-evenly, space-around, space-between */
+  align-content: center;
+
+  grid-row-gap: 200px;
+  grid-column-gap: 150px;
+  grid-gap: 200px 150px; /* row col */
+
+  .grid-item {
+    /* row-start / col-start / row-end / col-end */
+    grid-area: 2 / 1 / span 2 / span 3;
+    /* grid-column-start / grid-column-end, == (1 / span 2) */
+    grid-column: 1 / 3;
+    /* grid-row-start / grid-row-end, == (1 / span 2) */
+    grid-row: 2 / 3;
+  }
+}
+
+/* responsive design - media query*/
+@media only screen and (max-width: 800px) {
+}
+
+/* keyframe, transition, animations */
+@keyframes bounce {
+}
+.keyframe {
+  animation: bounce 2s infinite;
+}
+
+/* overflow: hidden */
+
+* {
+  box-sizing: border-box;
+}
+
+#display {
+  display: block;
+  display: inline;
+  display: inline-block;
+
+  display: table;
+  display: flex;
+  display: grid;
+
+  display: contents;
+  display: none;
+}
+
+#position {
+  position: static;
+  position: relative;
+  position: absolute;
+  position: fixed;
+  position: sticky;
+}
+
+/* Selectors */
+div.p
+  div p
+  div, p
+  div > p
+  div + p
+  div ~ p
+  [attr=value]
+  a:hover
+  a::before, a::after
+
+/* How to center an element? */
+.center-block {
+  text-align: center;
+  margin: o auto;
+}
+
+.center-flex {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* How to style React, what approach you know?
+  - global BEM
+  - Styled Components
+  - CSS Modules
+  - Inline styles
+*/
+
+/* box-sizing: content-box | padding-box | border-box */
+html {
+  box-sizing: border-box;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}