# **Building My Personal Website: What I Learned and My Experience**

## **Introduction**
Building a personal website is a great way to practice web development and create an online presence. This article outlines my experience developing a simple website using **HTML, CSS, and Git**, and hosting it on **GitHub Pages**.

___

## **🚀 Why I Built a Personal Website**
I created this website to:
- Showcase my **portfolio, research, and projects**
- Learn **HTML and CSS** through a hands-on project
- Understand **Git and GitHub** for version control and deployment

## **🛠️ Tools and Technologies Used**
### **1️⃣ Frontend Development**
- **HTML** → Structuring content
- **CSS** → Styling the website

### **2️⃣ Version Control & Deployment**
- **Git** → Tracking changes and managing versions
- **GitHub** → Hosting the project remotely
- **GitHub Pages** → Deploying the website online

---

## **🔥 What I Learned**

### **1️⃣ Structuring a Website with HTML**
I learned how to:
- Use **semantic HTML** for better accessibility and SEO
- Structure a webpage with **headings, paragraphs, lists, and links**
- Embed **images and videos**

### **2️⃣ Styling with CSS**
- Using **CSS selectors** and properties to style elements
- Implementing **Flexbox and Grid** for layout design
- Adding **media queries** to ensure **responsive design**

### **3️⃣ Using Git for Version Control**
I practiced:
- **Initializing a Git repository** → `git init`
- **Tracking changes** → `git add .` and `git commit -m "Initial commit"`
- **Creating branches** → `git branch feature-branch`
- **Merging changes** → `git merge feature-branch`

### **4️⃣ Hosting with GitHub Pages**
- **Pushing code to GitHub**

  git remote add origin https://github.com/yourusername/repository-name.git  
  git push -u origin main  

- **Enabling GitHub Pages** under repository settings
- **Accessing the live site** at `https://yourusername.github.io/repository-name/`

---

## **🏆 Challenges Faced (and How I Overcame Them)**
### ❌ **Challenge: CSS Layout Issues**
**Solution**: Learned **Flexbox** and **Grid** to improve structuring.

### ❌ **Challenge: Git Mistakes (Accidental Commits & Wrong Branches)**
**Solution**: Used `git reset` and `git checkout` to manage changes properly.

### ❌ **Challenge: GitHub Pages Not Updating**
**Solution**: Cleared browser cache and checked branch settings under **GitHub Pages**.

---

## **🎯 Next Steps**
- Improving **website design with advanced CSS**
- Adding **a blog section using Markdown**
- Learning **more Git commands** for better version control

---

## **💡 Final Thoughts**
Building my personal website using **HTML, CSS, and Git** was a great learning experience. It taught me how to **structure web pages, style them, use Git for version control, and deploy on GitHub Pages**.