Skip to content

Commit 0835181

Browse files
MDJAminMDJAmin
committed
Feat: Code 2 - 2.2 Folder
1 parent 4b23404 commit 0835181

11 files changed

Lines changed: 465 additions & 0 deletions

‎Block Chain Collage Code 2/1/index.html‎

Lines changed: 313 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,313 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta
6+
name="viewport"
7+
content="width=device-width,initial-scale=1"
8+
/>
9+
<title>Web Dev Topics — HTML Reference & Examples</title>
10+
<style>
11+
body {
12+
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
13+
line-height: 1.6;
14+
padding: 24px;
15+
max-width: 1000px;
16+
margin: auto;
17+
}
18+
h1,
19+
h2,
20+
h3 {
21+
color: #111827;
22+
}
23+
pre {
24+
background: #f6f8fa;
25+
padding: 12px;
26+
border-radius: 8px;
27+
overflow: auto;
28+
}
29+
code {
30+
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", "Noto Mono",
31+
monospace;
32+
}
33+
.meta {
34+
font-size: 0.95rem;
35+
color: #6b7280;
36+
}
37+
.section {
38+
margin-bottom: 28px;
39+
padding-bottom: 12px;
40+
border-bottom: 1px solid #e6e9ef;
41+
}
42+
.note {
43+
background: #fff7ed;
44+
padding: 10px;
45+
border-left: 4px solid #f59e0b;
46+
border-radius: 6px;
47+
}
48+
a.button {
49+
display: inline-block;
50+
margin-top: 8px;
51+
padding: 8px 12px;
52+
background: #2563eb;
53+
color: white;
54+
text-decoration: none;
55+
border-radius: 6px;
56+
}
57+
.row {
58+
display: flex;
59+
gap: 16px;
60+
flex-wrap: wrap;
61+
}
62+
.col {
63+
flex: 1 1 320px;
64+
min-width: 280px;
65+
}
66+
</style>
67+
</head>
68+
<body>
69+
<h1>Web Development Topics — Quick Reference + Examples</h1>
70+
<p class="meta">
71+
A single HTML file that documents the requested topics and shows small, copy-pasteable
72+
code blocks.
73+
</p>
74+
75+
<div
76+
class="section"
77+
id="what-html-css-js"
78+
>
79+
<h2>What are HTML, CSS, and JavaScript?</h2>
80+
<p>
81+
<strong>HTML</strong> — structure and content of the page (elements like headings,
82+
paragraphs, lists, images).
83+
</p>
84+
<p><strong>CSS</strong> — styling: colors, layout, spacing, fonts.</p>
85+
<p>
86+
<strong>JavaScript</strong> — behavior: interactivity, DOM manipulation, network calls.
87+
</p>
88+
<p>
89+
Check a live demo showing the differences on CodePen:
90+
<a
91+
href="https://codepen.io/MDJAmin"
92+
target="_blank"
93+
rel="noopener"
94+
>https://codepen.io/MDJAmin</a
95+
>
96+
</p>
97+
98+
<h3>Minimal example (HTML + CSS + JS)</h3>
99+
<pre><code>&lt;!-- index.html --&gt;
100+
&lt;!DOCTYPE html&gt;
101+
&lt;html&gt;
102+
&lt;head&gt;
103+
&lt;meta charset="utf-8"&gt;
104+
&lt;title&gt;HTML, CSS, JS example&lt;/title&gt;
105+
&lt;style&gt;
106+
body { font-family: sans-serif; }
107+
.btn { background:#2563eb; color:#fff; padding:8px 12px; border-radius:6px; border:none; }
108+
&lt;/style&gt;
109+
&lt;/head&gt;
110+
&lt;body&gt;
111+
&lt;h1&gt;Hello from HTML&lt;/h1&gt;
112+
&lt;button class="btn" id="clickMe"&gt;Click me (JS)&lt;/button&gt;
113+
114+
&lt;script&gt;
115+
document.getElementById('clickMe').addEventListener('click', function(){
116+
alert('This alert is powered by JavaScript');
117+
});
118+
&lt;/script&gt;
119+
&lt;/body&gt;
120+
&lt;/html&gt;</code></pre>
121+
</div>
122+
123+
<div
124+
class="section"
125+
id="learning-map"
126+
>
127+
<h2>Web Development Learning Map — Front-end &amp; Back-end</h2>
128+
<div class="row">
129+
<div class="col">
130+
<h3>Front-end</h3>
131+
<ul>
132+
<li>HTML, CSS, JavaScript</li>
133+
<li>Frameworks: React, Vue, Svelte, Angular</li>
134+
<li>
135+
Tooling: bundlers (Vite, webpack), package managers, testing, accessibility
136+
</li>
137+
</ul>
138+
</div>
139+
<div class="col">
140+
<h3>Back-end</h3>
141+
<ul>
142+
<li>Languages: Node.js (JavaScript), Python, Ruby, PHP, Java, Go</li>
143+
<li>Databases: PostgreSQL, MySQL, MongoDB</li>
144+
<li>APIs, authentication, servers, deployment</li>
145+
</ul>
146+
</div>
147+
</div>
148+
</div>
149+
150+
<div
151+
class="section"
152+
id="code-editor"
153+
>
154+
<h2>Install Code Editor</h2>
155+
<p>
156+
Recommended: <strong>Visual Studio Code (VS Code)</strong>. Set a color theme and
157+
enable auto save.
158+
</p>
159+
<h3>Auto save &amp; color theme (settings)</h3>
160+
<pre><code>// Add to your &lt;code&gt;settings.json&lt;/code&gt; in VS Code:
161+
{
162+
"workbench.colorTheme": "Default Dark+",
163+
"files.autoSave": "afterDelay",
164+
"files.autoSaveDelay": 1000
165+
}</code></pre>
166+
167+
<h3>Extensions</h3>
168+
<p>Essential:</p>
169+
<pre><code>- Prettier - Code formatter
170+
- HTML Boilerplate
171+
- HTML CSS Support
172+
- Live Server</code></pre>
173+
174+
<p>Optional:</p>
175+
<pre><code>- Material Icon Theme
176+
- vscode-pets
177+
- Code Spell Checker
178+
- Color Highlight
179+
- Image preview
180+
- Auto Rename Tag</code></pre>
181+
182+
<h3>Default formatter & format on save</h3>
183+
<pre><code>// put this in settings.json
184+
{
185+
"editor.defaultFormatter": "esbenp.prettier-vscode",
186+
"editor.formatOnSave": true
187+
}</code></pre>
188+
</div>
189+
190+
<div
191+
class="section"
192+
id="basics-website-browser"
193+
>
194+
<h2>Basic concepts of Website and Browser</h2>
195+
<p>
196+
A website is a collection of files (HTML, CSS, JS, images) served by a web server. The
197+
browser (Chrome, Firefox, Safari) requests those files, parses HTML into the DOM,
198+
applies CSS, and executes JS.
199+
</p>
200+
</div>
201+
202+
<div
203+
class="section"
204+
id="basic-html-structure"
205+
>
206+
<h2>Basic HTML Structure</h2>
207+
<pre><code>&lt;!DOCTYPE html&gt;
208+
&lt;html lang="en"&gt;
209+
&lt;head&gt;
210+
&lt;meta charset="utf-8"&gt;
211+
&lt;meta name="viewport" content="width=device-width,initial-scale=1"&gt;
212+
&lt;title&gt;Document title&lt;/title&gt;
213+
&lt;/head&gt;
214+
&lt;body&gt;
215+
&lt;!-- page content --&gt;
216+
&lt;/body&gt;
217+
&lt;/html&gt;</code></pre>
218+
</div>
219+
220+
<div
221+
class="section"
222+
id="working-with-texts"
223+
>
224+
<h2>Working with Texts</h2>
225+
226+
<h3>Headings</h3>
227+
<pre><code>&lt;h1&gt;Heading 1&lt;/h1&gt;
228+
&lt;h2&gt;Heading 2&lt;/h2&gt;
229+
...
230+
&lt;h6&gt;Heading 6&lt;/h6&gt;</code></pre>
231+
232+
<h3>Paragraphs, line break, horizontal rule</h3>
233+
<pre><code>&lt;p&gt;This is paragraph text.&lt;/p&gt;
234+
&lt;br /&gt; &lt;!-- line break --&gt;
235+
&lt;hr /&gt; &lt!-- horizontal rule --&gt;</code></pre>
236+
</div>
237+
238+
<div
239+
class="section"
240+
id="text-formatting"
241+
>
242+
<h2>Text Formatting</h2>
243+
<pre><code>&lt;b&gt;Bold (b)&lt;/b&gt;
244+
&lt;strong&gt;Strong (strong)&lt;/strong&gt;
245+
&lt;i&gt;Italic (i)&lt;/i&gt;
246+
&lt;em&gt;Emphasis (em)&lt;/em&gt;</code></pre>
247+
<p class="note">
248+
Note: &lt;strong&gt; and &lt;em&gt; are semantic. Use them for accessibility/SEO;
249+
&lt;b&gt; and &lt;i&gt; are presentational.
250+
</p>
251+
</div>
252+
253+
<div
254+
class="section"
255+
id="special-text-tags"
256+
>
257+
<h2>Special Text Tags</h2>
258+
<pre><code>&lt;mark&gt;Highlighted text&lt;/mark&gt;
259+
&lt;ins&gt;Inserted / underlined text&lt;/ins&gt;
260+
&lt;sub&gt;H₂O (subscript)&lt;/sub&gt;
261+
&lt;sup&gt;x² (superscript)&lt;/sup&gt;
262+
&lt;abbr title="HyperText Markup Language"&gt;HTML&lt;/abbr&gt;
263+
&lt;address&gt;
264+
Example Corp.
265+
&lt;br&gt;123 Example Lane
266+
&lt;/address&gt;
267+
&lt;cite&gt;— Title of a work&lt;/cite&gt;</code></pre>
268+
269+
<h3>What is an attribute?</h3>
270+
<p>
271+
An attribute adds extra information to an element. Example:
272+
<code>&lt;a href="https://example.com" target="_blank"&gt;link&lt;/a&gt;</code>. Here
273+
<code>href</code> and <code>target</code> are attributes.
274+
</p>
275+
</div>
276+
277+
<div
278+
class="section"
279+
id="comments"
280+
>
281+
<h2>Comments</h2>
282+
<pre><code>&lt;!-- This is an HTML comment --&gt;</code></pre>
283+
</div>
284+
285+
<div
286+
class="section"
287+
id="footer"
288+
>
289+
<h2>Extras &amp; Tips</h2>
290+
<ul>
291+
<li>Use <strong>Live Server</strong> to preview changes automatically.</li>
292+
<li>
293+
Use <strong>Prettier</strong> as the default formatter and enable
294+
<code>editor.formatOnSave</code>.
295+
</li>
296+
<li>
297+
Try small CodePen experiments to visually separate HTML / CSS / JS panes. Example
298+
author: MDJAmin —
299+
<a
300+
href="https://codepen.io/MDJAmin"
301+
target="_blank"
302+
rel="noopener"
303+
>CodePen</a
304+
>.
305+
</li>
306+
</ul>
307+
</div>
308+
309+
<footer class="meta">
310+
Generated: HTML quick guide — contains code blocks with examples for copy-paste.
311+
</footer>
312+
</body>
313+
</html>

‎Block Chain Collage Code 2/2/2.2/Pages/About.html‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>About</title>
7+
</head>
8+
<body>
9+
10+
</body>
11+
</html>

‎Block Chain Collage Code 2/2/2.2/Pages/ContactUs.html‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>ContactUs</title>
7+
</head>
8+
<body>
9+
10+
</body>
11+
</html>

‎Block Chain Collage Code 2/2/2.2/Pages/Products.html‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Products</title>
7+
</head>
8+
<body>
9+
10+
</body>
11+
</html>

‎Block Chain Collage Code 2/2/2.2/assets/images/Default_shoes_product_3.jpg‎

611 KB
Loading

‎Block Chain Collage Code 2/2/2.2/assets/images/Default_shoes_product_for_nike_1.jpg‎

540 KB
Loading

‎Block Chain Collage Code 2/2/2.2/assets/images/Default_shoes_product_for_nike_in_difrent_style_and_color_4_d_0.jpg‎

530 KB
Loading

‎Block Chain Collage Code 2/2/2.2/assets/images/Default_shoes_product_for_nike_in_difrent_style_and_color_4_d_2.jpg‎

530 KB
Loading

‎Block Chain Collage Code 2/2/2.2/css/style.css‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
list-style: none;
5+
text-decoration: none;
6+
box-sizing: border-box;
7+
}
8+
9+
section.Product-Section div img {
10+
width: 200px;
11+
}
12+
13+
nav ul li {
14+
display: inline;
15+
/* gap: 20px; */
16+
margin: 10px;
17+
font-size: 24px;
18+
font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
19+
font-weight: bolder;
20+
font-style: italic;
21+
}
22+
23+
nav ul li a {
24+
color: black;
25+
}
26+
27+
/*
28+
.Product-Section div,
29+
p {
30+
display: inline;
31+
} */
32+
33+
.red {
34+
width: 400px;
35+
height: 400px;
36+
padding: 100px;
37+
background-color: red;
38+
margin: 10px 50px 10px 5px;
39+
}
40+
41+
.red div {
42+
border-radius: 1000000000000000000000000000000005px;
43+
width: 200px;
44+
height: 200px;
45+
background-color: brown;
46+
}

0 commit comments

Comments
 (0)