{{ message }}
Repository navigation
Expand file tree
/
Copy pathlearn.html
More file actions
303 lines (291 loc) · 17.3 KB
/
Copy pathlearn.html
File metadata and controls
303 lines (291 loc) · 17.3 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Free Web Development Courses — HTML, CSS & JS | Deoit</title>
<meta name="title" content="Free Web Development Courses — HTML, CSS & JavaScript | Deoit">
<meta name="description" content="Learn web development for free with 52 interactive lessons in HTML, CSS, and JavaScript. Practice code in the browser with no downloads or setup needed.">
<meta name="keywords" content="learn web development, web development tutorial, learn HTML, learn CSS, learn JavaScript, learn React, learn Node.js, HTML tutorial, CSS tutorial, JavaScript tutorial, React tutorial, online code editor, web development course, interactive coding lessons">
<meta name="author" content="Majed Qandeel">
<meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1">
<meta name="language" content="English">
<meta name="revisit-after" content="3 days">
<meta name="theme-color" content="#0d0d0d">
<meta name="color-scheme" content="dark">
<meta name="google-site-verification" content="AJuuF0rsaIv06P5hV9rmSIwmJUU99Laf3kELRWwfoqo" />
<meta name="msvalidate.01" content="D4B611868B4A3969DF885DDAB7189672" />
<meta property="og:type" content="website">
<meta property="og:url" content="https://deoit.js.org/learn">
<meta property="og:site_name" content="Deoit">
<meta property="og:title" content="Free Web Development Courses - Learn HTML, CSS, JavaScript | Deoit">
<meta property="og:description" content="52 free interactive lessons to master web development. HTML, CSS, and JavaScript — practice in the browser.">
<meta property="og:image" content="https://deoit.js.org/og-image.png">
<meta property="og:image:width" content="512">
<meta property="og:image:height" content="512">
<meta property="og:locale" content="en_US">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Free Web Development Courses | Deoit">
<meta name="twitter:description" content="52 free lessons to master HTML, CSS, and JavaScript. Practice in the browser.">
<meta name="twitter:image" content="https://deoit.js.org/og-image.png">
<link rel="alternate" href="https://deoit.js.org/learn" hreflang="en">
<link rel="alternate" href="https://deoit.js.org/learn" hreflang="x-default">
<link rel="canonical" href="https://deoit.js.org/learn">
<link rel="icon" type="image/png" href="/favicon-48.png" sizes="48x48">
<link rel="icon" type="image/png" href="/favicon-96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/favicon-144.png" sizes="144x144">
<link rel="icon" type="image/png" href="/favicon-192.png" sizes="192x192">
<link rel="apple-touch-icon" href="logo.png">
<link rel="preload" href="logo.png" as="image" fetchpriority="high">
<link rel="preload" href="css/learn.css" as="style">
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" as="style">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" media="print" onload="this.media='all'">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="css/learn.css">
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "CollectionPage",
"name": "Free Web Development Courses - Learn HTML, CSS & JavaScript",
"description": "52 free interactive lessons to master web development. HTML (25 lessons), CSS (15 lessons), and JavaScript (12 lessons).",
"url": "https://deoit.js.org/learn",
"isPartOf": {
"@type": "WebSite",
"name": "Deoit",
"url": "https://deoit.js.org"
},
"mainEntity": {
"@type": "ItemList",
"name": "Web Development Courses",
"numberOfItems": 3,
"itemListElement": [
{
"@type": "Course",
"name": "HTML Course",
"description": "Learn HTML from scratch — elements, attributes, forms, tables, semantic markup, accessibility, and page structure. 25 comprehensive lessons.",
"url": "https://deoit.js.org/learn-html",
"provider": {"@type": "Organization", "name": "Deoit"},
"educationalLevel": "Beginner",
"numberOfCredits": 25,
"inLanguage": "en",
"isAccessibleForFree": true,
"hasCourseInstance": {
"@type": "CourseInstance",
"courseMode": "online",
"courseWorkload": "PT25H"
}
},
{
"@type": "Course",
"name": "CSS Course",
"description": "Master CSS — selectors, box model, flexbox, grid, responsive design, animations, variables, and typography. 15 detailed lessons.",
"url": "https://deoit.js.org/learn-css",
"provider": {"@type": "Organization", "name": "Deoit"},
"educationalLevel": "Beginner to Intermediate",
"numberOfCredits": 15,
"inLanguage": "en",
"isAccessibleForFree": true
},
{
"@type": "Course",
"name": "JavaScript Course",
"description": "Learn JavaScript — variables, data types, functions, DOM, events, async/await, fetch API, classes, modules, and closures. 12 in-depth lessons.",
"url": "https://deoit.js.org/learn-js",
"provider": {"@type": "Organization", "name": "Deoit"},
"educationalLevel": "Beginner to Advanced",
"numberOfCredits": 12,
"inLanguage": "en",
"isAccessibleForFree": true
}
]
}
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{"@type": "ListItem", "position": 1, "name": "Home", "item": "https://deoit.js.org/"},
{"@type": "ListItem", "position": 2, "name": "Learn", "item": "https://deoit.js.org/learn"}
]
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [
{
"@type": "Question",
"name": "Is Deoit really free?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Yes! Deoit is 100% free. No signup required. You get a full code editor with HTML, CSS, and JavaScript support, plus 52 free web development lessons."
}
},
{
"@type": "Question",
"name": "Can I learn web development from scratch on Deoit?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Absolutely. Deoit offers 52 structured lessons covering HTML, CSS, and JavaScript. Each lesson includes code examples you can practice directly in the browser."
}
},
{
"@type": "Question",
"name": "What is the best order to learn web development?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Start with HTML (page structure), then CSS (styling and layout), then JavaScript (interactivity). After that, learn React for modern UIs and Node.js for server-side development. Don't forget Git and terminal basics along the way."
}
},
{
"@type": "Question",
"name": "Do I need to install anything to use Deoit?",
"acceptedAnswer": {
"@type": "Answer",
"text": "No. Deoit runs entirely in your web browser. No downloads, no installation. Just open the editor and start coding."
}
},
{
"@type": "Question",
"name": "How many lessons does Deoit offer?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Deoit currently offers 52 free lessons: 25 HTML lessons, 15 CSS lessons, and 12 JavaScript lessons."
}
}
]
}
</script>
<script defer src="https://cloud.umami.is/script.js" data-website-id="e41f2e20-74af-4d7a-a757-5eed0348d629"></script>
<script src="js/seo-engine.js"></script>
</head>
<body>
<nav class="l-nav">
<a href="/" class="logo"><img src="logo.png" alt="Deoit"><span>Deoit</span></a>
<div class="links">
<a href="/">Home</a>
<a href="pages/editor">Editor</a>
<a href="learn" class="active">Learn</a>
<a href="/#contact">Contact</a>
</div>
<a href="pages/editor" class="nav-btn">Open Editor</a>
</nav>
<div class="l-hero">
<h1>Master Web Development</h1>
<p>Interactive lessons and hands-on exercises covering HTML, CSS, JavaScript, React, Node.js, and developer tools. All in your browser.</p>
<div style="display:flex;justify-content:center;gap:10px;margin-top:28px;flex-wrap:wrap;">
<a href="pages/editor" style="display:inline-flex;align-items:center;gap:6px;padding:10px 24px;background:rgba(255,255,255,.92);color:#0d0d0d;border-radius:8px;font-size:14px;font-weight:700;transition:all .25s;">Start Coding</a>
<a href="#courses" style="display:inline-flex;align-items:center;gap:6px;padding:10px 24px;border:1px solid rgba(255,255,255,.1);border-radius:8px;font-size:14px;font-weight:600;color:var(--text-secondary);transition:all .2s;">Browse Courses</a>
</div>
</div>
<div class="l-courses" id="courses">
<a href="learn-html" class="l-card">
<div class="l-card-icon" style="background:rgba(228,77,38,.1)">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path fill="#E44D26" d="M1.5 0h21l-1.91 21.563L11.977 24l-8.564-2.438L1.5 0zm7.031 9.75l-.232-2.718 10.059.003.23-2.622L5.412 4.41l.698 8.01h9.126l-.326 3.426-2.91.804-2.955-.81-.188-2.11H6.248l.33 4.171L12 19.351l5.379-1.443.744-8.157H8.531z"/></svg>
</div>
<h3>HTML</h3>
<p>Structure and semantics of web pages</p>
<span class="l-card-meta">25 lessons</span>
</a>
<a href="learn-css" class="l-card">
<div class="l-card-icon" style="background:rgba(21,114,182,.1)">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path fill="#264DE4" d="M0 0v20.16A3.84 3.84 0 0 0 3.84 24h16.32A3.84 3.84 0 0 0 24 20.16V3.84A3.84 3.84 0 0 0 20.16 0Zm14.256 13.08c1.56 0 2.28 1.08 2.304 2.64h-1.608c.024-.288-.048-.6-.144-.84-.096-.192-.288-.264-.552-.264-.456 0-.696.264-.696.84-.024.576.288.888.768 1.08.72.288 1.608.744 1.92 1.296q.432.648.432 1.656c0 1.608-.912 2.592-2.496 2.592-1.656 0-2.4-1.032-2.424-2.688h1.68c0 .792.264 1.176.792 1.176.264 0 .456-.072.552-.24.192-.312.24-1.176-.048-1.512-.312-.408-.912-.6-1.32-.816q-.828-.396-1.224-.936c-.24-.36-.36-.888-.36-1.536 0-1.44.936-2.472 2.424-2.448m5.4 0c1.584 0 2.304 1.08 2.328 2.64h-1.608c0-.288-.048-.6-.168-.84-.096-.192-.264-.264-.528-.264-.48 0-.72.264-.72.84s.288.888.792 1.08c.696.288 1.608.744 1.92 1.296.264.432.408.984.408 1.656.024 1.608-.888 2.592-2.472 2.592-1.68 0-2.424-1.056-2.448-2.688h1.68c0 .744.264 1.176.792 1.176.264 0 .456-.072.552-.24.216-.312.264-1.176-.048-1.512-.288-.408-.888-.6-1.32-.816-.552-.264-.96-.576-1.2-.936s-.36-.888-.36-1.536c-.024-1.44.912-2.472 2.4-2.448m-11.031.018c.711-.006 1.419.198 1.839.63.432.432.672 1.128.648 1.992H9.336c.024-.456-.096-.792-.432-.96-.312-.144-.768-.048-.888.24-.12.264-.192.576-.168.864v3.504c0 .744.264 1.128.768 1.128a.65.65 0 0 0 .552-.264c.168-.24.192-.552.168-.84h1.776c.096 1.632-.984 2.712-2.568 2.688-1.536 0-2.496-.864-2.472-2.472v-4.032c0-.816.24-1.44.696-1.848.432-.408 1.146-.624 1.857-.63"/></svg>
</div>
<h3>CSS</h3>
<p>Styling, layout, and responsive design</p>
<span class="l-card-meta">15 lessons</span>
</a>
<a href="learn-js" class="l-card">
<div class="l-card-icon" style="background:rgba(247,223,30,.08)">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path fill="#F7DF1E" d="M0 0h24v24H0V0zm22.034 18.276c-.175-1.095-.888-2.015-3.003-2.873-.736-.345-1.554-.585-1.797-1.14-.091-.33-.105-.51-.046-.705.15-.646.915-.84 1.515-.66.39.12.75.42.976.9 1.034-.676 1.034-.676 1.755-1.125-.27-.42-.404-.601-.586-.78-.63-.705-1.469-1.065-2.834-1.034l-.705.089c-.676.165-1.32.525-1.71 1.005-1.14 1.291-.811 3.541.569 4.471 1.365 1.02 3.361 1.244 3.616 2.205.24 1.17-.87 1.545-1.966 1.41-.811-.18-1.26-.586-1.755-1.336l-1.83 1.051c.21.48.45.689.81 1.109 1.74 1.756 6.09 1.666 6.871-1.004.029-.09.24-.705.074-1.65l.046.067zm-8.983-7.245h-2.248c0 1.938-.009 3.864-.009 5.805 0 1.232.063 2.363-.138 2.711-.33.689-1.18.601-1.566.48-.396-.196-.597-.466-.83-.855-.063-.105-.11-.196-.127-.196l-1.825 1.125c.305.63.75 1.172 1.324 1.517.855.51 2.004.675 3.207.405.783-.226 1.458-.691 1.811-1.411.51-.93.402-2.07.397-3.346.012-2.054 0-4.109 0-6.179l.004-.056z"/></svg>
</div>
<h3>JavaScript</h3>
<p>Interactivity, logic, and APIs</p>
<span class="l-card-meta">12 lessons</span>
</a>
</div>
<div style="height:40px"></div>
<div class="l-seo-content">
<h2>Why Learn Web Development with Deoit?</h2>
<p>Deoit combines a powerful browser-based IDE with 52 interactive lessons. Structured courses cover HTML, CSS, and JavaScript — all accessible instantly with zero setup.</p>
<div style="display:flex;gap:12px;flex-wrap:wrap;margin:20px 0 32px;">
<span style="display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:100px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);font-size:13px;color:var(--text-secondary);">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
100% Free
</span>
<span style="display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:100px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);font-size:13px;color:var(--text-secondary);">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
Browser-based
</span>
<span style="display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:100px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);font-size:13px;color:var(--text-secondary);">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
No downloads
</span>
<span style="display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:100px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);font-size:13px;color:var(--text-secondary);">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
Code examples included
</span>
</div>
<h2>What You'll Learn</h2>
<div class="l-seo-grid">
<div class="l-seo-item">
<h3>HTML — The Foundation</h3>
<p>Master the building blocks of every website. Learn elements, attributes, forms, tables, semantic HTML5, accessibility, and SEO best practices across 25 comprehensive lessons.</p>
<a href="learn-html">Start Learning HTML →</a>
</div>
<div class="l-seo-item">
<h3>CSS — The Design</h3>
<p>Transform plain HTML into beautiful designs. Master the box model, Flexbox, CSS Grid, responsive design with media queries, animations, variables, and modern typography in 15 lessons.</p>
<a href="learn-css">Start Learning CSS →</a>
</div>
<div class="l-seo-item">
<h3>JavaScript — The Power</h3>
<p>Make your pages interactive and dynamic. Learn variables, functions, DOM manipulation, events, async/await, fetch API, classes, modules, and closures in 12 in-depth lessons.</p>
<a href="learn-js">Start Learning JavaScript →</a>
</div>
</div>
<h2>Frequently Asked Questions</h2>
<div class="l-faq">
<details>
<summary>Is Deoit really free?</summary>
<p>Yes! Deoit is 100% free. No signup required. You get a full code editor with HTML, CSS, and JavaScript support, plus 52 free web development lessons.</p>
</details>
<details>
<summary>Can I learn web development from scratch?</summary>
<p>Absolutely. Deoit offers 52 structured lessons covering HTML, CSS, and JavaScript. Each lesson includes code examples you can practice directly in the browser.</p>
</details>
<details>
<summary>What's the best order to learn?</summary>
<p>Start with HTML (structure), then CSS (styling), then JavaScript (interactivity). After that, learn React for modern UIs and Node.js for backend. Don't forget Git along the way.</p>
</details>
<details>
<summary>Do I need to install anything?</summary>
<p>No. Deoit runs entirely in your browser. No downloads, no installation. Just open the editor and start coding.</p>
</details>
<details>
<summary>How many lessons are available?</summary>
<p>52 lessons: 25 HTML, 15 CSS, and 12 JavaScript. New content is added regularly.</p>
</details>
</div>
</div>
<div class="l-footer">
<div style="margin-bottom:16px;">
<a href="/" style="color:var(--text-secondary);font-size:13px;">Home</a>
<span style="color:var(--text-muted);margin:0 8px;">·</span>
<a href="pages/editor" style="color:var(--text-secondary);font-size:13px;">Editor</a>
<span style="color:var(--text-muted);margin:0 8px;">·</span>
<a href="mailto:deoit.platform@gmail.com" style="color:var(--text-secondary);font-size:13px;">Contact</a>
</div>
<span>Deoit — Browser-based IDE for HTML, CSS & JavaScript. Built by <strong style="color:var(--text-secondary);">Majed Qandeel</strong>. © 2026</span>
</div>
<script async src="https://plausible.io/js/pa-QT4H3sRvZliBQhekUGtf7.js"></script>
<script>
window.plausible=window.plausible||function(){(plausible.q=plausible.q||[]).push(arguments)},plausible.init=plausible.init||function(i){plausible.o=i||{}};
plausible.init()
</script>
</body>
</html>
You can’t perform that action at this time.
