I have added new topic under the course root Skills and knoledge, an…

…d in other javscript components, i have just modified the styles and changed the appearance
massarinoaa · May 31, 2024 · 94a7db7 · 94a7db7
1 parent e4ffa2e
commit 94a7db7
Show file tree

Hide file tree

Showing 41 changed files with 5,381 additions and 105 deletions.
diff --git a/src/CourseNavLinks.jsx b/src/CourseNavLinks.jsx
@@ -17,12 +17,16 @@ const CourseNavLinks = () => {
         </NavLink>
         <NavLink to={"/javascriptCourse"}>
           {" "}
-          <span title="Javascript course">Javascript</span>{" "}
+          <span title="Javascript course">JavaScript</span>{" "}
         </NavLink>
         <NavLink to={"/react"}>
           {" "}
           <span title="React course">React</span>{" "}
         </NavLink>
+        <NavLink to={"/KnowledgeAndSkills"}>
+          {" "}
+          <span title=" Skills and Knowledge">Skills & 📚</span>{" "}
+        </NavLink>
       </main>
     </div>
   );

diff --git a/src/CourseRoutes.jsx b/src/CourseRoutes.jsx
@@ -44,6 +44,7 @@ import Filter, { Responsive } from "./css/Filter&Responsive";
 import LandingPage from "./LandingPage";
 import Policies from "./Policy";
 import ResponsiveHTML from "./html/Responsive";
+import SkillsAndKnowledge from "./SkillsAndKnowledge";
 
 const CourseRoutes = () => {
   return (
@@ -137,6 +138,7 @@ const CourseRoutes = () => {
         <Route path="javascriptCourse" element={<Jscourse />}></Route>
         <Route path="react" element={<Reactcourse />}></Route>
         <Route path="policy" element={<Policies />} />
+        <Route path="KnowledgeAndSkills" element={<SkillsAndKnowledge />} />
       </Routes>
     </div>
   );

diff --git a/src/Javascript/API.jsx b/src/Javascript/API.jsx
@@ -1,6 +1,6 @@
 const IntroAPI = () => {
   return (
-    <div className="comments-container">
+    <div className="comments-container internet">
       <h1>What is an API?</h1>
       <p>
         An API, or Application Programming Interface, is a set of defined rules
@@ -129,7 +129,7 @@ export default IntroAPI;
 
 export const FetchingDataFromApis = () => {
   return (
-    <div className="comments-container">
+    <div className="comments-container internet">
       <h1>Fetching Data from APIs</h1>
       <p>
         {`Now that we've learned about APIs, let's dive into how to fetch data from
@@ -294,9 +294,9 @@ export const FetchingDataFromApis = () => {
         <button onClick={() => (window.location.href = "/IntroAPI")}>
           back
         </button>
-        <button onClick={() => (window.location.href = "/WorkingWithAPIs")}>
+        {/* <button onClick={() => (window.location.href = "/WorkingWithAPIs")}>
           Next
-        </button>
+        </button> */}
       </div>
     </div>
   );

diff --git a/src/Javascript/Arrays.jsx b/src/Javascript/Arrays.jsx
@@ -1,6 +1,6 @@
 const Arrays = () => {
   return (
-    <div className="comments-container">
+    <div className="comments-container internet">
       <h1> JavaScript Array</h1>
       <p>
         In programming, an array is a data structure that contains a collection

diff --git a/src/Javascript/Asynhronous.jsx b/src/Javascript/Asynhronous.jsx
@@ -1,6 +1,6 @@
 const UnderstandingAsynchronousProgramming = () => {
   return (
-    <div className="comments-container">
+    <div className="comments-container internet">
       <h1>
         Synchronous vs. Asynchronous Programming: Keeping Your Web Pages
         Responsive
@@ -89,7 +89,7 @@ export default UnderstandingAsynchronousProgramming;
 
 export const EventLoop = () => {
   return (
-    <div className="comments-container">
+    <div className="comments-container internet">
       <h1>
         {" "}
         The {`Browser's`} Event Loop: The Traffic Cop for Asynchronous Tasks
@@ -188,7 +188,7 @@ export const EventLoop = () => {
 
 export const CallBacks = () => {
   return (
-    <div className="comments-container">
+    <div className="comments-container internet">
       <h1>Callbacks: Your Asynchronous Task Force in JavaScript</h1>
       <p>
         {" "}
@@ -361,7 +361,7 @@ console.log("This line will execute before new updates arrive.");
 
 export const Promises = () => {
   return (
-    <div className="comments-container">
+    <div className="comments-container internet">
       <h1>Imagine Promises as Waiters in a Restaurant</h1>
       <p>
         {" "}
@@ -495,7 +495,7 @@ orderPizza('veggie')
 
 export const AsyncAwait = () => {
   return (
-    <div className="comments-container">
+    <div className="comments-container internet">
       <h1>Async and Await: Simplifying Asynchronous Programming</h1>
       <p>
         Promises are fantastic for managing asynchronous operations in

diff --git a/src/Javascript/BOM.jsx b/src/Javascript/BOM.jsx
@@ -1,6 +1,6 @@
 const IntroductionBOM = () => {
   return (
-    <div className="comments-container">
+    <div className="comments-container internet">
       <h1>Welcome to the Wonderful World of the BOM!</h1>
 
       <p>
@@ -122,7 +122,7 @@ export default IntroductionBOM;
 
 export const WindowObject = () => {
   return (
-    <div className="comments-container">
+    <div className="comments-container internet">
       <h1>Welcome to the Wonderful World of the Window Object!</h1>
 
       <p>
@@ -274,7 +274,7 @@ console.log("Window width:", windowWidth, "Window height:", windowHeight);
 
 export const LocationObject = () => {
   return (
-    <div className="comments-container">
+    <div className="comments-container internet">
       <h1>Introduction to the Location Object (URL Manipulation)</h1>
       <p>
         The Browser Object Model (BOM) offers a toolbox of functionalities to
@@ -417,7 +417,7 @@ location.reload();  // Reloads the current page
 
 export const NavigationObject = () => {
   return (
-    <div className="comments-container">
+    <div className="comments-container internet">
       <h1>
         Introduction to the Navigation Object (Browser Navigation Information)
       </h1>
@@ -527,7 +527,7 @@ console.log("User Agent:", userAgent);
 
 export const HistoryObject = () => {
   return (
-    <div className="comments-container">
+    <div className="comments-container internet">
       <h1>
         {" "}
         Introduction to the History Object (Navigation History Manipulation)
@@ -659,7 +659,7 @@ history.forward(); // Move one step forward in history (same as history.go(1))
 
 export const ScreenObject = () => {
   return (
-    <div className="comments-container">
+    <div className="comments-container internet">
       <h1>Introduction to the Screen Object (Screen Size and Resolution)</h1>
       <p>
         The Browser Object Model (BOM) equips you with various tools to interact
@@ -777,7 +777,7 @@ console.log("Color depth:", colorDepth, "Pixel depth:", pixelDepth);
 
 export const BOMApplication = () => {
   return (
-    <div className="comments-container">
+    <div className="comments-container internet">
       <h1>BOM Applications (uer interaction beyond the page content)</h1>
       <p>
         Absolutely! Now that{" "}

diff --git a/src/Javascript/Comments.jsx b/src/Javascript/Comments.jsx
@@ -1,6 +1,6 @@
 const Comments = () => {
   return (
-    <div className="comments-container">
+    <div className="comments-container internet">
       <h1>Welcome to the Wonderful World of Comments!</h1>
       <p>
         Just like how we use comments in our daily lives to explain things or
@@ -117,7 +117,7 @@ export default Comments;
 
 export const ScopeJS = () => {
   return (
-    <div className="comments-container">
+    <div className="comments-container internet">
       <h1>What is Scope?</h1>
       <p>
         Scope, in simple terms, refers to the visibility or accessibility of
@@ -257,7 +257,7 @@ outerFunction();
 
 export const Hoisting = () => {
   return (
-    <div className="comments-container">
+    <div className="comments-container internet">
       <h1>Introduction to Hoisting in JavaScript (JS)</h1>
       <p>
         {" "}

diff --git a/src/Javascript/DOM.jsx b/src/Javascript/DOM.jsx
@@ -1,6 +1,6 @@
 const DOMintro = () => {
   return (
-    <div className="comments-container">
+    <div className="comments-container internet">
       <h1>Welcome to the Wonderful World of the DOM!</h1>
       <p>
         Have you ever clicked a button on a website and something cool happened?
@@ -126,7 +126,7 @@ const DOMintro = () => {
 export default DOMintro;
 export const SelectingElementsINDom = () => {
   return (
-    <div className="comments-container">
+    <div className="comments-container internet">
       <h1>Picking Your Targets: Selecting Elements in the DOM (Enhanced)</h1>
       <p>
         {" "}
@@ -302,7 +302,7 @@ const allButtons = document.querySelectorAll("button");
 
 export const ModifyingElements = () => {
   return (
-    <div className="comments-container">
+    <div className="comments-container internet">
       <h1>How to Modify DOM Elements</h1>
       <p>
         Once you have access to DOM elements, you can modify them in various
@@ -1046,7 +1046,7 @@ console.log("Has 'text-dark' class:", hasTextDarkClass); // Outputs true or fals
 
 export const EventHandling = () => {
   return (
-    <div className="comments-container">
+    <div className="comments-container internet">
       <h1>Understanding DOM Events and JavaScript Event Listeners </h1>
       <p>
         {" "}

diff --git a/src/Javascript/DateObject.jsx b/src/Javascript/DateObject.jsx
@@ -1,6 +1,6 @@
 const DateObject = () => {
   return (
-    <div className="comments-container">
+    <div className="comments-container internet">
       <h1>What is a Date in JavaScript?</h1>
       <p>
         Imagine {`you're`} planning a birthday party for your friend. You need
@@ -151,7 +151,7 @@ export default DateObject;
 
 export const MathObject = () => {
   return (
-    <div className="comments-container">
+    <div className="comments-container internet">
       <h1>What is Math in JavaScript?</h1>
       <h2>Imagine {`You're`} a Master Chef</h2>
       <p>

diff --git a/src/Javascript/ErrorHandling.jsx b/src/Javascript/ErrorHandling.jsx
@@ -1,6 +1,6 @@
 const TryCatch = () => {
   return (
-    <div className="comments-container">
+    <div className="comments-container internet">
       <h1>Try/Catch Statements: Graceful Error Handling in JavaScript</h1>
       <p>
         {" "}
@@ -137,7 +137,7 @@ export default TryCatch;
 
 export const ThrowingErro = () => {
   return (
-    <div className="comments-container">
+    <div className="comments-container internet">
       <h1>Throwing and Handling Errors: Taking Control in JavaScript</h1>
       <p>
         {" "}
@@ -235,7 +235,7 @@ try {
 
 export const DebuggingTech = () => {
   return (
-    <div className="comments-container">
+    <div className="comments-container internet">
       <h1> Debugging Techniques: Unveiling the Mysteries of JavaScript</h1>
       <p>
         Even the best JavaScript code can have errors. Debugging techniques help

diff --git a/src/Javascript/Functions.jsx b/src/Javascript/Functions.jsx
@@ -1,6 +1,6 @@
 const DefiningCallingFunc = () => {
   return (
-    <div className="comments-container">
+    <div className="comments-container internet">
       <h1>Welcome to the Wonderful World of JavaScript Functions!</h1>
       <p>
         Welcome, future JavaScript masters! Today, {`we'll`} meet some
@@ -122,7 +122,7 @@ export default DefiningCallingFunc;
 
 export const ParameterArgument = () => {
   return (
-    <div className="comments-container">
+    <div className="comments-container internet">
       <h1>
         Level Up Your Functions: Using Parameters and Arguments like a Pro
       </h1>
@@ -246,7 +246,7 @@ greetUser("Alice"); // "Alice" is the argument for the "name" parameter
 };
 export const ReturnValues = () => {
   return (
-    <div className="comments-container">
+    <div className="comments-container internet">
       <h1>
         Unlocking the Power of Returning Values: Giving Your Functions Results
       </h1>
@@ -375,7 +375,7 @@ console.log("The area of the rectangle is:", rectangleArea); // This will print:
 
 export const FuncScope = () => {
   return (
-    <div className="comments-container">
+    <div className="comments-container internet">
       <h1>Demystifying Function Scope: Where Your Variables Live</h1>
       <p>
         In our JavaScript journey,{" "}
@@ -476,7 +476,7 @@ greetUser(); // This will print "Hello, Alice!"
 
 export const ArrowFunc = () => {
   return (
-    <div className="comments-container">
+    <div className="comments-container internet">
       <h1>Introducing Arrow Functions: A Simpler Way to Write Functions</h1>
       <p>
         {" "}

diff --git a/src/Javascript/GlimpsIntro.jsx b/src/Javascript/GlimpsIntro.jsx
@@ -1,6 +1,6 @@
 const WhatJavaScript = () => {
   return (
-    <div className="comments-container">
+    <div className="comments-container internet">
       <h1>{`Let's`} Dive into JavaScript!</h1>
       <h2>
         Note: Throughout this guide, {`you'll see "JavaScript" and "JS"`} used
@@ -117,7 +117,7 @@ const WhatJavaScript = () => {
 export default WhatJavaScript;
 export const WhyJavascript = () => {
   return (
-    <div className="comments-container">
+    <div className="comments-container internet">
       <h1>Why Learn JavaScript?</h1>
       <h2>Unleash the Power of JavaScript</h2>
       <p>
@@ -209,7 +209,7 @@ export const WhyJavascript = () => {
 
 export const RunningJS = () => {
   return (
-    <div className="comments-container">
+    <div className="comments-container internet">
       <h1>JavaScript Basics: How to Insert and Run Your Code</h1>
 
       <p>

diff --git a/src/Javascript/JSOn.jsx b/src/Javascript/JSOn.jsx
@@ -1,6 +1,6 @@
 const JSOn = () => {
   return (
-    <div className="comments-container">
+    <div className="comments-container internet">
       <h1>What is JSON?</h1>
       <p>
         {`JSON is a lightweight data interchange format that's easy to read and

diff --git a/src/Javascript/JavascriptVsECMAScript.jsx b/src/Javascript/JavascriptVsECMAScript.jsx
@@ -1,6 +1,6 @@
 const JavascriptVsECMAScript = () => {
   return (
-    <div className="comments-container">
+    <div className="comments-container internet">
       <h1>Welcome to the World of JavaScript and ECMAScript!</h1>
       <p>
         Hey there! So,{" "}

diff --git a/src/Javascript/Loops.jsx b/src/Javascript/Loops.jsx
@@ -1,6 +1,6 @@
 const Loops = () => {
   return (
-    <div className="comments-container">
+    <div className="comments-container internet">
       <h1>Loops: What They Are and How They Work</h1>
       <p>
         Think of loops as your personal automation crew. {`They're`} the