diff --git a/000-boilerplate/favicon.ico b/000-boilerplate/favicon.ico new file mode 100644 index 0000000..8e43528 Binary files /dev/null and b/000-boilerplate/favicon.ico differ diff --git a/000-boilerplate/index.html b/000-boilerplate/index.html index c1ff5cb..77ed9ee 100644 --- a/000-boilerplate/index.html +++ b/000-boilerplate/index.html @@ -13,7 +13,9 @@ My Project -

My Project

+ + +
diff --git a/000-boilerplate/style.css b/000-boilerplate/style.css index b35d72c..264790f 100644 --- a/000-boilerplate/style.css +++ b/000-boilerplate/style.css @@ -1,11 +1,12 @@ -@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"); +/* Replace Roboto with a font you like. */ +@import url("https://fonts.googleapis.com/css2?family=Newspaper:wght@400;700&display=swap"); * { box-sizing: border-box; } body { - font-family: "Roboto", sans-serif; + font-family: "Newspaper", sans-serif; display: flex; flex-direction: column; align-items: center; @@ -14,3 +15,9 @@ body { overflow: hidden; margin: 0; } + +div { + background-color: blue; + width: 200px; + height: 200px; +} diff --git a/001-expanding cards/index.html b/001-expanding cards/index.html index a8ff5d0..8ecfe23 100644 --- a/001-expanding cards/index.html +++ b/001-expanding cards/index.html @@ -9,6 +9,8 @@ integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" /> --> + + Expanding cards @@ -20,7 +22,8 @@ background-image: url('https://images.unsplash.com/photo-1610212570473-6015f631ae96?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80'); " > -

Explore the world

+ +

Canada

Explore the world background-image: url('https://images.unsplash.com/photo-1606838830438-5f380a664a4e?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1350&q=80'); " > -

Explore the world

+

Argentina

Explore the world background-image: url('https://images.unsplash.com/photo-1606059100151-b09b22709477?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1778&q=80'); " > -

Explore the world

+

Paris

Explore the world background-image: url('https://images.unsplash.com/photo-1603048675767-6e79ff5b8fc1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80'); " > -

Explore the world

+

Tokyo

Explore the world background-image: url('https://images.unsplash.com/photo-1595433502559-d8f05e6a1041?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80'); " > -

Explore the world

+

Brazil

+
+ +
+

Vietnam

diff --git a/001-expanding cards/style.css b/001-expanding cards/style.css index 03f7979..63bc524 100644 --- a/001-expanding cards/style.css +++ b/001-expanding cards/style.css @@ -24,14 +24,16 @@ body { background-position: center; background-repeat: no-repeat; height: 80vh; - border-radius: 50px; + /* Adjust Card Corner Style */ + border-radius: 0px; color: #fff; cursor: pointer; flex: 0.5; margin: 10px; position: relative; - transition: flex 0.7s ease-in; - -webkit-transition: all 700ms ease-in; + /* Modify Transition Speed */ + transition: flex 0.2s ease-in; + -webkit-transition: all 200ms ease-in; } .panel h3 { @@ -50,6 +52,8 @@ body { .panel.active h3 { opacity: 1; transition: opacity 0.3s ease-in 0.4s; + /* Change Active Panel Text Color */ + color: silver; } @media (max-width: 480px) { diff --git a/002-progress steps/index.html b/002-progress steps/index.html index 07e7c79..c8484de 100644 --- a/002-progress steps/index.html +++ b/002-progress steps/index.html @@ -14,9 +14,12 @@
2
3
4
+ +
5
- - + + + diff --git a/002-progress steps/script.js b/002-progress steps/script.js index 024a72d..f745751 100644 --- a/002-progress steps/script.js +++ b/002-progress steps/script.js @@ -3,7 +3,8 @@ const prev = document.getElementById("prev"); const next = document.getElementById("next"); const circles = document.querySelectorAll(".circle"); -let currentActive = 1; +// Change Initial Active Step +let currentActive = 2; next.addEventListener("click", () => { currentActive++; @@ -32,3 +33,5 @@ const update = () => { next.disabled = false; } }; + +update(); diff --git a/002-progress steps/style.css b/002-progress steps/style.css index b4dfe95..e7ecb81 100644 --- a/002-progress steps/style.css +++ b/002-progress steps/style.css @@ -1,7 +1,8 @@ @import url("https://fonts.googleapis.com/css2?family=Muli&display=swap"); :root { - --line-border-fill: #3498db; + /* Change Active Step Color */ + --line-border-fill: #e67e22; --line-border-empty: #e0e0e0; } @@ -58,8 +59,9 @@ body { } .circle { - background-color: #fff; - color: #999; + /* Style Inactive Circles */ + background-color: #fbfbfb; + color: #716969; border-radius: 50%; height: 30px; width: 30px; diff --git a/003-rotating navigation/index.html b/003-rotating navigation/index.html index b695be1..847a324 100644 --- a/003-rotating navigation/index.html +++ b/003-rotating navigation/index.html @@ -17,10 +17,11 @@
@@ -63,6 +64,8 @@

My Subtitle

  • Home
  • About
  • Contact
    • + +
  • Portfolio
    • diff --git a/003-rotating navigation/style.css b/003-rotating navigation/style.css index 043507a..1ee3c08 100644 --- a/003-rotating navigation/style.css +++ b/003-rotating navigation/style.css @@ -22,7 +22,8 @@ body { } .container.show-nav { - transform: rotate(-20deg); + /* Adjust Rotation Angle */ + transform: rotate(-30deg); } .circle-container { @@ -92,10 +93,13 @@ nav ul li { color: #fff; margin: 40px 0; transform: translateX(-100%); - transition: transform 0.4s ease-in; + /* Modify Transition Speed of Menu Items */ + transition: transform 0.2s ease-in; } nav ul li i { + /* Change Icon Color: */ + color: #ff7979; font-size: 20px; margin-right: 10px; } @@ -110,6 +114,11 @@ nav ul li + li + li { transform: translateX(-200%); } +nav ul li + li + li + li { + margin-left: 45px; + transform: translateX(-250%); +} + .content { max-width: 1000px; margin: 50px auto; diff --git a/004-hidden search widget/index.html b/004-hidden search widget/index.html index 3c8792a..af83cd7 100644 --- a/004-hidden search widget/index.html +++ b/004-hidden search widget/index.html @@ -13,8 +13,10 @@
    - - + + + +
    diff --git a/004-hidden search widget/script.js b/004-hidden search widget/script.js index 3f3ff9f..2572788 100644 --- a/004-hidden search widget/script.js +++ b/004-hidden search widget/script.js @@ -1,8 +1,12 @@ const search = document.querySelector(".search"); const btn = document.querySelector(".btn"); const input = document.querySelector(".input"); +// Animate Button Icon Change +const icon = document.querySelector(".fas"); btn.addEventListener("click", () => { search.classList.toggle("active"); + icon.classList.toggle("fa-search-plus", !search.classList.contains("active")); + icon.classList.toggle("fa-times", search.classList.contains("active")); input.focus(); }); diff --git a/004-hidden search widget/style.css b/004-hidden search widget/style.css index 820b47f..f868a8a 100644 --- a/004-hidden search widget/style.css +++ b/004-hidden search widget/style.css @@ -48,10 +48,17 @@ body { outline: none; } +/* Change Background Color on Hover */ + +.input:focus { + background-color: #f0f0f0; +} + .search.active .input { - width: 200px; + /* Modify Expansion Width */ + width: 300px; } .search.active .btn { - transform: translateX(198px); + transform: translateX(248px); } diff --git a/005-blurry loading/script.js b/005-blurry loading/script.js index 32b58ce..3f1e0e8 100644 --- a/005-blurry loading/script.js +++ b/005-blurry loading/script.js @@ -7,8 +7,10 @@ const blurring = () => { load++; if (load > 99) clearInterval(int); loadText.innerText = `${load}%`; - loadText.style.opacity = scale(load, 0, 100, 1, 0); - bg.style.filter = `blur(${scale(load, 0, 100, 30, 0)}px)`; + // Fade Out Text Sooner or Later + loadText.style.opacity = scale(load, 0, 50, 1, 0); + // Modify Initial Blur Amount + bg.style.filter = `blur(${scale(load, 0, 100, 10, 0)}px)`; }; // For reference: https://stackoverflow.com/questions/10756313/javascript-jquery-map-a-range-of-numbers-to-another-range-of-numbers @@ -16,4 +18,5 @@ const scale = (num, in_min, in_max, out_min, out_max) => { return ((num - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min; }; -let int = setInterval(blurring, 30); +// Change the Loading Speed +let int = setInterval(blurring, 10); diff --git a/005-blurry loading/style.css b/005-blurry loading/style.css index 86f6405..d48c52d 100644 --- a/005-blurry loading/style.css +++ b/005-blurry loading/style.css @@ -15,7 +15,8 @@ body { } .bg { - background: url("https://images.unsplash.com/photo-1610217053402-b187336e9443?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2100&q=80") + /* Use a Different Background Image */ + background: url("https://images.unsplash.com/photo-1734779336398-167995aeaf1c?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2100&q=80") no-repeat center center / cover; position: absolute; top: -30px; @@ -28,5 +29,6 @@ body { .loading-text { font-size: 50px; - color: #a3b1c3; + /* Change Loading Text Color */ + color: #403d47; } diff --git a/006-scroll animation/index.html b/006-scroll animation/index.html index a677be4..dc2cc87 100644 --- a/006-scroll animation/index.html +++ b/006-scroll animation/index.html @@ -8,18 +8,19 @@

    Scroll to see the animation

    -

    Content

    -

    Content

    -

    Content

    -

    Content

    -

    Content

    -

    Content

    -

    Content

    -

    Content

    -

    Content

    -

    Content

    -

    Content

    -

    Content

    + +

    Introduction

    +

    Getting Started

    +

    Basic Concepts

    +

    Advanced Features

    +

    Best Practices

    +

    Common Pitfalls

    +

    Troubleshooting

    +

    Performance Tips

    +

    Examples

    +

    Resources

    +

    Community

    +

    Conclusion

    diff --git a/006-scroll animation/script.js b/006-scroll animation/script.js index 7249e3b..29f127d 100644 --- a/006-scroll animation/script.js +++ b/006-scroll animation/script.js @@ -1,7 +1,8 @@ const boxes = document.querySelectorAll(".box"); const checkBoxes = () => { - const triggerBottom = (window.innerHeight / 5) * 4; + // Adjust Scroll Trigger Point + const triggerBottom = (window.innerHeight / 5) * 3.9; boxes.forEach((box) => { const boxTop = box.getBoundingClientRect().top; if (boxTop < triggerBottom) box.classList.add("show"); diff --git a/006-scroll animation/style.css b/006-scroll animation/style.css index 6f7006c..b202383 100644 --- a/006-scroll animation/style.css +++ b/006-scroll animation/style.css @@ -30,16 +30,23 @@ h1 { margin: 10px; border-radius: 10px; box-shadow: 2px 4px 5px rgba(0, 0, 0, 0.3); - transform: translateX(400%); - transition: transform 0.4s ease; + /* Change Animation Direction for All Boxes */ + transform: translateY(100%); + /* Create a Fade In Animation */ + opacity: 0; + /* transition: transform 0.4s ease; */ + transition: transform 0.4s ease, opacity 0.4s ease; } -.box:nth-of-type(even) { - transform: translateX(-400%); -} +/* .box:nth-of-type(even) { + transform: translateX(400%); +} */ .box.show { - transform: translateX(0); + transform: translateY(0); + /* Change Box Background Color on Show */ + background-color: #34113f; + opacity: 1; } .box h2 { diff --git a/007-split landing page/index.html b/007-split landing page/index.html index b783e39..610c562 100644 --- a/007-split landing page/index.html +++ b/007-split landing page/index.html @@ -9,12 +9,14 @@
    -

    PlayStation 5

    - Buy Now + +

    Ocean Breeze

    + + Dive In
    -

    Xbox Series X

    - Buy Now +

    Mountain View

    + Explore Peaks
    diff --git a/007-split landing page/style.css b/007-split landing page/style.css index 074a8ee..6d80668 100644 --- a/007-split landing page/style.css +++ b/007-split landing page/style.css @@ -1,13 +1,16 @@ @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"); :root { - --left-bg-color: rgba(87, 84, 236, 0.7); - --right-bg-color: rgba(43, 43, 43, 0.8); - --left-btn-hover-color: rgba(87, 84, 236, 1); - --right-btn-hover-color: rgba(28, 122, 28, 1); - --hover-width: 75%; - --minimize-width: 25%; - --transition-speed: 1s; + --left-bg-color: rgba(97, 135, 160, 0.7); + --right-bg-color: rgba(97, 96, 50, 0.8); + /* Change Button Styling */ + --left-btn-hover-color: rgba(40, 61, 74, 1); + --right-btn-hover-color: rgba(24, 24, 13, 1); + /* Modify Hover Widths */ + --hover-width: 60%; + --minimize-width: 40%; + /* Adjust Transition Speed */ + --transition-speed: 0.5s; } * { @@ -40,7 +43,7 @@ h1 { left: 50%; top: 40%; transform: translateX(-50%); - border: #fff solid 0.2rem; + border: rgba(255, 255, 255, 0.25) solid 0.2rem; text-decoration: none; font-size: 1rem; font-weight: bold; @@ -75,7 +78,8 @@ h1 { .split.left { left: 0; - background: url("https://images.unsplash.com/photo-1606144042614-b2417e99c4e3?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80") + /* Use Different Background Images */ + background: url("https://images.unsplash.com/photo-1542914119-8da84e777eb4?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1762&q=80") no-repeat center / cover; } @@ -89,7 +93,7 @@ h1 { .split.right { right: 0; - background: url("https://images.unsplash.com/photo-1607853827120-6847830b38b0?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1762&q=80") + background: url("https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80") no-repeat center / cover; } diff --git a/008-form wave animation/index.html b/008-form wave animation/index.html index 0daeece..8a367d6 100644 --- a/008-form wave animation/index.html +++ b/008-form wave animation/index.html @@ -8,17 +8,23 @@
    -

    Please Login

    + +

    Welcome Back

    + +
    + + +
    - +

    Don't have an account? Register

    diff --git a/008-form wave animation/script.js b/008-form wave animation/script.js index f13a433..22fe41a 100644 --- a/008-form wave animation/script.js +++ b/008-form wave animation/script.js @@ -5,7 +5,8 @@ labels.forEach((label) => { .split("") .map( (letter, idx) => - `${letter}` + // Adjust Wave Animation Speed + `${letter}` ) .join(""); }); diff --git a/008-form wave animation/style.css b/008-form wave animation/style.css index 81eba3b..8fd386b 100644 --- a/008-form wave animation/style.css +++ b/008-form wave animation/style.css @@ -30,14 +30,15 @@ body { .container a { text-decoration: none; - color: lightblue; + color: #59a96a; } .btn { cursor: pointer; display: inline-block; width: 100%; - background: lightblue; + /* Modify Button Appearance */ + background: #59a96a; padding: 15px; font-family: inherit; font-size: 16px; @@ -77,7 +78,7 @@ body { .form-control input:focus, .form-control input:valid { outline: 0; - border-bottom-color: lightblue; + border-bottom-color: #13293d; } .form-control label { @@ -96,6 +97,7 @@ body { .form-control input:focus + label span, .form-control input:valid + label span { - color: lightblue; + /* Change Label Color on Focus */ + color: #59a96a; transform: translateY(-30px); } diff --git a/009-sound board/index.html b/009-sound board/index.html index 27d9be7..c6b6f4a 100644 --- a/009-sound board/index.html +++ b/009-sound board/index.html @@ -13,6 +13,7 @@ +
    diff --git a/009-sound board/script.js b/009-sound board/script.js index f1050a1..beaa883 100644 --- a/009-sound board/script.js +++ b/009-sound board/script.js @@ -1,4 +1,5 @@ -const sounds = ["applause", "boo", "gasp", "tada", "victory", "wrong"]; +// Include a New Sound +const sounds = ["applause", "boo", "gasp", "tada", "victory", "wrong", "joke"]; const buttons = document.getElementById("buttons"); const stopSounds = () => { @@ -7,15 +8,25 @@ const stopSounds = () => { currentSound.pause(); currentSound.currentTime = 0; }); + document + .querySelectorAll(".btn") + .forEach((btn) => btn.classList.remove("playing")); }; sounds.forEach((sound) => { const btn = document.createElement("button"); btn.classList.add("btn"); - btn.innerText = sound; + // Change Button Text + btn.innerText = btn.innerText = "Play " + sound.toUpperCase(); btn.addEventListener("click", () => { stopSounds(); - document.getElementById(sound).play(); + // Add Visual Feedback on Play + btn.classList.add("playing"); + const audio = document.getElementById(sound); + audio.play(); + audio.onended = () => { + btn.classList.remove("playing"); + }; }); buttons.appendChild(btn); }); diff --git a/009-sound board/sounds/joke.mp3 b/009-sound board/sounds/joke.mp3 new file mode 100644 index 0000000..5bc9465 Binary files /dev/null and b/009-sound board/sounds/joke.mp3 differ diff --git a/009-sound board/style.css b/009-sound board/style.css index a1b897b..85052e4 100644 --- a/009-sound board/style.css +++ b/009-sound board/style.css @@ -18,8 +18,10 @@ body { } .btn { - background-color: rebeccapurple; - border-radius: 5px; + /* Adjust Button Styling */ + background-color: #2e1c2b; + color: #eaeaea; + border-radius: 10px; border: none; color: #fff; margin: 1rem; @@ -36,3 +38,7 @@ body { .btn:focus { outline: none; } + +.btn.playing { + background-color: rebeccapurple; +}