-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
425 lines (413 loc) · 20.5 KB
/
index.html
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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
<!DOCTYPE html>
<html lang="en">
<head>
<!-- ad sense tag-->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1733919132650092"
crossorigin="anonymous"></script>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-FBJL1SB5QM"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'G-FBJL1SB5QM');
</script>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="title" content="Coding-nation">
<meta name="description"
content="CodingNation is a comprehensive code tutorial website, providing beginner to advanced coding tutorials, coding exercises, and coding challenges to help you learn to code and build your skills.">
<meta name="keywords"
content="Coding-nation, CodeNation, HTML tutorials, python tutorials, css tutorials, c tutorials,React js tutorials, javascript tutorials,java tutorials, php tutorials, code editor, online code editor, Codebot,chatbot,quizzes">
<meta name="robots" content="index, follow">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="English">
<meta name="author" content="coding-nation.com">
<link rel="icon" type="image/png" sizes="32x32" href="../images/favicon.png">
<!-- Latest compiled and minified CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" rel="stylesheet">
<!--css link-->
<link rel="stylesheet" href="../Styles/style.css">
<!-- Custom CSS -->
<title>Home | Learn to Code and Build Your Skills</title>
<style>
</style>
</head>
<body>
<div class="chatbot-icon">
<a href="../codebot.html" target="_blank"><i class='bx bx-bot'></i></i>
</a>
</div>
<!--navigation bar-->
<header class="fixed-navbar">
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="../index.html">CodingNation</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto" id="navbarNavLinks">
<li class="nav-item">
<a class="nav-link" href="../index.html">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">Courses</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="../Python.html">Python</a>
</li>
<li>
<a class="dropdown-item" href="../React.html">React JS</a>
</li>
<li>
<a class="dropdown-item" href="../html.html">HTML</a>
</li>
<li><a class="dropdown-item" href="../css.html">CSS</a></li>
<li>
<a class="dropdown-item" href="../jascri.html">JavaScript</a>
</li>
<li><a class="dropdown-item" href="../cpro.html">C</a></li>
<li>
<a class="dropdown-item" href="../java.html">Java</a>
</li>
<li><a class="dropdown-item" href="../php.html">PHP</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Practice</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="../HTMLQuiz.html" target="_blank">HTML
Quiz</a>
</li>
<li>
<a class="dropdown-item" href="../CSSQuiz.html" target="_blank">CSS
Quiz</a>
</li>
<li>
<a class="dropdown-item" href="../JSQuiz.html" target="_blank">JavaScript
Quiz</a>
</li>
<li>
<a class="dropdown-item" href="../CQuiz.html" target="_blank">C Quiz</a>
</li>
<li>
<a class="dropdown-item" href="../JAVAQuiz.html" target="_blank">Java
Quiz</a>
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button"
data-bs-toggle="dropdown">Exercises</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="../HTMLExer.html" target="_blank">HTML Exercise</a>
</li>
<li>
<a class="dropdown-item" href="../CSSExer.html" target="_blank">CSS Exercise</a>
</li>
<li>
<a class="dropdown-item" href="../JsExer.html" target="_blank">JavaScript
Exercise</a>
</li>
<li>
<a class="dropdown-item" href="../CExer.html" target="_blank">C Exercise</a>
</li>
<li>
<a class="dropdown-item" href="../JAVAExer.html" target="_blank">Java Exercise</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="../codebot.html" target="_blank">CodeBot</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../Editor.html" target="_blank">Editor</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../About.html">About</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Hero Section -->
<section class="hero">
<div class="container">
<div class="row">
<div class="col-md-8 offset-md-2">
<h1 class="mb-4">
Welcome to <br />
CodingNation <br />Learn <span class="typed-text"></span><span class="cursor"> </span>
</h1>
<p class="lead mb-5">
Confused on which course to take? I have got you covered. Browse
courses and find out the best course for you. Its free!
CodingNation is my attempt to teach basics and those coding
techniques to people in short time which took me ages to learn.
</p>
<a href="#cards" class="btn btn-lg btn-outline-light">Learn More</a>
</div>
</div>
</div>
</section>
<!--boxes-->
<div class="wrapper" id="cards">
<h1>Learn courses</h1>
<div class="boxclass">
<div class="box1" id="box">
<img
src="https://th.bing.com/th/id/R.a81ec894994b107448ec84f07feb0b6f?rik=AGEVK6UyAjUuPQ&riu=http%3a%2f%2fclipart-library.com%2fimages_k%2fpython-logo-transparent%2fpython-logo-transparent-9.png&ehk=CDexlAZjyQXRqtsTUdrBS2HDF%2fTK%2fcsRifoPtWrK2Es%3d&risl=&pid=ImgRaw&r=0" />
<h3>Python</h3>
<p>Python is a versatile, high-level programming language that is widely used in data analysis, web
development,
and artificial intelligence.</p>
<a href="../Python" class="btn">Learn more</a>
</div>
<div class="box2" id="box">
<img
src="https://th.bing.com/th/id/R.78ba67a61ab755270020243dc580f5d2?rik=SbrmbcXYZ3snmA&riu=http%3a%2f%2fnews.mydrivers.com%2fImg%2f20110119%2f08581579.jpg&ehk=sVCAsjv1jKWJ9jqiAKbjaI9xvq0Bgve%2fYgGQ3%2bwY5Vg%3d&risl=&pid=ImgRaw&r=0"
alt="image for programming languages" />
<h3>HTML</h3>
<p>HTML describes the structure of a Web page and consists of elements that tell the browser how to display
the
content in a Webpage</p>
<a href="../html.html" class="btn">Learn more</a>
</div>
<div class="box3" id="box">
<img src="https://th.bing.com/th/id/OIP.3yIVq4yaJnIb40HUu7GZxAHaIc?pid=ImgDet&rs=1"
alt="image for programming languages" />
<h3>CSS</h3>
<p>CSS stands for Cascading Style Sheets. It is a style sheet language used for describing the presentation of
a document written in HTML or XML</p>
<a href="../css.html" class="btn">Learn more</a>
</div>
<div class="box4" id="box">
<img
src="https://th.bing.com/th/id/R.94ae2dcd4fa410811cab4e1fbb403340?rik=bpjuZM%2fu0R4w%2bA&riu=http%3a%2f%2fwww.acadecap.org%2fwp-content%2fuploads%2f2016%2f07%2fJavascript.png&ehk=G22t9IbHUOZ6vSyyhS6n9TiE7L%2fzQ%2b%2fWxL5ilvRfw84%3d&risl=&pid=ImgRaw&r=0"
alt="image for programming languages" />
<h3>JAVASCRIPT</h3>
<p>JavaScript is a client-side, object-based scripting language that is used to handle and validate
client-side data.JavaScript is a lightweight, OOP language.
It is a scripting language for web pages.</p>
<a href="../jascri.html" class="btn">Learn more</a>
</div>
<div class="box5" id="box">
<img src="https://th.bing.com/th/id/OIP.XkyKtJ0Kq-T0Mb-7F-YAVwHaHa?pid=ImgDet&rs=1"
alt="image for programming languages" />
<h3>React js</h3>
<p>React JS is a popular JavaScript library used to build dynamic and interactive user interfaces for web and
mobile applications. ReactJS is a JavaScript library used to build User Interfaces(UI). React is a library
</p>
<a href="../React.html" class="btn">Learn more</a>
</div>
<div class="box6" id="box">
<img src="https://logos-download.com/wp-content/uploads/2016/09/PHP_logo.png"
alt="image for programming languages" />
<h3>PHP</h3>
<p>PHP is a popular server-side scripting language used for web development. It's easy to learn, widely
supported, and powers many popular websites and applications. PHP Stands for “PHP: Hypertext
Preprocessor”.</p>
<a href="../php.html" class="btn">Learn more</a>
</div>
<div class="box7" id="box">
<img src="https://wallpapercave.com/wp/wp4521293.png" alt="image for programming languages" />
<h3>C</h3>
<p>C is a general-purpose programming language createdin 1972.
It is a very popular language, despite being old.
C is strongly associated with UNIX.</p>
<a href="../cpro.html" class="btn">Learn more</a>
</div>
<div class="box8" id="box">
<img src="https://th.bing.com/th/id/OIP.5ImHcNI4Zu0qHMzXHLHfagHaJ1?pid=ImgDet&rs=1"
alt="image for programming languages" />
<h3>JAVA</h3>
<p>Java is a class-based, object-oriented programming language that was first released in 1995. It is purely
Object Oriented Programming language </p>
<a href="../java.html" class="btn">Learn more</a>
</div>
<div class="box9" id="box">
<img src="https://sdrive-storage.s3.amazonaws.com/article/5f35b1cc3f3fc2/45415304/html-editor-app-logo.png" />
<h3>Try Our Code Editor</h3>
<p>Our website offers an free Code Editor to practice the code which you have learned in our website. You Can
Practice HTML, CSS and JAVASCRIPT. Practicing Can Improve Your knowledge</p>
<a href="../Editor.html" class="btn">Learn more</a>
</div>
<div class="box10" id="box">
<img src="https://th.bing.com/th/id/OIP.nr9egRRgNAloLwo6qh-rtQHaGA?pid=ImgDet&rs=1"
alt="image for programming languages" />
<h3>CodeBot</h3>
<p>Codingnation offers a free CodeBot. CodeBot generates the definitions and syntax for HTML, CSS,
JavaScript, C and Java - tags, keywords, Functions, Packages, libraries, and properties everthing!. It can
Generate Basic code for you!</p>
<a href="../codebot.html" class="btn">Learn more</a>
</div>
<div class="box11" id="box">
<img src="https://th.bing.com/th/id/OIP.6RGDI0BWoi2OiaFE5hceMQHaHa?pid=ImgDet&rs=1"
alt="image for programming languages" />
<h3>Quiz</h3>
<p>Our website provides quizzes to practice the code and enhance your knowledge.Our website provides HTML,
CSS, JAVASCRIPT, C AND JAVA Quizzes to practice.By Practicing through quizzes can help you to remember
easily</p>
<a href="../QuizHome.html" class="btn">Learn more</a>
</div>
<div class="box11" id="box">
<img src="https://cdn-icons-png.flaticon.com/512/1802/1802977.png"
alt="image for programming languages" />
<h3>Exercise</h3>
<p>Our website provides Exercise to practice the code and enhance your knowledge.Our website provides HTML,
CSS, JAVASCRIPT, C AND JAVA Exercise to practice.By Practicing through Exercise can help you to remember
easily</p>
<a href="../ExerciseHome.html" class="btn">Learn more</a>
</div>
<div class="box12" id="box">
<img src="https://th.bing.com/th/id/OIG.sHbMSAkkDSKD30zt8JlG?pid=ImgGn"
alt="image for programming languages" />
<h3>Projects</h3>
<p>Our Website Builders Created many other websites. You can check the other websites by clicking learn more. it Contains a Movie app Created using React app, a Simple Calculator, and Textutils.
</p>
<a href="./project.html" class="btn">Learn more</a>
</div>
</div>
</div>
<!-- <section id="whats-new">
<div class="container">
<div class="row">
<div class="col-md-6">
<h2>What's New Update in Our Website</h2>
<p class="">We are always striving to improve our website and add new features to help our users learn to
code
more effectively. Here are some of the latest updates:</p>
<ul>
<li>Added a CodeBot that generates definitions and syntax for HTML, CSS, JavaScript, C and Java - tags,
keywords, Functions, Packages, libraries, and properties</li>
<li>Added quizzes for HTML, CSS, JavaScript, C, and Java</li>
<li>Improved user interface for better user experience</li>
<li>Added new courses for PHP, React JS, and Python</li>
</ul>
</div>
<div class="col-md-6">
<img src="https://th.bing.com/th/id/OIG.DiQlEBLD.N0cuPWxYUX9?pcl=1b1a19&pid=ImgGn" alt="Website update">
</div>
</div>
</div>
</section>
<div class="container my-5 h-100 p-5 bg-body-secondary border rounded-3" id="jumb">
<button type="button" class="btn-close float-end" id="btn" aria-label="Close"></button>
<h2>New Update!</h2>
<p>The New Updates as of today:</p>
<ul class="updates">
<li>The code bot can now generate basic code examples with CSS for a specific design, as well as include
Bootstrap
CDN. This should make it even easier for developers to get started with their projects.</li>
<li>Our website builders have created a new site called Text Utils, which provides tools to manipulate text
in
various ways. The site is completely free to use. Some of the features include text case converter, line
remover, and word counter.</li>
<li>We've added a feedback section to our website, allowing users to give us their thoughts and
suggestions
on how we can improve the user experience. We value your feedback and are always looking for ways to
improve the
site to better meet your needs.</li>
</ul>
<p>We hope these updates make our services even more helpful and user-friendly. As always, please feel free to
reach out
to us if you have any questions or concerns.</p>
</div> -->
<!-- About Section -->
<section class="about" id="about">
<div class="container">
<div class="row">
<div class="col-md-12">
<h2 class="mb-5">About Me</h2>
</div>
</div>
<div class="row">
<div class="col-md-6">
<img src="../images/About image.png" alt=""
class="img-fluid rounded mb-5" />
</div>
<div class="col-md-6">
<p class="lead mb-5">
Welcome to our code tutorial website! We're two people who are passionate about coding and want to share
our
knowledge with the world. We've put in a lot of hard work to create this website and hope that you find it
useful.
</p>
<p class="lead mb-5">
"Unleash your coding potential with us - Where creativity meets functionality, and possibilities become
reality."
</p>
<p class="mb-5">
Our website offers a wide range of tutorials on various programming languages and tools. We cover
everything
from the basics to more advanced topics, so there's something for everyone. We also offer tips and tricks
to
help you become a better coder.
</p>
<a href="../About.html" class="btn btn-lg btn-primary">Learn More</a>
</div>
</div>
</div>
</section>
<div class="container-fluid">
<h1 class="H1">Feedback</h1>
<form id="feedback-form" action="https://formspree.io/f/xknakydd" method="POST">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" name="name" placeholder="Enter your name" required>
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" name="_replyto" placeholder="Enter your email address"
required>
</div>
<div class="form-group">
<label for="message">Message</label>
<textarea class="form-control" id="message" name="message" rows="5" placeholder="Enter your feedback"
required></textarea>
</div>
<button type="submit" class="btn btn-primary">Send Feedback</button>
</form>
</div>
<!-- Footer Section -->
<footer class="container-fluid text-center">
<hr>
<span class="bi bi-caret-up" onclick="topFunction()"></span>
<p>Copyright © 2023 CodingNation. All rights reserved. <br>
<p>Trademark ™ CodingNation <a href="https://www.coding-nation.com/">www.coding-nation.com</a></p>
</footer>
<script src="../Scripts&xml/script.js">
</script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function () {
$("#feedback-form").on("submit", function (event) {
event.preventDefault();
$.ajax({
url: $(this).attr("action"),
type: "POST",
data: $(this).serialize(),
dataType: "json",
success: function (response) {
alert("Message sent successfully!");
$("#feedback-form")[0].reset();
},
error: function (jqXHR, textStatus, errorThrown) {
alert("Error sending message: " + errorThrown);
}
});
});
});
</script>
</body>
</html>