add banneri mage

asiqurrahman · asiqurrahman · commit 9d7f58f38ef1 · 2025-10-08T18:58:38.000-04:00
diff --git a/projects/analyze-us-census-data-with-scipy/analyze-us-census-data-with-scipy.mdx b/projects/analyze-us-census-data-with-scipy/analyze-us-census-data-with-scipy.mdx
@@ -6,6 +6,7 @@ datePublished: 2025-01-13
 published: live
 description: Learn how to analyze U.S. census data with SciPy
 header: https://firebasestorage.googleapis.com/v0/b/codedex-io.appspot.com/o/assets%2Findex%2F12423.png?alt=media&token=721aaaaa-f431-438e-bd19-c3f6a97afb41
+bannerImage: https://firebasestorage.googleapis.com/v0/b/codedex-io.appspot.com/o/assets%2Findex%2F12423.png?alt=media&token=721aaaaa-f431-438e-bd19-c3f6a97afb41
 readTime: 45
 prerequisites: <a href="/python">Python</a>, <a href="/numpy">NumPy</a>, SciPy
 versions: Python 3
diff --git a/projects/animate-images-with-keyframes-using-css/animate-images-with-keyframes-using-css.mdx b/projects/animate-images-with-keyframes-using-css/animate-images-with-keyframes-using-css.mdx
@@ -5,6 +5,7 @@ uid: 11zhRKeJCWWcD7IkTJBtuK3Mkvo1
 datePublished: 2025-03-14
 description: Learn about the basics of CSS Keyframes to animate images with CSS
 header: https://github.com/codedex-io/projects/blob/main/projects/animate-images-with-keyframes-using-css/header.gif?raw=true
+bannerImage: https://github.com/codedex-io/projects/blob/main/projects/animate-images-with-keyframes-using-css/header.gif?raw=true
 published: live
 readTime: 45
 prerequisites: <a href="/css">CSS</a>
diff --git a/projects/build-a-conversational-game-in-p5js/build-a-conversational-game-in-p5js.mdx b/projects/build-a-conversational-game-in-p5js/build-a-conversational-game-in-p5js.mdx
@@ -6,6 +6,7 @@ datePublished: 2025-01-03
 published: live
 description: Learn how to make a game of Pong that takes the form of two characters having a conversation, using p5.js.
 header: https://firebasestorage.googleapis.com/v0/b/codedex-io.appspot.com/o/assets%2Findex%2FCopy%20of%20Codedex%20Project%20Headers%20(Twitter%20Post).gif?alt=media&token=f1a5a667-5967-4e50-ad37-ec63f09535eb
+bannerImage: https://firebasestorage.googleapis.com/v0/b/codedex-io.appspot.com/o/assets%2Findex%2FCopy%20of%20Codedex%20Project%20Headers%20(Twitter%20Post).gif?alt=media&token=f1a5a667-5967-4e50-ad37-ec63f09535eb
 readTime: 30
 prerequisites: p5.js, JavaScript
 versions: p5 1.11.2
diff --git a/projects/build-a-word-guessing-game-with-python/build-a-word-guessing-game-with-python.mdx b/projects/build-a-word-guessing-game-with-python/build-a-word-guessing-game-with-python.mdx
@@ -6,6 +6,7 @@ datePublished: 2024-08-16
 published: live
 description: Use Python to Build a Simple Word Guessing Game.
 header: https://raw.githubusercontent.com/codedex-io/projects/main/projects/build-a-word-guessing-game-with-python/header.gif
+bannerImage: https://raw.githubusercontent.com/codedex-io/projects/main/projects/build-a-word-guessing-game-with-python/header.gif
 readTime: 30
 prerequisites: Python fundamentals
 versions: Python 3
diff --git a/projects/build-an-album-finder-with-spotify-api/build-an-album-finder-with-spotify-api.mdx b/projects/build-an-album-finder-with-spotify-api/build-an-album-finder-with-spotify-api.mdx
@@ -5,6 +5,7 @@ uid: 11zhRKeJCWWcD7IkTJBtuK3Mkvo1
 datePublished: 2024-01-26
 description: Learn to make an album finder app with the Spotify API, ReactJS, and React-Bootstrap.
 header: https://raw.githubusercontent.com/codedex-io/projects/main/projects/build-an-album-finder-with-spotify-api/header.gif
+bannerImage: https://raw.githubusercontent.com/codedex-io/projects/main/projects/build-an-album-finder-with-spotify-api/header.gif
 published: live
 readTime: 65
 prerequisites: HTML, CSS, and JS fundamentals
diff --git a/projects/build-an-avatar-generator-with-html-css-js/build-an-avatar-generator-with-html-css-js.mdx b/projects/build-an-avatar-generator-with-html-css-js/build-an-avatar-generator-with-html-css-js.mdx
@@ -5,6 +5,7 @@ uid: Jps14SaCwqgdbbnYvoMpvMKv92P2
 datePublished: 2025-05-09
 description: Learn how to build a randomizer that generates outfits, monsters, and avatars with HTML, CSS, and JavaScript.
 header: https://raw.githubusercontent.com/codedex-io/projects/refs/heads/main/projects/build-an-avatar-generator-with-html-css-js/header.gif
+bannerImage: https://raw.githubusercontent.com/codedex-io/projects/refs/heads/main/projects/build-an-avatar-generator-with-html-css-js/header.gif
 published: live
 readTime: 60
 prerequisites: HTML, CSS, JavaScript fundamentals
diff --git a/projects/build-an-interactive-3d-model-with-threejs/build-an-interactive-3d-model-with-threejs.mdx b/projects/build-an-interactive-3d-model-with-threejs/build-an-interactive-3d-model-with-threejs.mdx
@@ -5,6 +5,7 @@ uid: 11zhRKeJCWWcD7IkTJBtuK3Mkvo1
 datePublished: 2024-07-09
 description: Learn how to load a 3D Model using the JavaScript library Three.js for your website.
 header: https://raw.githubusercontent.com/codedex-io/projects/main/projects/build-an-interactive-3d-model-with-threejs/header.gif
+bannerImage: https://raw.githubusercontent.com/codedex-io/projects/main/projects/build-an-interactive-3d-model-with-threejs/header.gif
 published: live
 readTime: 60
 prerequisites: JavaScript
diff --git a/projects/build-tic-tac-toe-with-javascript/build-tic-tac-toe-with-javascript.mdx b/projects/build-tic-tac-toe-with-javascript/build-tic-tac-toe-with-javascript.mdx
@@ -6,6 +6,7 @@ datePublished: 2024-08-02
 published: live
 description: Use JavaScript and Node.js to build a simple Tic-Tac-Toe game.
 header: https://raw.githubusercontent.com/codedex-io/projects/main/projects/build-tic-tac-toe-with-javascript/header.png
+bannerImage: https://raw.githubusercontent.com/codedex-io/projects/main/projects/build-tic-tac-toe-with-javascript/header.png
 readTime: 30
 prerequisites: JavaScript fundamentals
 versions: Node.js 16.14.0
diff --git a/projects/convert-roman-numerals-with-python/convert-roman-numerals-with-python.mdx b/projects/convert-roman-numerals-with-python/convert-roman-numerals-with-python.mdx
@@ -6,6 +6,7 @@ datePublished: 2023-04-17
 published: live
 description: Use common Python tools and functions to convert Roman numerals to integers.
 header: https://raw.githubusercontent.com/codedex-io/projects/main/projects/convert-roman-numerals-with-python/header.png
+bannerImage: https://raw.githubusercontent.com/codedex-io/projects/main/projects/convert-roman-numerals-with-python/header.png
 readTime: 30
 prerequisites: Python fundamentals
 versions: Python 3.10
diff --git a/projects/create-a-caesar-cipher-with-java/create-a-caesar-cipher-with-java.mdx b/projects/create-a-caesar-cipher-with-java/create-a-caesar-cipher-with-java.mdx
@@ -6,6 +6,7 @@ datePublished: 2025-05-22
 published: live
 description: Learn how to make a caeser cipher encrypter with Java using the Scanner class.
 header: https://raw.githubusercontent.com/codedex-io/projects/main/projects/create-a-caesar-cipher-with-java/header.gif
+bannerImage: https://raw.githubusercontent.com/codedex-io/projects/main/projects/create-a-caesar-cipher-with-java/header.gif
 readTime: 30
 prerequisites: Java fundamentals
 versions: None
diff --git a/projects/create-a-react-app-with-vite/create-a-react-app-with-vite.mdx b/projects/create-a-react-app-with-vite/create-a-react-app-with-vite.mdx
@@ -5,6 +5,7 @@ uid: H7lTRTjDJ0VbnaVUJdWSclFxwiH3
 datePublished: 2024-03-12
 description: Learn to create and run a React app with the Vite build tool.
 header: https://raw.githubusercontent.com/codedex-io/projects/main/projects/create-a-react-app-with-vite/header.png
+bannerImage: https://raw.githubusercontent.com/codedex-io/projects/main/projects/create-a-react-app-with-vite/header.png
 published: live
 readTime: 25
 prerequisites: Command Line
diff --git a/projects/create-a-voice-virtual-assistant-with-elevenlabs/create-a-voice-virtual-assistant-with-elevenlabs.mdx b/projects/create-a-voice-virtual-assistant-with-elevenlabs/create-a-voice-virtual-assistant-with-elevenlabs.mdx
@@ -6,6 +6,7 @@ datePublished: 2025-04-22
 description: Learn how to build a Voice Virtual Assistant using ElevenLabs API and Python for seamless AI-powered interactions.
 published: live
 header: https://raw.githubusercontent.com/codedex-io/projects/main/projects/create-a-voice-virtual-assistant-with-elevenlabs/header.gif
+bannerImage: https://raw.githubusercontent.com/codedex-io/projects/main/projects/create-a-voice-virtual-assistant-with-elevenlabs/header.gif
 readTime: 60
 prerequisites: Python fundamentals, API usage
 versions: Python 3.11, python-dotenv 1.0.1, elevenlabs 1.54.0, elevenlabs[pyaudio]
diff --git a/projects/create-a-vr-solar-system-with-a-frame/create-a-vr-solar-system-with-a-frame.mdx b/projects/create-a-vr-solar-system-with-a-frame/create-a-vr-solar-system-with-a-frame.mdx
@@ -5,6 +5,7 @@ uid: 8PG5qRSzM5hsOXbm0qPtxBZt4wG2
 datePublished: 2024-01-19
 description: Learn to create a virtual reality model of the Solar System with A-Frame and HTML.
 header: https://raw.githubusercontent.com/codedex-io/projects/main/projects/create-a-vr-solar-system-with-a-frame/header.gif
+bannerImage: https://raw.githubusercontent.com/codedex-io/projects/main/projects/create-a-vr-solar-system-with-a-frame/header.gif
 published: live
 readTime: 60
 prerequisites: HTML/CSS, JavaScript
diff --git a/projects/debug-your-web-app-in-vs-code/debug-your-web-app-in-vs-code.mdx b/projects/debug-your-web-app-in-vs-code/debug-your-web-app-in-vs-code.mdx
@@ -5,6 +5,7 @@ uid: inV9GLffvhafMJU3Le6tCezgbrZ2
 datePublished: 2023-11-17
 description: Learn to setup and use the built-in debugger for VS Code.
 header: https://raw.githubusercontent.com/codedex-io/projects/d83e6c63658c5ab93f80daa6bb00f89f7ba636e2/projects/debug-your-web-app-in-vs-code/header.png
+bannerImage: https://raw.githubusercontent.com/codedex-io/projects/d83e6c63658c5ab93f80daa6bb00f89f7ba636e2/projects/debug-your-web-app-in-vs-code/header.png
 published: live
 readTime: 60
 prerequisites: JavaScript fundamentals
diff --git a/projects/generate-a-poem-with-google-gemini/generate-a-poem-with-google-gemini.mdx b/projects/generate-a-poem-with-google-gemini/generate-a-poem-with-google-gemini.mdx
@@ -5,6 +5,7 @@ uid: Zai06xd7TDfDZgzx6MjUgvwYJe32
 datePublished: 2024-06-11
 description: Learn how to use the Google Generative AI model to generate poems in different styles.
 header: https://raw.githubusercontent.com/codedex-io/projects/main/projects/generate-a-poem-with-google-gemini/header.png
+bannerImage: https://raw.githubusercontent.com/codedex-io/projects/main/projects/generate-a-poem-with-google-gemini/header.png
 published: live
 readTime: 45
 prerequisites: HTML, CSS, JavaScript fundamentals
diff --git a/projects/generate-ai-art-with-krea-ai/generate-ai-art-with-krea-ai.mdx b/projects/generate-ai-art-with-krea-ai/generate-ai-art-with-krea-ai.mdx
@@ -5,6 +5,7 @@ uid: Zai06xd7TDfDZgzx6MjUgvwYJe32
 datePublished: 2024-06-20
 description: Learn how to create AI generated images using Krea.AI
 header: https://raw.githubusercontent.com/codedex-io/projects/main/projects/generate-ai-art-with-krea-ai/header.gif
+bannerImage: https://raw.githubusercontent.com/codedex-io/projects/main/projects/generate-ai-art-with-krea-ai/header.gif
 published: live
 readTime: 15
 prerequisites: HTML, CSS
diff --git a/projects/predict-home-prices-with-python-and-linear-regression/predict-home-prices-with-python-and-linear-regression.mdx b/projects/predict-home-prices-with-python-and-linear-regression/predict-home-prices-with-python-and-linear-regression.mdx
@@ -5,6 +5,7 @@ uid: Zai06xd7TDfDZgzx6MjUgvwYJe32
 datePublished: 2024-01-26
 description: Use Python to model linear regression of home prices.
 header: https://raw.githubusercontent.com/codedex-io/projects/main/projects/predict-home-prices-with-python-and-linear-regression/header.png
+bannerImage: https://raw.githubusercontent.com/codedex-io/projects/main/projects/predict-home-prices-with-python-and-linear-regression/header.png
 published: live
 readTime: 60
 prerequisites: Python fundamentals
diff --git a/projects/run-a-website-locally-with-html/run-a-website-locally-with-html.mdx b/projects/run-a-website-locally-with-html/run-a-website-locally-with-html.mdx
@@ -5,6 +5,7 @@ uid: H7lTRTjDJ0VbnaVUJdWSclFxwiH3
 datePublished: 2024-01-30
 description: Learn to run HTML locally on your computer, including with VS Code.
 header: https://raw.githubusercontent.com/codedex-io/projects/main/projects/run-a-website-locally-with-html/header.gif
+bannerImage: https://raw.githubusercontent.com/codedex-io/projects/main/projects/run-a-website-locally-with-html/header.gif
 published: live
 readTime: 25
 prerequisites: HTML fundamentals
diff --git a/projects/set-up-a-gui-with-java/set-up-a-gui-with-java.mdx b/projects/set-up-a-gui-with-java/set-up-a-gui-with-java.mdx
@@ -6,6 +6,7 @@ datePublished: 2025-05-22
 published: live
 description: Learn how to set up a graphical user interface with Java
 header: https://raw.githubusercontent.com/codedex-io/projects/main/projects/set-up-a-gui-with-java/header.png
+bannerImage: https://raw.githubusercontent.com/codedex-io/projects/main/projects/set-up-a-gui-with-java/header.png
 readTime: 30
 prerequisites: Java fundamentals
 versions: None
@@ -16,50 +17,49 @@ tags:
 
 ## Introduction
 
-GUI (Often pronounced "GOO-ee", but actually "Gee-Yuuu-Eye") stands for **graphical user interface**. 
+GUI (Often pronounced "GOO-ee", but actually "Gee-Yuuu-Eye") stands for **graphical user interface**.
 
-Back in the OLD, ANCIENT days of the 1980s, you had to be a knowledgeable tech person to really use computers, but thanks to graphical user interfaces, things like buttons, sliders, windows, and menus let your 5-year-old sibling pull up [Roblox](https://en.wikipedia.org/wiki/Roblox) on their iPad! 
+Back in the OLD, ANCIENT days of the 1980s, you had to be a knowledgeable tech person to really use computers, but thanks to graphical user interfaces, things like buttons, sliders, windows, and menus let your 5-year-old sibling pull up [Roblox](https://en.wikipedia.org/wiki/Roblox) on their iPad!
 
-<ImageZoom src="https://i.imgur.com/wfJ167k.png" /> 
+<ImageZoom src="https://i.imgur.com/wfJ167k.png" />{" "}
 
-You use GUIs every day, and most commonly, web-based GUIs! As you can imagine, ChatGPT is a GUI, as it lets you prompt without ever interacting with code or the command line. 
+You use GUIs every day, and most commonly, web-based GUIs! As you can imagine, ChatGPT is a GUI, as it lets you prompt without ever interacting with code or the command line.
 
-<ImageZoom src="https://i.imgur.com/TxEy5sO.png" /> 
+<ImageZoom src="https://i.imgur.com/TxEy5sO.png" />{" "}
 
 ## Setting Up
 
-In Java development, you're able to create GUIs for your programs without needing any additional downloads! All you need is the **Swing** GUI Toolkit import statement in the IDE of your choice, and you're able to get started immediately! 
-
+In Java development, you're able to create GUIs for your programs without needing any additional downloads! All you need is the **Swing** GUI Toolkit import statement in the IDE of your choice, and you're able to get started immediately!
 
 ```java
 import javax.swing.*;
 ```
 
-If you don't already have a Java IDE, Click [here](https://www.codedex.io/java/bonus/set-up-your-java-dev-env) to set yours up! 
+If you don't already have a Java IDE, Click [here](https://www.codedex.io/java/bonus/set-up-your-java-dev-env) to set yours up!
 
-Create a public class and add a main method to begin. 
+Create a public class and add a main method to begin.
 
-You'll want to add a `JFrame` object with a title, and use methods like `.setSize()`, `.setDefaultCloseOperation`, and `.setLayout` to set up your window screen. 
+You'll want to add a `JFrame` object with a title, and use methods like `.setSize()`, `.setDefaultCloseOperation`, and `.setLayout` to set up your window screen.
 
-Then, close your program with `frame.setVisible(true)` to see your interface! 
+Then, close your program with `frame.setVisible(true)` to see your interface!
 
 ```java
 public class SimpleGUI {
   public static void main(String[] args) {
-  
+
   // Create a new window (JFrame)
   JFrame frame = new JFrame("My First GUI");
   frame.setSize(300, 150);
   frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
   frame.setLayout(null); // absolute positioning
-  
-  
-  frame.setVisible(true); 
+
+
+  frame.setVisible(true);
   }
 }
 ```
 
-Take a look! 
+Take a look!
 
 <ImageZoom src="https://i.imgur.com/5C8igzQ.png" />
 
@@ -74,7 +74,7 @@ Take a look!
 - `JComboBox` A drop-down list (like a select box)
 - `JTextField` A single-line text input
 
-For example, we can add text fields, buttons, and labels by creating objects for each of them and then using `.setBounds` to set up the location of where these components would appear. 
+For example, we can add text fields, buttons, and labels by creating objects for each of them and then using `.setBounds` to set up the location of where these components would appear.
 
 ```java
 // text field
@@ -90,7 +90,7 @@ JLabel label = new JLabel("Hello!");
 label.setBounds(20, 60, 250, 25);
 ```
 
-Then, use the `.add()` to add these components to the frame, since we've only initialized them above. 
+Then, use the `.add()` to add these components to the frame, since we've only initialized them above.
 
 ```java
 // Add components to the frame
@@ -99,7 +99,7 @@ frame.add(button);
 frame.add(label);
 ```
 
-This is your result! 
+This is your result!
 
 <ImageZoom src="https://i.imgur.com/llQyEYk.png" />
 
@@ -112,25 +112,28 @@ button.addActionListener(e -> {
 });
 ```
 
-Now, we can see a name in our frame! 
+Now, we can see a name in our frame!
 
-<ImageZoom src="https://i.imgur.com/rF9mZMm.png" /> 
+<ImageZoom src="https://i.imgur.com/rF9mZMm.png" />{" "}
 
 ## Congratulations!
 
-Congrats! You've made your very own GUI with Java's Swing GUI Toolkit. This is just the beginning of the possibilities of what you can build with Java; Games, forms, and image displays are now possible with Swing! 
+Congrats! You've made your very own GUI with Java's Swing GUI Toolkit. This is just the beginning of the possibilities of what you can build with Java; Games, forms, and image displays are now possible with Swing!
+
+### More Resources
+
+Be sure to check out
 
-### More Resources 
-Be sure to check out 
 - [The Swing API Documentation](https://docs.oracle.com/javase/7/docs/api/javax/swing/package-summary.html) to see other methods and objects you can create for your GUI
 - [Setting up your local Java Development Environment](https://www.codedex.io/java/bonus/set-up-your-java-dev-env)
 
-Note that Swing is the default, built-in GUI Toolkit. Other toolkits like [JavaFX](https://openjfx.io/openjfx-docs/#install-javafx) exist with more functionality with their own SDK, or download package. 
+Note that Swing is the default, built-in GUI Toolkit. Other toolkits like [JavaFX](https://openjfx.io/openjfx-docs/#install-javafx) exist with more functionality with their own SDK, or download package.
 
 Other ideas include
+
 - Weather Farrenheit to Celcius converter
 - Math calculator
 - To-Do list
 - Music Player
 
-Share your projects with the team [@codedex_io](https://www.twitter.com/codedex_io) and me, [@exrlla](https://www.twitter.com/exrlla)! Let us know what you come up with! 
+Share your projects with the team [@codedex_io](https://www.twitter.com/codedex_io) and me, [@exrlla](https://www.twitter.com/exrlla)! Let us know what you come up with!
diff --git a/projects/view-weather-with-html-css-js/view-weather-with-html-css-js.mdx b/projects/view-weather-with-html-css-js/view-weather-with-html-css-js.mdx
@@ -5,6 +5,7 @@ uid: H7lTRTjDJ0VbnaVUJdWSclFxwiH3
 datePublished: 2023-07-21
 description: Learn to build a weather app with HTML, CSS, & JavaScript.
 header: https://raw.githubusercontent.com/codedex-io/projects/main/projects/view-weather-with-html-css-js/header.png
+bannerImage: https://raw.githubusercontent.com/codedex-io/projects/main/projects/view-weather-with-html-css-js/header.png
 published: live
 readTime: 60
 prerequisites: HTML/CSS, JavaScript
