Skip to content

Commit 605bf46

Browse files
ajay-dhangarajay-dhangar
authored
Merge pull request #204 from codeharborhub/dev-1
added new docs
2 parents 942356e + 538d31f commit 605bf46

19 files changed

Lines changed: 1016 additions & 0 deletions

File tree

‎absolute-beginners/frontend-beginner/css/index.mdx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<ComingSoon />

‎absolute-beginners/frontend-beginner/css/intro-to-css.mdx‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
---
2+
title: Making the Web Beautiful
3+
sidebar_label: Intro to CSS
4+
description: Learn how to add style, color, and personality to your HTML.
5+
---
6+
7+
If **HTML** is the skeleton of your house, **CSS** (Cascading Style Sheets) is the paint on the walls, the style of the furniture, and the layout of the rooms.
8+
9+
Without CSS, every website would look like a boring black-and-white research paper. With CSS, you can turn that paper into a masterpiece!
10+
11+
## How CSS Works: The Rulebook
12+
13+
CSS works by creating "Rules." You tell the browser: *"Hey, find all the **H1 tags**, and make them **Blue**."*
14+
15+
### The Anatomy of a CSS Rule:
16+
1. **Selector:** The HTML element you want to style (e.g., `h1`).
17+
2. **Property:** What you want to change (e.g., `color`).
18+
3. **Value:** How you want to change it (e.g., `blue`).
19+
20+
```css
21+
/* This is a CSS Rule */
22+
h1 {
23+
color: blue;
24+
font-size: 30px;
25+
}
26+
27+
```
28+
29+
## 3 Ways to Add CSS
30+
31+
How do you actually connect your CSS "Paint" to your HTML "Walls"? There are three ways, but professionals almost always use **Number 3**.
32+
33+
### 1. Inline CSS (The "Quick Fix")
34+
35+
Writing styles directly inside the HTML tag.
36+
37+
* *Best for:* Quick tests. *Worst for:* Large projects.
38+
39+
```html
40+
<h1 style="color: red;">Hello World</h1>
41+
42+
```
43+
44+
### 2. Internal CSS (The "One Page" Method)
45+
46+
Writing styles inside a `<style>` tag in your `<head>`.
47+
48+
```html
49+
<head>
50+
<style>
51+
p { color: green; }
52+
</style>
53+
</head>
54+
55+
```
56+
57+
### 3. External CSS (The "Pro" Way)
58+
59+
Creating a separate file (e.g., `style.css`) and linking it to your HTML. This keeps your code clean and organized.
60+
61+
**In your HTML `<head>`:**
62+
63+
```html
64+
<link rel="stylesheet" href="style.css">
65+
66+
```
67+
68+
## Your First Styling Challenge
69+
70+
1. Open your `portfolio.html` from the previous lesson.
71+
2. Create a new file in the same folder called `style.css`.
72+
3. Paste the following code into `style.css`:
73+
74+
```css title="style.css"
75+
body {
76+
background-color: #f0f8ff; /* Light blue background */
77+
font-family: sans-serif; /* Modern, clean text */
78+
}
79+
80+
h1 {
81+
color: #2c3e50;
82+
text-align: center;
83+
}
84+
85+
p {
86+
color: #34495e;
87+
line-height: 1.6;
88+
}
89+
90+
```
91+
92+
4. Link it in your HTML `<head>` using the `<link>` tag.
93+
94+
95+
:::tip The "Cascade"
96+
Why is it called **Cascading** Style Sheets? Because rules fall down like a waterfall! If you tell a `<body>` to have blue text, every paragraph inside it will also be blue, unless you specifically tell that paragraph to be different.
97+
:::
98+
99+
## Summary Checklist
100+
101+
* [X] I understand that CSS handles the **visuals**.
102+
* [X] I know the difference between a **Selector**, **Property**, and **Value**.
103+
* [X] I have successfully linked an external `.css` file.

‎absolute-beginners/frontend-beginner/git/index.mdx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<ComingSoon />

‎absolute-beginners/frontend-beginner/github/index.mdx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<ComingSoon />

‎absolute-beginners/frontend-beginner/html/adding-images.mdx‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
---
2+
sidebar_position: 5
3+
title: "Adding Images Visualizing Your Site"
4+
sidebar_label: Adding Images
5+
description: "Learn how to bring your website to life with pictures."
6+
---
7+
8+
A website without pictures is like a book without a cover, it can be great, but it's much harder to grab someone's attention! Today, you are going to learn how to embed images into your pages.
9+
10+
## The "No-Sandwich" Tag
11+
12+
Most tags we've learned (`<h1>`, `<p>`, `<ul>`) are like sandwiches: they have a start and an end.
13+
14+
However, the **Image tag** is a bit of a rebel. It is **Self-Closing**. Since you don't put text "inside" a picture, it doesn't need a closing tag!
15+
16+
## The Anatomy of `<img>`
17+
18+
To show an image, we need two very important "Attributes" (extra pieces of info):
19+
20+
1. **`src` (Source):** This is the path to your image. It’s the URL or the filename.
21+
2. **`alt` (Alternative Text):** This is a text description of the image.
22+
23+
```html
24+
<img src="https://codeharborhub.github.io/img/codeharborhub-social-card.jpg" alt="codeharborhub social card">
25+
26+
```
27+
28+
### Why is `alt` text so important?
29+
30+
* **Accessibility:** People who are blind use "Screen Readers" that read this description aloud.
31+
* **Broken Links:** If the image fails to load, the browser shows this text instead.
32+
* **SEO:** Google uses it to understand what your image is about.
33+
34+
## Two Ways to Add Images
35+
36+
### 1. Using a Web URL (External)
37+
38+
You can link to any image already on the internet.
39+
40+
```html
41+
<img src="https://codeharborhub.github.io/img/nav-logo.jpg" alt="CodeHarborHub Official Logo">
42+
43+
```
44+
45+
### 2. Using a Local File (Internal)
46+
47+
If you have a photo on your computer, put it in the same folder as your `index.html`.
48+
49+
```html
50+
<img src="./my-photo.jpg" alt="Me at the beach">
51+
52+
```
53+
54+
## Changing the Size
55+
56+
Sometimes an image is way too big and takes up the whole screen. You can control the size directly in HTML using `width` and `height`.
57+
58+
```html
59+
<img src="./cool-robot.png" alt="A cool blue robot" width="300" height="200">
60+
61+
```
62+
63+
:::warning Beginner Alert!
64+
In 2026, we usually use **CSS** to resize images because it's more flexible. But for now, using `width` in HTML is a great way to keep things tidy!
65+
:::
66+
67+
## Practice: Create a "Profile Card"
68+
69+
Let’s combine everything! Try to build this in your `index.html`:
70+
71+
```html title="index.html"
72+
<div style="border: 1px solid #ccc; padding: 20px; width: 300px; text-align: center;">
73+
<img src="https://github.com/ajay-dhangar.png" alt="Profile Picture" style="border-radius: 50%;">
74+
<h2>Your Name</h2>
75+
<p>I am a <strong>Frontend Developer</strong> in training.</p>
76+
<ul>
77+
<li>Coding</li>
78+
<li>Gaming</li>
79+
<li>Coffee</li>
80+
</ul>
81+
</div>
82+
83+
```
84+
85+
## Summary Checklist
86+
87+
* [X] I remember that `<img>` does **not** have a closing `</img>` tag.
88+
* [X] I always include an `alt` attribute for accessibility.
89+
* [X] I know how to use `src` to point to my image.

‎absolute-beginners/frontend-beginner/html/final-project.mdx‎

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
---
2+
sidebar_position: 9
3+
title: Your Personal Portfolio
4+
sidebar_label: Final Project
5+
description: "Put everything together to build your first real-world website."
6+
---
7+
8+
Congratulations! You’ve moved from "What is a tag?" to understanding the full structure of a webpage. Now, it’s time to stop following tutorials and start **building**.
9+
10+
Your mission is to create a **Personal Portfolio Page**. This site will tell the world who you are, what you’re learning, and how to contact you.
11+
12+
## The Project Blueprint
13+
14+
Before we code, let's look at the structure we want to achieve. We are going to use **Semantic HTML** to keep it professional.
15+
16+
## Step-by-Step Instructions
17+
18+
### Step 1: The Foundation
19+
20+
Create a new file named `portfolio.html`. Start with your "Skeleton" (the boilerplate). Give your site a title like `[Your Name] | Developer Portfolio`.
21+
22+
### Step 2: The Header & Nav
23+
24+
Inside the `<body>`, add a `<header>`.
25+
* Use an `<h1>` for your name.
26+
* Create a `<nav>` with links to "About," "Skills," and "Contact." (Hint: You can use internal links like `href="#about"` later!)
27+
28+
### Step 3: The "About Me" Section
29+
30+
Use a `<main>` tag, and inside it, create a `<section>`.
31+
* Add an `<h2>` that says "About Me."
32+
* Add an `<img>` of yourself (or a cool avatar).
33+
* Write a `<p>` explaining your journey into coding. Use `<strong>` to highlight your goal.
34+
35+
### Step 4: The Skills List
36+
37+
Create another `<section>`.
38+
* Use an `<h2>` called "Technical Skills."
39+
* Create a `<ul>` and list the things you've learned: HTML5, Semantic Markup, Forms, etc.
40+
41+
### Step 5: The Contact Form
42+
43+
Create a final `<section>`.
44+
* Use an `<h2>` for "Get In Touch."
45+
* Build a `<form>` with inputs for `Name` (text), `Email` (email), and a `Message`.
46+
* Don't forget the `<button type="submit">`.
47+
48+
### Step 6: The Footer
49+
50+
Add a `<footer>` at the very bottom with a copyright notice: `&copy; 2026 [Your Name]`.
51+
52+
## The "Final Boss" Code Template
53+
54+
If you get stuck, here is a structure to guide you. Try to fill in the blanks with your own info!
55+
56+
```html title="portfolio.html"
57+
<!DOCTYPE html>
58+
<html lang="en">
59+
<head>
60+
<meta charset="UTF-8">
61+
<title>My Awesome Portfolio</title>
62+
</head>
63+
<body>
64+
65+
<header>
66+
<h1>Jane Doe</h1>
67+
<nav>
68+
<a href="#about">About</a> |
69+
<a href="#skills">Skills</a> |
70+
<a href="#contact">Contact</a>
71+
</nav>
72+
</header>
73+
74+
<main>
75+
<section id="about">
76+
<h2>About Me</h2>
77+
<img src="avatar.jpg" alt="A photo of Jane smiling" width="150">
78+
<p>I am an aspiring <strong>Frontend Developer</strong> learning at CodeHarborHub.</p>
79+
</section>
80+
81+
<section id="skills">
82+
<h2>My Skills</h2>
83+
<ul>
84+
<li>Writing Semantic HTML</li>
85+
<li>Creating Accessible Forms</li>
86+
<li>Hyperlinking the Web</li>
87+
</ul>
88+
</section>
89+
90+
<section id="contact">
91+
<h2>Contact Me</h2>
92+
<form>
93+
<input type="text" placeholder="Your Name" required><br>
94+
<input type="email" placeholder="Your Email" required><br>
95+
<button type="submit">Send Message</button>
96+
</form>
97+
</section>
98+
</main>
99+
100+
<footer>
101+
<p>Built with ❤️ at CodeHarborHub</p>
102+
</footer>
103+
104+
</body>
105+
</html>
106+
107+
```
108+
109+
---
110+
111+
## How to Make it "Your Own"
112+
113+
* **Add Links:** Link your "My Skills" section to your GitHub profile.
114+
* **Add Video:** Use a `<video>` tag to show a screen recording of your code.
115+
* **Emojis:** Use emojis to make the text more friendly!
116+
117+
## Submission Checklist
118+
119+
Before you call it finished, check these four things:
120+
121+
1. [X] Does every image have an `alt` tag?
122+
2. [X] Is there only **one** `<h1>` and **one** `<main>`?
123+
3. [X] Do all your links work?
124+
4. [X] Did you use `<label>` for your form inputs?
125+
126+
:::success YOU DID IT!
127+
You have officially completed the html beginners tutorial. You have a real website you built from scratch.
128+
129+
**Next Stop:** [CSS Basics](/absolute-beginners/frontend-beginner/css/intro-to-css) — Let's learn how to make this portfolio look beautiful with colors, fonts, and layouts!
130+
:::

0 commit comments

Comments
 (0)