Repository navigation
Expand file tree
/
Copy pathprojects.html
More file actions
96 lines (79 loc) · 4.22 KB
/
Copy pathprojects.html
File metadata and controls
96 lines (79 loc) · 4.22 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Projects - CodeSaba</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<a href="index.html">Home</a> |
<a href="html-basics.html">HTML Basics</a> |
<a href="css-basics.html">CSS Basics</a> |
<a href="javascript.html">javascript Basics</a> |
<a href="projects.html">Projects</a> |
<a href="resources.html">Resources</a>
</nav>
<section>
<h2>My Projects - CodeSaba</h2>
<p>These are my personal projects that I built while learning. I am sharing them so you can see my journey from HTML folder to Python projects.</p>
<!-- MY 4 PROJECTS -->
<h2 style="color: #D4AF37; margin-top: 40px;">My Work</h2>
<div class="container">
<div class="box">
<h3>1. HTML Folder - CodeSaba Website</h3>
<p>My first complete website with 5 pages. I used black background with golden #D4AF37 color theme. It has navigation, 6 boxes layout and footer.</p>
<code>Tech: HTML5 + CSS3 | Completed</code>
</div>
<div class="box">
<h3>2. AI Learning Hub</h3>
<p>A simple webpage where I collected all my AI learning notes, prompts and resources. It helps me revise AI concepts daily.</p>
<code>Tech: HTML + CSS | Completed</code>
</div>
<div class="box">
<h3>3. Simple Calculator - Python</h3>
<p>I made this in VS Code using Python. It can do addition, subtraction, multiplication and division. It runs in the terminal.</p>
<code>Tech: Python in VS Code | Completed</code>
</div>
<div class="box">
<h3>4. Quiz App - Python</h3>
<p>A fun quiz game made in VS Code using Python. It asks 5 questions and shows your score at the end. I used if-else and loops.</p>
<code>Tech: Python | Completed</code>
</div>
</div>
<!-- 5 MINI PROJECTS IDEAS FOR VISITORS -->
<h2 style="color: #D4AF37; margin-top: 60px;">5 Mini Projects Ideas For You</h2>
<p>As I promised on Home page (You will learn by making 5 mini projects that you can add to your GitHub portfolio) - Here are 5 easy projects you can start today:</p>
<div class="container">
<div class="box">
<h3>Idea 1: Personal Bio Page</h3>
<p>Make a one-page website about yourself. Add your name, photo, hobbies and your Made by tag at the bottom. Best for GitHub portfolio start.</p>
<code>Level: Beginner | Add to GitHub: Yes</code>
</div>
<div class="box">
<h3>Idea 2: My Favorite Foods List</h3>
<p>Create a list using <ul> <li> tags. Add 3 categories - Fruits, Fast Food, Drinks. Style it with golden boxes like CodeSaba.</p>
<code>Level: Beginner | Add to GitHub: Yes</code>
</div>
<div class="box">
<h3>Idea 3: Simple Product Card</h3>
<p>Make a product card like Daraz. One image, product name, price and a Buy Now button. Use Box Model - padding, margin, border.</p>
<code>Level: Easy | Add to GitHub: Yes</code>
</div>
<div class="box">
<h3>Idea 4: Timetable</h3>
<p>Make your weekly class or Namaz timetable using <table> tag. Style the table with black and golden border.</p>
<code>Level: Easy | Add to GitHub: Yes</code>
</div>
<div class="box">
<h3>Idea 5: Contact Form</h3>
<p>Make a contact form with Name, Email, Message inputs and a Submit button. This is the most important project for portfolio.</p>
<code>Level: Medium | Add to GitHub: Yes</code>
</div>
</div>
</section>
<!-- Footer -->
<footer> Made by Saba Liaquat Ali | CodeSaba 2026 </footer>
</body>
</html>