feat: add extended CSS examples and update lesson imports

docs/css.md

@@ -0,0 +1,272 @@
+# CSS: Extended Examples
+
+## Selectors
+
+### HTML Tag Type
+```css
+p {
+  color: blue;
+}
+
+h1 {
+  font-size: 24px;
+}
+```
+
+### Class
+```css
+.btn {
+  background: red;
+  padding: 10px;
+}
+
+.text {
+  color: green;
+}
+```
+
+### ID
+```css
+#header {
+  width: 100%;
+  height: 60px;
+}
+
+#main {
+  margin: 20px;
+}
+```
+
+### Attribute
+```css
+[type="text"] {
+  border: 1px solid gray;
+}
+
+[href^="https"] {
+  color: blue;
+}
+
+[alt*="icon"] {
+  width: 16px;
+}
+```
+
+## Combinators
+
+### Child (>)
+```css
+div > p {
+  margin: 0;
+}
+
+ul > li {
+  list-style: none;
+}
+```
+
+### Descendant (space)
+```css
+nav a {
+  text-decoration: none;
+}
+
+div p {
+  font-size: 14px;
+}
+```
+
+### Next-Sibling (+)
+```css
+h1 + p {
+  margin-top: 0;
+}
+
+img + span {
+  margin-left: 10px;
+}
+```
+
+### Subsequent-Sibling (~)
+```css
+h2 ~ p {
+  color: gray;
+}
+
+input ~ label {
+  font-weight: bold;
+}
+```
+
+### Selector List (,)
+```css
+h1, h2, h3 {
+  font-family: Arial;
+}
+
+.btn, .link {
+  cursor: pointer;
+}
+```
+
+## Pseudo Classes
+
+### :hover
+```css
+a:hover {
+  color: red;
+}
+
+button:hover {
+  background: blue;
+}
+```
+
+### :active
+```css
+button:active {
+  transform: scale(0.95);
+}
+
+a:active {
+  color: purple;
+}
+```
+
+### :before
+```css
+h1:before {
+  content: "→ ";
+  color: red;
+}
+
+.icon:before {
+  content: "★";
+}
+```
+
+### :after
+```css
+a:after {
+  content: " ↗";
+  font-size: 12px;
+}
+
+p:after {
+  content: ".";
+}
+```
+
+### :first-child
+```css
+li:first-child {
+  font-weight: bold;
+}
+
+p:first-child {
+  margin-top: 0;
+}
+```
+
+### :last-child
+```css
+li:last-child {
+  border-bottom: none;
+}
+
+div:last-child {
+  margin-bottom: 0;
+}
+```
+
+### :nth-child()
+```css
+tr:nth-child(odd) {
+  background: #f0f0f0;
+}
+
+li:nth-child(3n) {
+  color: blue;
+}
+```
+
+## Shorthand Properties
+
+### margin
+```css
+/* Shorthand */
+.box {
+  margin: 20px;
+}
+
+/* Longhand */
+.box {
+  margin-top: 20px;
+  margin-right: 20px;
+  margin-bottom: 20px;
+  margin-left: 20px;
+}
+```
+
+### padding
+```css
+/* Shorthand */
+.container {
+  padding: 8px 12px;
+}
+
+/* Longhand */
+.container {
+  padding-top: 8px;
+  padding-right: 12px;
+  padding-bottom: 8px;
+  padding-left: 12px;
+}
+```
+
+### border
+```css
+/* Shorthand */
+.box {
+  border: 2px solid black;
+}
+
+/* Longhand */
+.box {
+  border-width: 2px;
+  border-style: solid;
+  border-color: black;
+}
+```
+
+### background
+```css
+/* Shorthand */
+.hero {
+  background: url(bg.jpg) center/cover no-repeat;
+}
+
+/* Longhand */
+.hero {
+  background-image: url(bg.jpg);
+  background-position: center;
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+```
+
+### font
+```css
+/* Shorthand */
+.title {
+    font: bold 24px/1.2 Arial, sans-serif;
+}
+
+/* Longhand */
+.title {
+    font-weight: bold;
+    font-size: 24px;
+    line-height: 1.2;
+    font-family: Arial, sans-serif;
+}
+```

src/config/lessons.js

@@ -3,24 +3,24 @@
  */
 
 // Import lesson configs
-import basicsConfig from "../../lessons/00-basics.json";
 import basicSelectorsConfig from "../../lessons/00-basic-selectors.json";
-import boxModelConfig from "../../lessons/01-box-model.json";
-import selectorsConfig from "../../lessons/02-selectors.json";
-import colorsConfig from "../../lessons/03-colors.json";
-import typographyConfig from "../../lessons/04-typography.json";
-import unitVariablesConfig from "../../lessons/05-units-variables.json";
-import transitionsAnimationsConfig from "../../lessons/06-transitions-animations.json";
-import layoutConfig from "../../lessons/07-layouts.json";
-import responsiveConfig from "../../lessons/08-responsive.json";
+// import basicsConfig from "../../lessons/00-basics.json";
+// import boxModelConfig from "../../lessons/01-box-model.json";
+// import selectorsConfig from "../../lessons/02-selectors.json";
+// import colorsConfig from "../../lessons/03-colors.json";
+// import typographyConfig from "../../lessons/04-typography.json";
+// import unitVariablesConfig from "../../lessons/05-units-variables.json";
+// import transitionsAnimationsConfig from "../../lessons/06-transitions-animations.json";
+// import layoutConfig from "../../lessons/07-layouts.json";
+// import responsiveConfig from "../../lessons/08-responsive.json";
 
 // Module store
 const moduleStore = [
 	// basicsConfig,
-	basicSelectorsConfig,
-	boxModelConfig,
-	selectorsConfig,
-	colorsConfig
+	basicSelectorsConfig
+	// boxModelConfig,
+	// selectorsConfig,
+	// colorsConfig
 	// typographyConfig,
 	// unitVariablesConfig,
 	// transitionsAnimationsConfig,