diff --git a/main.js b/main.js index 5149431..fe68a51 100644 --- a/main.js +++ b/main.js @@ -90,97 +90,92 @@ print(greet("World"))
Start your Python journey today — write your first line of code and discover how simple it is to bring your ideas to life!
` -}, -{ +},{ id: 'article-3', - title: 'Getting Started with Git', - author: 'Example Student', - created: 'October 5, 2025', - excerpt: 'Learn the basics of Git version control and how to collaborate with your team effectively.', - image: 'https://images.unsplash.com/photo-1556075798-4825dfaaf498?w=800', - content: ` -Git is a distributed version control system that helps teams collaborate on code. It allows multiple developers to work on the same project simultaneously without conflicts.
- -Git provides several benefits:
-Here are some essential Git commands:
-Mastering Git is essential for modern software development and collaboration!
- ` - } -,{ - id: 'article-4', - title: 'Getting Started with Python', - author: 'Ayoub Karim', + title: 'Using AI to Build Web Programs with HTML, CSS, and JavaScript', + author: 'Mohamed Amine Aghbal', created: 'October 5, 2025', - excerpt: 'Discover the essentials of Python programming — from setup to core concepts — and learn why it remains one of the most popular languages in the world.', - image: 'https://images.unsplash.com/photo-1587620962725-abab7fe55159?w=800', + excerpt: 'Learn how to use artificial intelligence tools like ChatGPT and GitHub Copilot to create full web projects — combining HTML, CSS, and JavaScript efficiently.', + image: 'https://images.unsplash.com/photo-1677442136019-21780ecad995?w=800', content: ` -Python is a high-level, interpreted programming language known for its simplicity and readability. Created by Guido van Rossum and first released in 1991, Python emphasizes code clarity and productivity, making it ideal for beginners and professionals alike.
- -Python’s versatility and simplicity make it a great choice for a wide variety of applications:
-To start coding in Python, follow these simple steps:
-python --version
in your terminal or command prompt.Artificial Intelligence (AI) has revolutionized how we write code. Instead of starting from scratch, developers can now describe what they want — and AI tools can generate full HTML, CSS, and JavaScript programs in seconds.
-Before diving deep, it’s important to understand some fundamental Python concepts:
+def
.
-# Simple Python Example
-def greet(name):
- return f"Hello, {name}!"
+ How to Create a Simple Web App Using AI
+ Let’s walk through an example of how AI can help you build a small interactive web program that combines HTML, CSS, and JavaScript.
-print(greet("World"))
+ 1. Describe Your Goal
+ Start by clearly explaining what you want to the AI. For example:
+
+"Create a webpage with a button that changes the background color each time I click it."
- This small snippet defines a function called greet()
that takes a name as input and prints a personalized message.
+ 2. Generate the Code
+ The AI can produce a full example like this:
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Color Changer</title>
+ <style>
+ body {
+ text-align: center;
+ margin-top: 100px;
+ font-family: Arial, sans-serif;
+ transition: background 0.3s;
+ }
+ button {
+ padding: 10px 20px;
+ font-size: 16px;
+ cursor: pointer;
+ }
+ </style>
+</head>
+<body>
+ <h1>AI Web Program Demo</h1>
+ <button id="colorBtn">Change Color</button>
+
+ <script>
+ const btn = document.getElementById('colorBtn');
+ btn.addEventListener('click', () => {
+ const randomColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
+ document.body.style.backgroundColor = randomColor;
+ });
+ </script>
+</body>
+</html>
+
- Conclusion
- Python is one of the most accessible and powerful programming languages today. Whether you’re automating tasks, analyzing data, or building web apps, mastering Python opens the door to countless opportunities in tech.
+ 3. Customize and Learn
+ Once you get the AI-generated code, you can:
+
+ - Ask AI to explain each part of it
+ - Request style improvements (e.g., "make it gradient background")
+ - Combine more features like animations, forms, or API calls
+
- Start your Python journey today — write your first line of code and discover how simple it is to bring your ideas to life!
+ Tips for Working Effectively with AI
+
+ - Be specific in your prompts — describe what you want in detail.
+ - Iterate — refine your request if the first answer isn’t perfect.
+ - Learn from the AI’s code suggestions — treat it as a teacher, not just a tool.
+
+
+ Conclusion
+ AI doesn’t replace developers — it empowers them. By combining your creativity with AI tools, you can build beautiful and functional web projects faster than ever. Whether you’re just starting with HTML, CSS, and JS or already a pro, AI-assisted development is the future of web programming.
`
}
+
];
// Function to create article cards