---
# System prepended metadata

title: 'Here''s a refined HackMD essay '

---



# **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**  
  ```bash
  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**.