-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
311 lines (291 loc) · 21.4 KB
/
index.html
File metadata and controls
311 lines (291 loc) · 21.4 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- SEO -->
<title>JavaScript From Scratch | Beginner-Friendly Programming Course</title>
<meta name="title" content="JavaScript From Scratch | Beginner-Friendly Programming Course" />
<meta name="description" content="Start your programming journey with JavaScript from scratch. A beginner-friendly course with practical projects to build real web apps. Enroll today!" />
<meta name="keywords" content="javascript, course, programming, from scratch, learn, web development, beginners" />
<meta name="author" content="Anderson Tovar" />
<meta name="robots" content="index, follow" />
<link rel="canonical" href="https://tusitio.com/javascript-from-scratch/" />
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://metatags.io/" />
<meta property="og:title" content="JavaScript From Scratch | Beginner-Friendly Programming Course" />
<meta property="og:description" content="Start your programming journey with JavaScript from scratch. A beginner-friendly course with practical projects to build real web apps. Enroll today!" />
<meta property="og:image" content="https://ik.imagekit.io/workamts/workamts.github.io_javascript-from-scratch_.png?updatedAt=1758823417922" />
<!-- X (Twitter) -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content="https://metatags.io/" />
<meta property="twitter:title" content="JavaScript From Scratch | Beginner-Friendly Programming Course" />
<meta property="twitter:description" content="Start your programming journey with JavaScript from scratch. A beginner-friendly course with practical projects to build real web apps. Enroll today!" />
<meta property="twitter:image" content="https://ik.imagekit.io/workamts/workamts.github.io_javascript-from-scratch_.png?updatedAt=1758823417922" />
<!-- Theme color for mobile browsers -->
<meta name="theme-color" content="#152025" />
<!-- Favicon -->
<link rel="icon" href="assets/icons/logo-js-course.png" type="image/png" />
<!-- Main CSS file -->
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="layout.css" />
</head>
<body>
<!-- Header -->
<header id="header" role="banner" aria-label="Main site header">
<div id="header-logo" tabindex="0">
<img id="header-logo-img" src="assets/icons/logo-js-course.png" alt="">
<span id="header-brand">JavaScript From Scratch</span>
</div>
<!-- Navigation Menu -->
<button id="header-menu-btn">☰</button>
<div id="menu-overlay"></div>
<nav id="header-menu">
<button id="header-menu-close">×</button>
<ul id="header-menu-list" role="menubar">
<li class="header__menu--item"><a href="#hero">Home</a></li>
<li class="header__menu--item"><a href="#why-section">Why JS?</a></li>
<li class="header__menu--item"><a href="#syllabus-section">Syllabus</a></li>
<li class="header__menu--item"><a href="#benefits-section">Benefits</a></li>
<li class="header__menu--item"><a href="#offer-section">Offer</a></li>
<li class="header__menu--item"><a href="#faq-section">FAQ</a></li>
<li class="header__menu--item"><a href="#testimonials-section">Testimonials</a></li>
<li class="header__menu--item"><a href="#footer">Contact & Info</a></li>
</ul>
</nav>
</header>
<!-- Main Content -->
<main role="main">
<!-- Hero Section -->
<section id="hero" aria-labelledby="hero-title">
<!-- Representative image of the course -->
<div id="hero-img" class="fade__scale" role="img" aria-label="Representative course image"></div>
<div id="hero-content">
<h1 id="hero-title" class="fade__scale" itemprop="name">JavaScript From Scratch: Your First Step in Programming</h1>
<p id="hero-description" class="fade__bottom" itemprop="description">Learn JavaScript in a practical and guided way, with no prior experience. Transform your future with the most in-demand programming skills.
</p>
<div id="hero-btn-group" class="fade__bottom">
<a id="hero-btn-primary" href="login-and-register/login-register.html" role="button" aria-label="Enroll now in the course">Enroll Now!</a>
<a id="hero-btn-secondary" href="#footer-content" role="button" aria-label="More information about the course">More Information</a>
</div>
</div>
</section>
<!-- Why Learn JavaScript? Section -->
<section id="why-section" aria-labelledby="why-title">
<h2 id="why-title" class="fade__bottom">Why Learn JavaScript?</h2>
<!-- Container for letters from the why section -->
<div id="why-content">
<div class="why__card fade__bottom" role="region" aria-label="Web Development">
<svg class="why__card--icon" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" data-icon="rocket" data-prefix="fal" aria-hidden="true" overflow="visible">
<path d="M188.9 372l-50.4-50.4c18.6-42.7 61.7-137.7 95.1-187C304.6 30.1 409 24.6 475.7 36.3c11.7 66.7 6.2 171.1-98.4 242c-49.4 33.5-145.5 75.6-188.4 93.7zm-79.9-62.8c-5.2 11.9-2.5 25.7 6.7 34.9l50.7 50.7c9.1 9.1 22.7 11.9 34.5 6.9c6.5-2.7 14.3-6 23-9.8L224 496c0 5.5 2.9 10.7 7.6 13.6s10.6 3.2 15.6 .7l101.5-50.7c21.7-10.8 35.4-33 35.4-57.2V312.1c4-2.5 7.7-4.9 11.3-7.3C516.1 222.9 520.1 100.9 506.7 28.1c-2.1-11.6-11.2-20.6-22.8-22.8C411.1-8.1 289.1-4.1 207.2 116.7c-2.4 3.6-4.9 7.3-7.3 11.3l-90.2 0c-24.2 0-46.4 13.7-57.2 35.4L1.7 264.8c-2.5 5-2.2 10.9 .7 15.6s8.1 7.6 13.6 7.6H118.5c-3.6 8-6.8 15.2-9.4 21.2zM256 470.1l0-92.5c30.3-13.7 65.4-30.3 96-47v71.7c0 12.1-6.8 23.2-17.7 28.6L256 470.1zM109.7 160h71.5c-16.9 30.7-34 65.8-48.1 96H41.9L81 177.7c5.4-10.8 16.5-17.7 28.6-17.7zM392 144a24 24 0 1 1 -48 0 24 24 0 1 1 48 0zM368 88a56 56 0 1 0 0 112 56 56 0 1 0 0-112z" fill="currentColor"></path>
</svg>
<div class="why__card--content">
<h3 class="why__card--title">Web Development</h3>
<p class="why__card--desc">JavaScript is the essential language for creating interactive and dynamic websites, present in almost every browser.</p>
</div>
</div>
<div class="why__card fade__bottom" role="region" aria-label="Mobile Applications">
<svg class="why__card--icon" viewBox="0 0 384 512" xmlns="http://www.w3.org/2000/svg" data-icon="mobile" data-prefix="fal" aria-hidden="true" overflow="visible">
<path d="M96 32C78.3 32 64 46.3 64 64V448c0 17.7 14.3 32 32 32H288c17.7 0 32-14.3 32-32V64c0-17.7-14.3-32-32-32H96zM32 64C32 28.7 60.7 0 96 0H288c35.3 0 64 28.7 64 64V448c0 35.3-28.7 64-64 64H96c-35.3 0-64-28.7-64-64V64zM160 400h64c8.8 0 16 7.2 16 16s-7.2 16-16 16H160c-8.8 0-16-7.2-16-16s7.2-16 16-16z" fill="currentColor"></path>
</svg>
<div class="why__card--content">
<h3 class="why__card--title">Mobile Applications</h3>
<p class="why__card--desc">With frameworks like React Native, JavaScript allows you to build native apps for iOS and Android.</p>
</div>
</div>
<div class="why__card fade__bottom" role="region" aria-label="Backend with Node.js">
<svg class="why__card--icon" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" data-icon="server" data-prefix="fal" aria-hidden="true" overflow="visible">
<path d="M64 64C46.3 64 32 78.3 32 96v64c0 17.7 14.3 32 32 32H448c17.7 0 32-14.3 32-32V96c0-17.7-14.3-32-32-32H64zM0 96C0 60.7 28.7 32 64 32H448c35.3 0 64 28.7 64 64v64c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96zM64 320c-17.7 0-32 14.3-32 32v64c0 17.7 14.3 32 32 32H448c17.7 0 32-14.3 32-32V352c0-17.7-14.3-32-32-32H64zM0 352c0-35.3 28.7-64 64-64H448c35.3 0 64 28.7 64 64v64c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V352zm304 32a24 24 0 1 1 48 0 24 24 0 1 1 -48 0zm24-280a24 24 0 1 1 0 48 24 24 0 1 1 0-48zm56 280a24 24 0 1 1 48 0 24 24 0 1 1 -48 0zm24-280a24 24 0 1 1 0 48 24 24 0 1 1 0-48z" fill="currentColor"></path>
</svg>
<div class="why__card--content">
<h3 class="why__card--title">Backend with Node.js</h3>
<p class="why__card--desc">Expand your horizons and develop robust servers and APIs using JavaScript on the server side.</p>
</div>
</div>
</div>
</section>
<!-- Detailed Syllabus Section -->
<section id="syllabus-section" aria-labelledby="syllabus-title">
<!-- Element that will contain the background of the section -->
<div id="syllabus-anchor">
<div id="syllabus-content">
<!-- Curriculum heading -->
<h2 id="syllabus-title" class="fade__bottom">Course Content: Detailed Syllabus</h2>
<p id="syllabus-intro" class="fade__bottom">Our "JavaScript From Scratch" program is meticulously designed to guide you step by step, from the basics to practical projects.</p>
<!-- Modular card container -->
<div id="syllabus-list">
<div class="syllabus__module fade__right" role="region" aria-label="Module 1: Programming Fundamentals">
<h4 class="syllabus__module--title">Module 1: Programming Fundamentals</h4>
<ul class="syllabus__module--list">
<li class="syllabus__module--item">Introduction to programming logic</li>
<li class="syllabus__module--item">Variables and data types</li>
<li class="syllabus__module--item">Operators and expressions</li>
</ul>
</div>
<div class="syllabus__module fade__right" role="region" aria-label="Module 2: Flow Control and Functions">
<h4 class="syllabus__module--title">Module 2: Flow Control and Functions</h4>
<ul class="syllabus__module--list">
<li class="syllabus__module--item">Conditionals (if/else, switch)</li>
<li class="syllabus__module--item">Loops (for, while)</li>
<li class="syllabus__module--item">Creating and using functions</li>
</ul>
</div>
<div class="syllabus__module fade__right" role="region" aria-label="Module 3: DOM Manipulation">
<h4 class="syllabus__module--title">Module 3: DOM Manipulation</h4>
<ul class="syllabus__module--list">
<li class="syllabus__module--item">Selecting HTML elements</li>
<li class="syllabus__module--item">Modifying content and styles</li>
<li class="syllabus__module--item">Event handling</li>
</ul>
</div>
<div class="syllabus__module fade__right" role="region" aria-label="Module 4: Asynchronous Programming">
<h4 class="syllabus__module--title">Module 4: Asynchronous Programming</h4>
<ul class="syllabus__module--list">
<li class="syllabus__module--item">Promises and Async/Await</li>
<li class="syllabus__module--item">Fetch API for data consumption</li>
<li class="syllabus__module--item">Error handling</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- Exclusive Benefits Section -->
<section id="benefits-section" aria-labelledby="benefits-title">
<div id="benefits-content">
<h2 id="benefits-title" class="fade__bottom">Exclusive Course Benefits</h2>
<div id="benefits-container">
<div id="benefits-list">
<p id="benefits-intro" class="fade__bottom">With "JavaScript From Scratch", you will not only learn to program, but also benefit from a support ecosystem that enhances your learning.</p>
<ul class="benefits__ul">
<li class="benefits__item fade__bottom"><b>Accredited Certificate:</b> Get a certification that validates your new skills.</li>
<li class="benefits__item fade__bottom"><b>Lifetime Access:</b> Review the course material whenever you want, forever!</li>
<li class="benefits__item fade__bottom"><b>Direct Support:</b> Solve your doubts with our expert instructors.</li>
<li class="benefits__item fade__bottom"><b>Constant Updates:</b> Content always up to date with the latest trends.</li>
</ul>
</div>
<img id="benefits-img" class="fade__left" src="https://cdn.gamma.app/kn6b920lxo5p1i3/generated-images/_Oru4MrDV3SIhipMgMbAV.jpg" alt="JavaScript Certificate" loading="lazy">
</div>
</div>
</section>
<!-- Special Offer Section -->
<section id="offer-section" aria-labelledby="offer-title">
<div id="offer-content">
<h2 id="offer-title" class="fade__bottom">Special Limited Time Offer</h2>
<p id="offer-intro" class="fade__bottom">Take advantage of this unique opportunity to start your programming career with minimal investment. Don't miss out!</p>
<!-- Bidding table -->
<table id="offer-table" class="fade__scale" aria-describedby="offer-title">
<tr>
<th class="offer__table--header">Modality</th>
<th class="offer__table--header">Regular Price</th>
<th class="offer__table--header">Offer Price</th>
</tr>
<tr>
<td class="offer__table--cell">Full Course</td>
<td class="offer__table--cell"><s>$199</s></td>
<td class="offer__table--cell"><b>$99</b></td>
</tr>
<tr>
<td class="offer__table--cell">Course + Mentoring</td>
<td class="offer__table--cell"><s>$299</s></td>
<td class="offer__table--cell"><b>$149</b></td>
</tr>
</table>
<p id="offer-note">This offer is valid only for the first 50 enrolled. Secure your spot today!</p>
</div>
</section>
<!-- FAQ Section -->
<section id="faq-section" aria-labelledby="faq-title">
<div id="faq-content">
<h2 id="faq-title" class="fade__bottom">Frequently Asked Questions (FAQ)</h2>
<!-- List of faq-->
<div id="faq-list">
<div class="faq__item fade__bottom" role="region" aria-label="Do I need prior experience?">
<h4 class="faq__item--title">Do I need prior experience?</h4>
<p class="faq__item--desc">No, the course is designed for complete beginners, with no programming knowledge required.</p>
</div>
<div class="faq__item fade__bottom" role="region" aria-label="How long is the course?">
<h4 class="faq__item--title">How long is the course?</h4>
<p class="faq__item--desc">You can complete it at your own pace. The main content takes about 40 hours, but access is for life.</p>
</div>
<div class="faq__item fade__bottom" role="region" aria-label="What support do you offer?">
<h4 class="faq__item--title">What support do you offer?</h4>
<p class="faq__item--desc">We offer direct instructor support through forums and live Q&A sessions.</p>
</div>
<div class="faq__item fade__bottom" role="region" aria-label="Are there practical projects?">
<h4 class="faq__item--title">Are there practical projects?</h4>
<p class="faq__item--desc">Yes, each module includes exercises and a final project to apply what you have learned.</p>
</div>
</div>
</div>
</section>
<!-- Testimonials Section -->
<section id="testimonials-section" aria-labelledby="testimonials-title">
<div id="testimonials-content">
<h2 id="testimonials-title" class="fade__bottom">What Our Students Say</h2>
<div id="testimonials-container">
<img id="testimonials-img" class="fade__scale" src="https://cdn.gamma.app/kn6b920lxo5p1i3/generated-images/bqI_cLB9i7cH9ewkpMa6C.jpg" alt="Happy student" loading="lazy">
<div id="testimonials-text">
<p id="testimonials-blockquote" class="fade__left">"JavaScript From Scratch exceeded my expectations. I never thought I could program, but the practical methodology and constant support made me achieve it. Now I'm building my own web portfolio!"</p>
<span id="testimonials-cite" class="fade__right">— Ana García, Junior Developer</span>
</div>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer id="footer" role="contentinfo" aria-label="Site footer">
<div id="footer-content">
<!-- Final CTA -->
<section id="footer-cta" aria-labelledby="cta-title" aria-describedby="cta-desc">
<h2 id="cta-title">Transform Your Future Today!</h2>
<p id="cta-desc">Don't wait any longer to acquire one of the most in-demand skills in tech. Start your journey with <strong>"JavaScript From Scratch"</strong>.</p>
<div id="cta-btn-group" role="group" aria-label="Call to action buttons">
<a id="cta-btn-primary" href="login-and-register/login-register.html" role="button" aria-label="Enroll now and start the course">Enroll Now</a>
<a id="cta-btn-secondary" href="contact/contact.html" role="button" aria-label="Contact us for more information">Contact Us</a>
</div>
</section>
<!-- Additional information -->
<section id="footer-info" aria-label="Additional Information">
<!-- Branding -->
<div id="footer-brand" aria-label="Brand information">
<h3>JavaScript From Scratch</h3>
<p>Your journey into web development starts here.</p>
</div>
<!-- Free resources -->
<nav id="footer-resources" aria-labelledby="footer-resources-title">
<h4 id="footer-resources-title">Free Resources</h4>
<ul id="footer-resources-list">
<li id="footer-resources-item"><a href="#" target="_blank" rel="noopener noreferrer" aria-label="Read our developer blog">Developer Blog</a></li>
<li id="footer-resources-item"><a href="#" target="_blank" rel="noopener noreferrer" aria-label="View JavaScript Cheatsheet" >JavaScript Cheatsheet</a></li>
<li id="footer-resources-item"><a href="#" target="_blank" rel="noopener noreferrer" aria-label="Subscribe to our weekly newsletter">Weekly Newsletter</a>
</li>
</ul>
</nav>
<!-- Support -->
<address id="footer-support" aria-labelledby="footer-support-title">
<h4 id="footer-support-title">Support Hours</h4>
<p id="footer-support-text">Mon–Fri: 9am – 6pm (GMT-5)</p>
<div id="footer-contact">
<span>Email:</span>
<a href="mailto:info@jsfromscratch.com" aria-label="Send email to info at JS From Scratch">info@jsfromscratch.com</a>
</div>
<div id="footer-contact">
<span>WhatsApp:</span>
<a href="https://wa.me/1234567890" target="_blank" rel="noopener noreferrer" aria-label="Chat on WhatsApp">+1 234 567 890</a>
</div>
</address>
</section>
<!-- Credits -->
<div id="footer-credits" aria-label="Footer credits">
<p>© 2025 <strong>JavaScript From Scratch</strong>. All rights reserved.</p>
<p>Designed and developed by <strong>Anderson Tovar – Workamts</strong>.</p>
</div>
</div>
</footer>
<!-- Scripts -->
<script src="main.js"></script>
</body>
</html>