In this project, I learned about:
-
Semantic HTML5 Tags: Understanding the difference between semantic and non-semantic HTML
<header>- For the top section with name and title<main>- For the main content area<section>- For organizing different parts of the resume<article>- For individual projects<table>,<thead>,<tbody>- For structured data like experience and education<address>- For contact information<footer>- For the copyright notice<hr>- For visual separators between sections
-
HTML Structure: How to organize content logically using proper HTML structure
-
Accessibility: Semantic tags help screen readers and improve website accessibility
-
Best Practices: Writing clean, readable HTML code without inline styles
Here's what I did to create this resume:
- Created an
index.htmlfile - Added the basic HTML5 document structure with
<!DOCTYPE html> - Included essential meta tags for character encoding and viewport
- Created a
<header>section with name and title - Added a
<main>section to contain all resume content - Organized content into logical
<section>elements:- About Me
- Skills (using
<ul>and<li>) - Experience (using
<table>) - Projects (using
<article>) - Education (using
<table>) - Contact (using
<address>)
- Filled in all sections with appropriate content
- Used proper heading hierarchy (
<h1>,<h2>,<h3>) - Added horizontal rules (
<hr>) to separate sections
- Created a
<footer>section with copyright information
Follow these simple steps to view the resume on your computer:
-
Open the file directly:
- Navigate to the project folder on your computer
- Double-click on
index.html - It will open in your default web browser
-
Or drag and drop:
- Open your web browser (Chrome, Firefox, Safari, etc.)
- Drag the
index.htmlfile into the browser window
Using VS Code Live Server extension:
- Install the "Live Server" extension in VS Code
- Right-click on
index.html - Select "Open with Live Server"
Here's a step-by-step guide to push your project to GitHub:
- Make sure Git is installed on your computer
- Create a GitHub account (if you don't have one)
Open your terminal/command prompt and navigate to your project folder:
cd /Users/anujraghav/Desktop/ResumeInitialize a Git repository:
git initCreate a .gitignore file to exclude unnecessary files:
# Create .gitignore file
touch .gitignoreAdd these lines to .gitignore:
.DS_Store
*.log
Add all your files to Git:
git add .Or add specific files:
git add index.html
git add README.mdCommit your changes with a message:
git commit -m "HTML resume"- Go to GitHub.com and sign in
- Click the "+" icon in the top right corner
- Select "New repository"
- Name your repository (e.g., "resume" or "my-resume")
- Don't initialize with README, .gitignore, or license (we already have files)
- Click "Create repository"
# Add the remote repository
git remote add origin https://github.com/YOUR_USERNAME/YOUR_REPO_NAME.git
# Rename the branch to main (if needed)
git branch -M main
# Push your code to GitHub
git push -u origin main- Go to your GitHub repository page
- You should see your
index.htmlandREADME.mdfiles - To view the resume, go to Settings → Pages → Select "main" branch → Save
- Your resume will be live at:
https://YOUR_USERNAME.github.io/YOUR_REPO_NAME/
Resume/
│
├── index.html # Main HTML file with resume content
└── README.md # This file - project documentation
This is a learning project, but feel free to:
- Fork the repository
- Make improvements
- Share your version
Happy Coding! 🎉
If you have questions or need help, don't hesitate to ask or search for tutorials online. Everyone starts as a beginner!