diff --git a/week_six/01-intro_challenge/index.html b/week_six/01-intro_challenge/index.html new file mode 100644 index 0000000..f76fb6b --- /dev/null +++ b/week_six/01-intro_challenge/index.html @@ -0,0 +1,68 @@ + + + + + + CSS Detective + + + + +
+

CSS Detective

+ +
+ +
+
+

Cards

+ +
+
+

Card One

+

Some text here.

+ + +
+ +
+

Card Two

+

Some text here.

+ + +
+
+
+ +
+

Form

+
+ + + + + +
+
+ +
+

List

+ +
+
+ + + diff --git a/week_six/01-intro_challenge/main.css b/week_six/01-intro_challenge/main.css new file mode 100644 index 0000000..a9b6261 --- /dev/null +++ b/week_six/01-intro_challenge/main.css @@ -0,0 +1,13 @@ +/* Warm Up Challenges + +1: Target only the last item in the list and make it stand out. + +2: Style links differently when hovered and when focused (keyboard). + +3: Style all buttons except the “primary” button. + + (Bonus): Add spacing between all items in .stack except the first. + +*/ + + diff --git a/week_six/02-modern_css_selectors/index.html b/week_six/02-modern_css_selectors/index.html new file mode 100644 index 0000000..0a6a9df --- /dev/null +++ b/week_six/02-modern_css_selectors/index.html @@ -0,0 +1,32 @@ + + + + + Modern CSS Selectors – Pure Demo + + + + + + +

Modern CSS Selectors

+ + + +
+

Plain Section

+

This section has no button.

+
+ +
+

Interactive Section

+

This section contains a button.

+ +
+ + + \ No newline at end of file diff --git a/week_six/02-modern_css_selectors/styles.css b/week_six/02-modern_css_selectors/styles.css new file mode 100644 index 0000000..26d1007 --- /dev/null +++ b/week_six/02-modern_css_selectors/styles.css @@ -0,0 +1,18 @@ +body { + font-family: system-ui, sans-serif; + padding: 2rem; + background: #f6f6f6; + } + + nav { + display: flex; + gap: 1.5rem; + } + + section { + background: white; + padding: 1rem; + margin-top: 1.5rem; + border-radius: 6px; + border: 1px solid #ddd; + } diff --git a/week_six/03-CSS variables/index.html b/week_six/03-CSS variables/index.html new file mode 100644 index 0000000..0a6a9df --- /dev/null +++ b/week_six/03-CSS variables/index.html @@ -0,0 +1,32 @@ + + + + + Modern CSS Selectors – Pure Demo + + + + + + +

Modern CSS Selectors

+ + + +
+

Plain Section

+

This section has no button.

+
+ +
+

Interactive Section

+

This section contains a button.

+ +
+ + + \ No newline at end of file diff --git a/week_six/03-CSS variables/styles.css b/week_six/03-CSS variables/styles.css new file mode 100644 index 0000000..a60a236 --- /dev/null +++ b/week_six/03-CSS variables/styles.css @@ -0,0 +1,44 @@ + + +body { + font-family: system-ui, sans-serif; + padding: 2rem; + background:/*add color here */ +} + +nav { + display: flex; + gap: 1.5rem; +} + +section { + background: + padding: 1rem; + margin-top: 1.5rem; + border-radius: 6px; + border: 1px solid /*add color here */ +} + +/* Grouping with :is() */ +:is(h1, h2, p) { + margin-bottom: 0.5rem; +} + +/* Exclusion with :not() */ +nav a:not(.highlight) { + color: /*add color here */ + text-decoration: none; +} + +/* Accessible focus */ +a:focus-visible, +button:focus-visible { + outline: 3px solid /*add color here */ + outline-offset: 2px; +} + +/* Parent selection with :has() */ +section:has(button) { + border-left: 6px solid /*add color here */ + padding-left: 1rem; +} \ No newline at end of file diff --git a/week_six/04-reusable-patterns/index.html b/week_six/04-reusable-patterns/index.html new file mode 100644 index 0000000..8b51bd8 --- /dev/null +++ b/week_six/04-reusable-patterns/index.html @@ -0,0 +1,56 @@ + + + + + Reusable CSS Components Demo + + + + + + +

Reusable CSS Components: Before & After

+ +
+

❌ Without Reusable Components (Repetition)

+

+ Each button has its own class, even though the styles are almost identical. + Changes require editing multiple rules. +

+ +
+ + +
+ +
+ + +
+
+ + +
+

✅ With Reusable Components

+

+ Shared styles live in a base class, and variants control appearance. + New buttons require no new CSS. +

+ +
+ + +
+ +
+ + +
+
+ + + + + diff --git a/week_six/04-reusable-patterns/styles.css b/week_six/04-reusable-patterns/styles.css new file mode 100644 index 0000000..b5d1a08 --- /dev/null +++ b/week_six/04-reusable-patterns/styles.css @@ -0,0 +1,70 @@ + /* ======================== + Base Page Styles + ======================== */ + body { + font-family: system-ui, sans-serif; + background: #f6f6f6; + padding: 2rem; + } + + h1 { + margin-bottom: 1rem; + } + + h2 { + margin-top: 2rem; + margin-bottom: 0.5rem; + } + + section { + background: white; + padding: 1.5rem; + border-radius: 6px; + border: 1px solid #ddd; + margin-bottom: 2rem; + } + + .demo-row { + display: flex; + gap: 1rem; + margin-top: 1rem; + } + + /* ======================== + ❌ WITHOUT REUSABLE COMPONENTS + ======================== */ + + .login-btn { + padding: 0.75rem 1.25rem; + border-radius: 4px; + font-weight: 600; + border: none; + background-color: navy; + color: white; + } + + .signup-btn { + padding: 0.75rem 1.25rem; + border-radius: 4px; + font-weight: 600; + border: none; + background-color: navy; + color: white; + } + + .learn-btn { + padding: 0.75rem 1.25rem; + border-radius: 4px; + font-weight: 600; + border: none; + background-color: lightgray; + } + + .details-btn { + padding: 0.75rem 1.25rem; + border-radius: 4px; + font-weight: 600; + border: none; + background-color: lightgray; + } + diff --git a/week_six/05-put-it-together/index.html b/week_six/05-put-it-together/index.html new file mode 100644 index 0000000..7beb004 --- /dev/null +++ b/week_six/05-put-it-together/index.html @@ -0,0 +1,41 @@ + + + + + Simple CSS System Demo + + + + + + +
+

CSS Components Demo

+ +
+ +
+
+

Card One

+

This card has a primary button.

+ +
+ +
+

Card Two

+

This card only has secondary buttons.

+ +
+ +
+

Card Three

+

All cards reuse the same component styles.

+ +
+
+ + + diff --git a/week_six/05-put-it-together/styles.css b/week_six/05-put-it-together/styles.css new file mode 100644 index 0000000..0d85e49 --- /dev/null +++ b/week_six/05-put-it-together/styles.css @@ -0,0 +1,33 @@ + + /* ========================= + 1) CSS VARIABLES + ========================== */ + + + /* ========================= + 2) BASE STYLES + ========================== */ + body { + font-family: system-ui, sans-serif; + background: var(--background-color); + padding: 2rem; + } + + h1, h2, p { + margin: 0 0 0.5rem; + } + + /* ========================= + 3) LAYOUT + ========================== */ + + /* ========================= + 4) COMPONENTS + ========================== */ + + + /* ========================= + 5) MODERN SELECTORS + ========================== */ + + \ No newline at end of file