Skip to content

Commit fb103b9

Browse files
shreyasarkershreyasarker
committed
HTML Tutorial Started
0 parents commit fb103b9

File tree

4 files changed

+124
-0
lines changed

4 files changed

+124
-0
lines changed

‎01-first-webpage/about.html‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>About Me</title>
8+
</head>
9+
10+
<body>
11+
<h1>Hi, I'm Ellen Ripley!</h1>
12+
<p>Welcome to my first webpage. I'm learning HTML 🎉</p>
13+
14+
<h2>My Hobbies</h2>
15+
<p>I love coding, reading books, and playing football.</p>
16+
17+
<h2>Find Me Online</h2>
18+
<a href="https://github.com/">My GitHub</a>
19+
20+
<h2>My Photo</h2>
21+
<img src="https://res.cloudinary.com/du6k9jj1m/image/upload/v1757705789/Ellen_Ripley_olo3iu.jpg"
22+
alt="My profile photo">
23+
</body>
24+
25+
</html>

‎01-first-webpage/index.html‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>My First Webpage</title>
8+
</head>
9+
10+
<body>
11+
<h1>Hello, World!</h1>
12+
<p>This is my very first HTML page.</p>
13+
14+
15+
<h2>What I Learned</h2>
16+
<p>
17+
HTML is the skeleton of a webpage. The <code>&lt;head&gt;</code> contains meta
18+
info like the title. The <code>&lt;body&gt;</code> holds everything you see.
19+
</p>
20+
21+
22+
<h2>Try a Link and an Image</h2>
23+
<p><a href="https://codeboid.com" target="_blank">Visit Codeboid</a></p>
24+
<img src="https://res.cloudinary.com/du6k9jj1m/image/upload/v1757710191/Codeboid_Logo_with_bg_ntshnf.png"
25+
alt="Codeboid Image" />
26+
</body>
27+
28+
</html>

‎LICENSE‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
MIT License
2+
3+
4+
Copyright (c) 2025 Shreya Sarker <shreya@codeboid.com>
5+
6+
7+
Permission is hereby granted, free of charge, to any person obtaining a copy
8+
of this software and associated documentation files (the "Software"), to deal
9+
in the Software without restriction, including without limitation the rights
10+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
11+
copies of the Software, and to permit persons to whom the Software is
12+
furnished to do so, subject to the following conditions:
13+
14+
15+
The above copyright notice and this permission notice shall be included in all
16+
copies or substantial portions of the Software.
17+
18+
19+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
20+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
21+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
22+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
23+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
24+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
25+
SOFTWARE.

‎README.md‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
# HTML Series (Beginner-Friendly Tutorials)
2+
3+
![Beginner Friendly](https://img.shields.io/badge/Beginner-Friendly-brightgreen)
4+
![HTML](https://img.shields.io/badge/HTML-5-orange)
5+
![License: MIT](https://img.shields.io/badge/License-MIT-informational)
6+
7+
Welcome to the **HTML Series** by Codeboid — a friendly, step-by-step path to mastering the basics of the web.
8+
Each tutorial includes copy-paste code, clear explanations, and a tiny project to practice.
9+
10+
---
11+
12+
## What’s inside
13+
- **01-first-webpage** — Create your first HTML page, learn the structure, add headings, paragraphs, links, and images. Includes a mini project (About Me page).
14+
- **02-lists-and-tables** — Learn how to use lists (`ul`, `ol`) and tables (`table`, `tr`, `td`) to organize data neatly.
15+
- **03-links-images-attributes** — A deeper dive into links, images, and essential attributes like `alt`, `target`, and `title`.
16+
- **04-forms-inputs** — Build a simple form with text fields, checkboxes, and buttons.
17+
18+
---
19+
20+
## How to use
21+
1. Open a folder (e.g., `01-first-webpage`).
22+
2. Double-click `index.html` to open in your browser.
23+
3. Read the tutorial on the Codeboid blog, then try the mini project inside that folder.
24+
25+
---
26+
27+
## Live Demos
28+
- [CodePen Demo: First Webpage](https://codepen.io/Codeboid/pen/LEpKZqL)
29+
- [CodePen Demo: About Me Project](https://codepen.io/Codeboid/pen/qEOzNgm)
30+
- (More demos will be added for each tutorial)
31+
32+
---
33+
34+
## Blog Posts
35+
- [HTML Basics for Beginners: Your First Webpage (HTML Tutorial #1)](https://codeboid.com/html-basics-for-beginners-your-first-webpage)
36+
- (Links for Tutorial #2, #3, etc. will be added as published)
37+
38+
---
39+
40+
## Contributing
41+
Spotted a typo or have a suggestion? PRs welcome! 🙌
42+
43+
---
44+
45+
**License:** MIT — see `LICENSE` file for details.
46+
**Author:** Shreya Sarker • contact: shreya@codeboid.com

0 commit comments

Comments
 (0)