Skip to content

Commit a8faff9

Browse files
AnaskaysarAnaskaysar
committed
Updates
1 parent c3f01fd commit a8faff9

File tree

2 files changed

+99
-12
lines changed

2 files changed

+99
-12
lines changed

‎index.html‎

Lines changed: 65 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,38 @@
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>Simple JavaScript Projects</title>
6+
<title>Simple JavaScript Projects | Learn by Building</title>
7+
<meta
8+
name="description"
9+
content="A growing hub of beginner-friendly JavaScript projects focused on hands-on DOM manipulation and interactivity. Learn by doing."
10+
/>
11+
<meta name="author" content="Anaskaysar" />
12+
<meta
13+
name="keywords"
14+
content="JavaScript, DOM, projects, practice, beginner, learn coding, JS exercises"
15+
/>
16+
<meta name="robots" content="index, follow" />
17+
18+
<!-- Open Graph -->
19+
<meta property="og:title" content="Simple JavaScript Projects" />
20+
<meta
21+
property="og:description"
22+
content="Practice DOM manipulation and JS interactivity with beginner-friendly projects."
23+
/>
24+
<meta property="og:type" content="website" />
25+
<meta
26+
property="og:url"
27+
content="https://anaskaysar.github.io/Simple_JavaScript_Projects/"
28+
/>
29+
30+
<!-- Twitter card -->
31+
<meta name="twitter:card" content="summary" />
32+
<meta name="twitter:title" content="Simple JavaScript Projects" />
33+
<meta
34+
name="twitter:description"
35+
content="Practice JavaScript through hands-on beginner projects. Learn DOM, events, logic."
36+
/>
37+
738
<link rel="stylesheet" href="style.css" />
839
</head>
940
<body>
@@ -12,8 +43,7 @@ <h1>🧪 Simple JS Projects</h1>
1243
<p>Practice projects to sharpen JavaScript + DOM skills</p>
1344
</header>
1445

15-
<main class="grid">
16-
<!-- Project 1 -->
46+
<main class="grid" aria-label="Project List">
1747
<div class="project-card">
1848
<h2>🎯 Guess My Number</h2>
1949
<p>A number guessing game using core DOM manipulation.</p>
@@ -28,20 +58,43 @@ <h2>🎯 Guess My Number</h2>
2858
>
2959
</div>
3060
</div>
31-
32-
<!-- Add more projects as you go -->
33-
34-
<!-- <div class="project-card">
35-
<h2>📘 Project Title</h2>
36-
<p>Short project description goes here.</p>
61+
<div class="project-card">
62+
<h2>🎯 Guess My Number</h2>
63+
<p>A number guessing game using core DOM manipulation.</p>
3764
<div class="buttons">
38-
<a href="./02_ProjectFolder/index.html" target="_blank">Live Demo</a>
39-
<a href="GitHub link" target="_blank">Source</a>
65+
<a href="./01_Guess_My_Number/index.html" target="_blank"
66+
>Live Demo</a
67+
>
68+
<a
69+
href="https://github.com/Anaskaysar/Simple_JavaScript_Projects/tree/main/01_Guess_My_Number"
70+
target="_blank"
71+
>Source</a
72+
>
4073
</div>
4174
</div>
42-
-->
4375
</main>
4476

77+
<section class="credits" aria-label="Project Credits">
78+
<h3>📚 Credits & Inspiration</h3>
79+
<ul>
80+
<li>
81+
Project idea: <strong>Guess My Number</strong> based on
82+
<a href="https://javascript.info" target="_blank">JavaScript.info</a>
83+
and
84+
<a
85+
href="https://www.udemy.com/course/the-complete-javascript-course/"
86+
target="_blank"
87+
>The Complete JS Course by Jonas Schmedtmann</a
88+
>
89+
</li>
90+
<li>
91+
Adapted, customized, and extended by <strong>Anaskaysar</strong> for
92+
learning purposes.
93+
</li>
94+
<li>More project credits will be listed as the collection grows.</li>
95+
</ul>
96+
</section>
97+
4598
<footer>
4699
<p>
47100
Created by <strong>Anaskaysar</strong> |

‎style.css‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,40 @@ main.grid {
8383
.buttons a:hover {
8484
background-color: #4ea336;
8585
}
86+
/* Styling of credits */
87+
.credits {
88+
max-width: 1000px;
89+
margin: 3rem auto;
90+
padding: 1rem;
91+
font-size: 0.95rem;
92+
color: #444;
93+
background: #fff;
94+
border-radius: 8px;
95+
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
96+
}
97+
98+
.credits h3 {
99+
margin-bottom: 0.5rem;
100+
font-size: 1.1rem;
101+
color: #222;
102+
}
103+
104+
.credits ul {
105+
padding-left: 1.2rem;
106+
}
107+
108+
.credits li {
109+
margin-bottom: 0.6rem;
110+
}
111+
112+
.credits a {
113+
color: #60b347;
114+
text-decoration: none;
115+
}
116+
117+
.credits a:hover {
118+
text-decoration: underline;
119+
}
86120

87121
footer {
88122
text-align: center;

0 commit comments

Comments
 (0)