# --- 1.
SET UP YOUR IDENTITY (Run once per computer) ---
git config --global [Link] "Your Name"
git config --global [Link] "your@[Link]"
git config --global [Link] main
# --- 2. START YOUR PROJECT (Pick ONE) ---
# Option A: Create a brand new repo in the current folder
git init
# Option B: Download an existing repo from GitHub
# git clone <url>
# --- 3. THE DAILY SAVE LOOP (Run whenever you finish a task) ---
git status # Check what changed
git add . # Stage all changes
git commit -m "update" # Save the snapshot
git push origin main # Upload to GitHut
[Link]
Tag Purpose Example
<h1> to <h6> Headings (Size 1 is largest) <h1>My Portfolio</h1>
<p> Paragraphs for text blocks <p>Welcome to my site.</p>
<a> Hyperlinks (Needs href) <a href="[Link]
<ul> / <li> Unordered Lists (Bulleted) <ul><li>Item 1</li></ul>
<img> Images (Self-closing tag) <img src="[Link]" alt="Description">
<div> Containers for grouping items <div>...content...</div>
Element Description Code Example
Headings Titles for your sections. <h1>My Main Title</h1>
Paragraphs Standard blocks of text. <p>This is a sentence.</p>
Tag Purpose Example
Lists Bulleted or numbered points. <ul><li>Item</li></ul>
Images Pictures (needs a source). <img src="[Link]" alt="desc">
Links Clickable text to go elsewhere. <a href="[Link]">Click Me</a>
Buttons Something to click on. <button>Submit</button>
2. Structural Practice
Inside the <body>, you can also use "container" tags to group things. This is vital for when
you eventually start using CSS.
<div>: A generic box to group related items.
<header> / <footer>: Special names for the top and bottom of your page.
<section> / <article>: Used to organize content into logical chapters.
<div > helps you with the css styling shit
Feature class="name" id="name"
Can be used on many
Usage Must be unique (only one per page).
elements.
Real-world Like a Uniform (many Like a Social Security Number
analogy people wear it). (only one person has it).
CSS Symbol Uses a dot: .product-card Uses a hash: #unique-header
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>I am Ishan Sharma</h1>
</body>
</html>
The <strong> element makes text bold. It also semantically marks text as
important;
<img src="../images/[Link]">
<img: This is the image tag. It tells the web browser that you want to display an image on
the page.
src=": Short for source. This attribute tells the browser exactly where to find the image
file.
../images/[Link]": This is the file path.
The .. means "go up one folder" from where the current file is located.
It then looks into a folder named images and selects the file named [Link].
>: This closes the tag.
Besides the src attribute, every image element should also have
an alt (alternative text) attribute.
The alt attribute is used to describe an image. It will be used in place of
the image if it cannot be loaded. It is also used with screen readers to
describe what the image is to visually impaired users.
This is how the The Odin Project logo example we used earlier looks with
an alt attribute included: