diff --git a/Week 1.1 - HTML/1. Build a Form/index.html b/Week 1.1 - HTML/1. Build a Form/index.html index 50432a8b..f5ea9f65 100644 --- a/Week 1.1 - HTML/1. Build a Form/index.html +++ b/Week 1.1 - HTML/1. Build a Form/index.html @@ -4,10 +4,84 @@ Build a Form + - - +
+

Login

+
+
+ + + Enter a valid email address. +
+ +
+ + +
+ + +
+
+ \ No newline at end of file diff --git a/Week 1.1 - HTML/2. Create a Responsive Image - Resolution/index.html b/Week 1.1 - HTML/2. Create a Responsive Image - Resolution/index.html index a132ac2a..e15bbba9 100644 --- a/Week 1.1 - HTML/2. Create a Responsive Image - Resolution/index.html +++ b/Week 1.1 - HTML/2. Create a Responsive Image - Resolution/index.html @@ -1,30 +1,43 @@ + - - - Create a Responsive Image - Resolution - - + + + Create a Responsive Image - Resolution + + + - - + +

Responsive Image

+ + + + + + Responsive Image + + + \ No newline at end of file diff --git a/Week 1.1 - HTML/3. Create a Reponsive Image - Aspect Ratio/index.html b/Week 1.1 - HTML/3. Create a Reponsive Image - Aspect Ratio/index.html index d8bb518c..a19010b2 100644 --- a/Week 1.1 - HTML/3. Create a Reponsive Image - Aspect Ratio/index.html +++ b/Week 1.1 - HTML/3. Create a Reponsive Image - Aspect Ratio/index.html @@ -24,7 +24,14 @@ - +
+

Responsive Image with Aspect Ratio

+ + + + Responsive Image + +
\ No newline at end of file diff --git a/Week 1.1 - HTML/4. Mock Up a Design/index.html b/Week 1.1 - HTML/4. Mock Up a Design/index.html index a7252a6f..00e0201c 100644 --- a/Week 1.1 - HTML/4. Mock Up a Design/index.html +++ b/Week 1.1 - HTML/4. Mock Up a Design/index.html @@ -4,10 +4,79 @@ Mock Up a Design + + - +
+
+

Phase 4:

+

Destination Thrive

+

Objective: Create Omni-Channel Synergy

+

+ This is the time to fully leverage your hard work and thrive. During this phase, attention should be given to + creating omni-channel synergy—syncing your messaging and channels from top to bottom. Scale high-performing + channels and fully harvest the demand your top-of-funnel awareness campaigns have been creating. Use insights + gained from your contact lists, data, and web analytics to prospect and build lookalike audiences for incremental growth. +

+
+
+
+

KEY FOCUS:

+ + +
+

TIME

+ +
+

aprox. 24 months and beyond

+
+
+ \ No newline at end of file diff --git a/Week 1.2 - CSS/1. Selectors - Attributes/index.html b/Week 1.2 - CSS/1. Selectors - Attributes/index.html index 3d9c05b8..a5c9f90c 100644 --- a/Week 1.2 - CSS/1. Selectors - Attributes/index.html +++ b/Week 1.2 - CSS/1. Selectors - Attributes/index.html @@ -1,26 +1,26 @@ - - - - Selectors - Attributes - - - - + + + + Selectors - Attributes + + + - - - - - - - - - - - - \ No newline at end of file + + + + + + + + + + + diff --git a/Week 1.2 - CSS/2. Selectors - Children/index.html b/Week 1.2 - CSS/2. Selectors - Children/index.html index 7ff366db..270dcae6 100644 --- a/Week 1.2 - CSS/2. Selectors - Children/index.html +++ b/Week 1.2 - CSS/2. Selectors - Children/index.html @@ -1,40 +1,40 @@ - - - - Selectors - Children - - - - + + + + Selectors - Children + + + - - - - \ No newline at end of file + + + diff --git a/Week 1.2 - CSS/3. Selectors - Siblings/index.html b/Week 1.2 - CSS/3. Selectors - Siblings/index.html index b6086a75..08c79dd4 100644 --- a/Week 1.2 - CSS/3. Selectors - Siblings/index.html +++ b/Week 1.2 - CSS/3. Selectors - Siblings/index.html @@ -1,40 +1,66 @@ - - - - Selectors - Siblings + + + + Selectors - Siblings - - - - - + + + + -
-

Lorem Ipsum Dolor Sit Amet

-

Do you have any idea how long it takes those cups to decompose. I gave it a cold? I gave it a virus. A computer virus. Must go faster... go, go, go, go, go! What do they got in there? King Kong? They're using our own satellites against us. And the clock is ticking.

-

You're a very talented young man, with your own clever thoughts and ideas. Do you need a manager? Hey, take a look at the earthlings. Goodbye! Checkmate... We gotta burn the rain forest, dump toxic waste, pollute the air, and rip up the OZONE! 'Cause maybe if we screw up this planet enough, they won't want it anymore!

-

Remember Independence Day?

-

Life finds a way. Do you have any idea how long it takes those cups to decompose. You're a very talented young man, with your own clever thoughts and ideas. Do you need a manager? Do you have any idea how long it takes those cups to decompose. Jaguar shark! So tell me - does it really exist?

-

Jurassic Park Still Holds Up

- Something really small like a subtitle or something... -

God creates dinosaurs. God destroys dinosaurs. God creates Man. Man destroys God. Man creates Dinosaurs. This thing comes fully loaded. AM/FM radio, reclining bucket seats, and... power windows. Just my luck, no ice. Jaguar shark! So tell me - does it really exist?

-

The Fly Does Too

-

Yes, Yes, without the oops! My dad once told me, laugh and the world laughs with you, Cry, and I'll give you something to cry about you little bastard! I was part of something special. Yeah, but your scientists were so preoccupied with whether or not they could, they didn't stop to think if they should.

-
- - - \ No newline at end of file +
+

Lorem Ipsum Dolor Sit Amet

+

+ Do you have any idea how long it takes those cups to decompose. I gave + it a cold? I gave it a virus. A computer virus. Must go faster... go, + go, go, go, go! What do they got in there? King Kong? They're using our + own satellites against us. And the clock is ticking. +

+

+ You're a very talented young man, with your own clever thoughts and + ideas. Do you need a manager? Hey, take a look at the earthlings. + Goodbye! Checkmate... We gotta burn the rain forest, dump toxic waste, + pollute the air, and rip up the OZONE! 'Cause maybe if we screw up this + planet enough, they won't want it anymore! +

+

Remember Independence Day?

+

+ Life finds a way. Do you have any idea how long it takes those cups to + decompose. You're a very talented young man, with your own clever + thoughts and ideas. Do you need a manager? Do you have any idea how long + it takes those cups to decompose. Jaguar shark! So tell me - does it + really exist? +

+

Jurassic Park Still Holds Up

+ Something really small like a subtitle or something... +

+ God creates dinosaurs. God destroys dinosaurs. God creates Man. Man + destroys God. Man creates Dinosaurs. This thing comes fully loaded. + AM/FM radio, reclining bucket seats, and... power windows. Just my luck, + no ice. Jaguar shark! So tell me - does it really exist? +

+

The Fly Does Too

+

+ Yes, Yes, without the oops! My dad once told me, laugh and the world + laughs with you, Cry, and I'll give you something to cry about you + little bastard! I was part of something special. Yeah, but your + scientists were so preoccupied with whether or not they could, they + didn't stop to think if they should. +

+
+ + diff --git a/Week 1.2 - CSS/4. Inheritance and Systems/index.html b/Week 1.2 - CSS/4. Inheritance and Systems/index.html index e1c5e441..d6bca414 100644 --- a/Week 1.2 - CSS/4. Inheritance and Systems/index.html +++ b/Week 1.2 - CSS/4. Inheritance and Systems/index.html @@ -1,21 +1,49 @@ - - - - Inheritance and Systems - - - - + + + + Inheritance and Systems + + + + + + + + + + + diff --git a/Week 1.2 - CSS/5. Transitions/index.html b/Week 1.2 - CSS/5. Transitions/index.html index 4fa3bd71..9e80e812 100644 --- a/Week 1.2 - CSS/5. Transitions/index.html +++ b/Week 1.2 - CSS/5. Transitions/index.html @@ -1,31 +1,33 @@ - - - - Transitions + + + + Transitions - - - - - + + + +
+ + diff --git a/Week 1.2 - CSS/6. Tricks - Click Passthrough/index.html b/Week 1.2 - CSS/6. Tricks - Click Passthrough/index.html index 769c1a18..c6d86435 100644 --- a/Week 1.2 - CSS/6. Tricks - Click Passthrough/index.html +++ b/Week 1.2 - CSS/6. Tricks - Click Passthrough/index.html @@ -1,43 +1,45 @@ - - - - Tricks - Click Passthrough + + + + Tricks - Click Passthrough - - - + .container img { + display: block; + width: 100%; + height: auto; + } + + + + - - -
- - A placeholder image - -
-
- - - \ No newline at end of file +
+ + A placeholder image + +
+
+ + diff --git a/Week 1.3 - JavaScript/1. Filter/index.html b/Week 1.3 - JavaScript/1. Filter/index.html index e74982a2..661f7fce 100644 --- a/Week 1.3 - JavaScript/1. Filter/index.html +++ b/Week 1.3 - JavaScript/1. Filter/index.html @@ -1,24 +1,17 @@ - - - - Filter - - - - - - - \ No newline at end of file + console.log(endingArray); + + + diff --git a/Week 1.3 - JavaScript/2. Map/index.html b/Week 1.3 - JavaScript/2. Map/index.html index 72fa39ee..74779ded 100644 --- a/Week 1.3 - JavaScript/2. Map/index.html +++ b/Week 1.3 - JavaScript/2. Map/index.html @@ -1,24 +1,17 @@ - - - - Map - - - - - - - \ No newline at end of file + console.log(endingArray); + + + diff --git a/Week 1.3 - JavaScript/3. Objects as a Map/index.html b/Week 1.3 - JavaScript/3. Objects as a Map/index.html index 3004949a..3cf20e78 100644 --- a/Week 1.3 - JavaScript/3. Objects as a Map/index.html +++ b/Week 1.3 - JavaScript/3. Objects as a Map/index.html @@ -1,33 +1,24 @@ - - - - Objects as a Map - - - - - - - \ No newline at end of file + return infoMap[key] || "Error: Invalid option selected..."; + } + + + diff --git a/Week 1.3 - JavaScript/4. Event Listeners/index.html b/Week 1.3 - JavaScript/4. Event Listeners/index.html index d284e48f..1bbc39bf 100644 --- a/Week 1.3 - JavaScript/4. Event Listeners/index.html +++ b/Week 1.3 - JavaScript/4. Event Listeners/index.html @@ -1,26 +1,30 @@ - - - - Event Listeners - - - -

0

- - - + function increment() { + counter++; + counterEl.innerText = counter; + } - - \ No newline at end of file + // Add event listener to the button + buttonEl.addEventListener("click", increment); + + // Add your code here to make clicking the button run the increment function + + + diff --git a/Week 1.3 - JavaScript/5. DOM Manipulation/index.html b/Week 1.3 - JavaScript/5. DOM Manipulation/index.html index ba0e04f2..dc35de5f 100644 --- a/Week 1.3 - JavaScript/5. DOM Manipulation/index.html +++ b/Week 1.3 - JavaScript/5. DOM Manipulation/index.html @@ -1,30 +1,40 @@ - - - - DOM Manipulation - - - - + + + + DOM Manipulation + + + -
-

Lorem Ipsum Dolor Sit Amet

-
-

More Jeff Goldblum

-

Must go faster. Yeah, but John, if The Pirates of the Caribbean breaks down, the pirates don’t eat the tourists. You really think you can fly that thing? Checkmate... Life finds a way. Yes, Yes, without the oops! Yeah, but your scientists were so preoccupied with whether or not they could, they didn't stop to think if they should.

-
-
+
+

Lorem Ipsum Dolor Sit Amet

+
+

More Jeff Goldblum

+

+ Must go faster. Yeah, but John, if The Pirates of the Caribbean breaks + down, the pirates don’t eat the tourists. You really think you can fly + that thing? Checkmate... Life finds a way. Yes, Yes, without the oops! + Yeah, but your scientists were so preoccupied with whether or not they + could, they didn't stop to think if they should. +

+
+
- + + + diff --git a/Week 1.3 - JavaScript/Data Fetching/index.html b/Week 1.3 - JavaScript/Data Fetching/index.html index c1da8137..bffa3a7b 100644 --- a/Week 1.3 - JavaScript/Data Fetching/index.html +++ b/Week 1.3 - JavaScript/Data Fetching/index.html @@ -1,17 +1,32 @@ - - - - Data Fetching - - - - - - + + + + Data Fetching + + + - - \ No newline at end of file + + + diff --git a/Week 2.1 - CSS Grid/1. Responsive Grids/index.html b/Week 2.1 - CSS Grid/1. Responsive Grids/index.html index 2d612e63..ac6305a3 100644 --- a/Week 2.1 - CSS Grid/1. Responsive Grids/index.html +++ b/Week 2.1 - CSS Grid/1. Responsive Grids/index.html @@ -1,87 +1,120 @@ - - - - Responsive Grid + + + + Responsive Grid - - - + .cards { + gap: 16px; + margin: 0 auto; + padding: 0 20px; + max-width: 1200px; + } + + + + - - -
-
- placeholder -

Lorem Ipsum Dolor

-

Forget the fat lady! You're obsessed with the fat lady! Drive us out of here! Is this my espresso machine? Wh-what is-h-how did you get my espresso machine? I was part of something special. Eventually, you do plan to have dinosaurs on your dinosaur tour, right?

- Read More -
-
- placeholder -

Lorem Ipsum Dolor

-

Forget the fat lady! You're obsessed with the fat lady! Drive us out of here! Is this my espresso machine? Wh-what is-h-how did you get my espresso machine? I was part of something special.

- Read More -
-
- placeholder -

Lorem Ipsum Dolor

-

Forget the fat lady! You're obsessed with the fat lady! Drive us out of here! Is this my espresso machine? Wh-what is-h-how did you get my espresso machine?

- Read More -
-
- placeholder -

Lorem Ipsum Dolor

-

Forget the fat lady! You're obsessed with the fat lady! Drive us out of here! Is this my espresso machine?

- Read More -
-
- placeholder -

Lorem Ipsum Dolor

-

Forget the fat lady! You're obsessed with the fat lady! Drive us out of here! Is this my espresso machine?

- Read More -
-
- placeholder -

Lorem Ipsum Dolor

-

Forget the fat lady! You're obsessed with the fat lady! Drive us out of here! Is this my espresso machine? Wh-what is-h-how did you get my espresso machine?

- Read More -
-
- placeholder -

Lorem Ipsum Dolor

-

Forget the fat lady! You're obsessed with the fat lady! Drive us out of here! Is this my espresso machine? Wh-what is-h-how did you get my espresso machine? I was part of something special.

- Read More -
-
- placeholder -

Lorem Ipsum Dolor

-

Forget the fat lady! You're obsessed with the fat lady! Drive us out of here! Is this my espresso machine? Wh-what is-h-how did you get my espresso machine? I was part of something special. Eventually, you do plan to have dinosaurs on your dinosaur tour, right?

- Read More -
-
- - - \ No newline at end of file +
+
+ placeholder +

Lorem Ipsum Dolor

+

+ Forget the fat lady! You're obsessed with the fat lady! Drive us out + of here! Is this my espresso machine? Wh-what is-h-how did you get my + espresso machine? I was part of something special. Eventually, you do + plan to have dinosaurs on your dinosaur tour, right? +

+ Read More +
+
+ placeholder +

Lorem Ipsum Dolor

+

+ Forget the fat lady! You're obsessed with the fat lady! Drive us out + of here! Is this my espresso machine? Wh-what is-h-how did you get my + espresso machine? I was part of something special. +

+ Read More +
+
+ placeholder +

Lorem Ipsum Dolor

+

+ Forget the fat lady! You're obsessed with the fat lady! Drive us out + of here! Is this my espresso machine? Wh-what is-h-how did you get my + espresso machine? +

+ Read More +
+
+ placeholder +

Lorem Ipsum Dolor

+

+ Forget the fat lady! You're obsessed with the fat lady! Drive us out + of here! Is this my espresso machine? +

+ Read More +
+
+ placeholder +

Lorem Ipsum Dolor

+

+ Forget the fat lady! You're obsessed with the fat lady! Drive us out + of here! Is this my espresso machine? +

+ Read More +
+
+ placeholder +

Lorem Ipsum Dolor

+

+ Forget the fat lady! You're obsessed with the fat lady! Drive us out + of here! Is this my espresso machine? Wh-what is-h-how did you get my + espresso machine? +

+ Read More +
+
+ placeholder +

Lorem Ipsum Dolor

+

+ Forget the fat lady! You're obsessed with the fat lady! Drive us out + of here! Is this my espresso machine? Wh-what is-h-how did you get my + espresso machine? I was part of something special. +

+ Read More +
+
+ placeholder +

Lorem Ipsum Dolor

+

+ Forget the fat lady! You're obsessed with the fat lady! Drive us out + of here! Is this my espresso machine? Wh-what is-h-how did you get my + espresso machine? I was part of something special. Eventually, you do + plan to have dinosaurs on your dinosaur tour, right? +

+ Read More +
+
+ + diff --git a/Week 2.1 - CSS Grid/2. Placing Items/index.html b/Week 2.1 - CSS Grid/2. Placing Items/index.html index fcd7781b..b44828f0 100644 --- a/Week 2.1 - CSS Grid/2. Placing Items/index.html +++ b/Week 2.1 - CSS Grid/2. Placing Items/index.html @@ -1,32 +1,36 @@ - - - - Placing Items + + + + Placing Items - - - + .photo > * { + mix-blend-mode: multiply; + } + + + + - - -
- cyan - magenta - yellow - black -
- - - \ No newline at end of file +
+ cyan + magenta + yellow + black +
+ + diff --git a/Week 2.1 - CSS Grid/3. Placing Items - Advanced/index.html b/Week 2.1 - CSS Grid/3. Placing Items - Advanced/index.html index 0161e9be..79332d70 100644 --- a/Week 2.1 - CSS Grid/3. Placing Items - Advanced/index.html +++ b/Week 2.1 - CSS Grid/3. Placing Items - Advanced/index.html @@ -1,112 +1,131 @@ - - - - Placing Items - Advanced + + + + Placing Items - Advanced - - - - - + .letter:nth-of-type(1) { + grid-column: 1; + grid-row: 2; + } + .letter:nth-of-type(2) { + grid-column: 2; + grid-row: 3; + } + .letter-l:nth-of-type(3) { + grid-column: 3; + grid-row: 4; + } + .letter-l:nth-of-type(4) { + grid-column: 4; + grid-row: 5; + } + .letter:nth-of-type(5) { + grid-column: 5; + grid-row: 6; + } + .letter:nth-of-type(6) { + grid-column: 6; + grid-row: 7; + } -
-
  • h
    • -
  • e
    • -
  • l
    • -
  • l
    • -
  • o
    • -
  • !
    • + .placeholder { + border-color: mediumslateblue; + background-color: lightcyan; + } + + + +
    +
  • h
    • +
  • e
    • +
  • l
    • +
  • l
    • +
  • o
    • +
  • !
    • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
    - - - \ No newline at end of file +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
    + + diff --git a/Week 2.2 - Flexbox/1. Centering/index.html b/Week 2.2 - Flexbox/1. Centering/index.html index 5283be49..e9149de9 100644 --- a/Week 2.2 - Flexbox/1. Centering/index.html +++ b/Week 2.2 - Flexbox/1. Centering/index.html @@ -1,36 +1,34 @@ - - - - Centering + + + + Centering - - - + - -
    -
    -
    + .container { + width: 100%; + height: 600px; + border: 2px solid thistle; + border-radius: 4px; + background-color: whitesmoke; - - \ No newline at end of file + display: flex; + justify-content: center; + align-items: center; + } + + + +
    +
    +
    + + diff --git a/Week 2.2 - Flexbox/2. Placing Items/index.html b/Week 2.2 - Flexbox/2. Placing Items/index.html index 986e0ee4..cf658717 100644 --- a/Week 2.2 - Flexbox/2. Placing Items/index.html +++ b/Week 2.2 - Flexbox/2. Placing Items/index.html @@ -1,44 +1,46 @@ - - - - Placing Items + + + + Placing Items - - - + - -
    - - -
    + display: flex; + justify-content: space-between; + align-items: center; + } - - \ No newline at end of file + .logo { + max-height: 80px; + } + + + +
    + + +
    + + diff --git a/Week 2.2 - Flexbox/3. Placing Items - Advanced/index.html b/Week 2.2 - Flexbox/3. Placing Items - Advanced/index.html index 9ff4f7e7..cce2a8b1 100644 --- a/Week 2.2 - Flexbox/3. Placing Items - Advanced/index.html +++ b/Week 2.2 - Flexbox/3. Placing Items - Advanced/index.html @@ -1,58 +1,117 @@ - - - - Placing Items - Advanced - - - - - - - -
    -
    - placeholder -

    Lorem Ipsum Dolor

    -

    Forget the fat lady! You're obsessed with the fat lady! Drive us out of here! Is this my espresso machine? Wh-what is-h-how did you get my espresso machine? I was part of something special. Eventually, you do plan to have dinosaurs on your dinosaur tour, right?

    - Read More -
    -
    - placeholder -

    Lorem Ipsum Dolor

    -

    Forget the fat lady! You're obsessed with the fat lady! Drive us out of here! Is this my espresso machine? Wh-what is-h-how did you get my espresso machine? I was part of something special.

    - Read More -
    -
    - placeholder -

    Lorem Ipsum Dolor

    -

    Forget the fat lady! You're obsessed with the fat lady! Drive us out of here! Is this my espresso machine? Wh-what is-h-how did you get my espresso machine?

    - Read More -
    -
    - placeholder -

    Lorem Ipsum Dolor

    -

    Forget the fat lady! You're obsessed with the fat lady! Drive us out of here! Is this my espresso machine?

    - Read More -
    -
    - - - \ No newline at end of file + + + + Placing Items - Advanced + + + + +
    + + +
    + +
    +
    + placeholder +

    Lorem Ipsum Dolor

    +

    + Forget the fat lady! You're obsessed with the fat lady! Drive us out + of here! +

    + Read More +
    +
    + placeholder +

    Lorem Ipsum Dolor

    +

    + Forget the fat lady! You're obsessed with the fat lady! Drive us out + of here! Is this my espresso machine? Wh-what is-h-how did you get my + espresso machine? +

    + Read More +
    +
    + placeholder +

    Lorem Ipsum Dolor

    +

    Forget the fat lady! You're obsessed with the fat lady!

    + Read More +
    +
    + placeholder +

    Lorem Ipsum Dolor

    +

    + Forget the fat lady! You're obsessed with the fat lady! Drive us out + of here! Is this my espresso machine? +

    + Read More +
    +
    + + diff --git a/Week 2.2 - Flexbox/4. Flexing/index.html b/Week 2.2 - Flexbox/4. Flexing/index.html index 443de97c..77dac777 100644 --- a/Week 2.2 - Flexbox/4. Flexing/index.html +++ b/Week 2.2 - Flexbox/4. Flexing/index.html @@ -1,61 +1,59 @@ - - - - Flexing - - - - - - - -
    - - - -
    - - - \ No newline at end of file + + + + Flexing + + + + +
    + + + +
    + +