NS
Guest Mode:

BCA Student Stories & UpdatesLive

Live GitHub Pages
You
Your StorySign in & share
Er. Manoj Kumar
D5
Er. ManojActive nowPages
Day 7HTML Foundation2.5 Hours Practical
Push to GitHub to Complete

HTML Mini Project — Student Developer Profile Website

Projects convert isolated syntax lessons into engineering competence. In Day 7, you create your very first portfolio asset: an authentic, multi-section developer profile webpage.

Interactive Learning Roadmap

Day 7 Step-by-Step Practical Flow

🎯1. What You Will Learn Today

✔Synthesize Days 1–6 into a complete, standalone portfolio webpage.
✔Combine headings, paragraphs, lists, tables, images, links, forms, and semantic elements.
✔Deploy the project on GitHub with a professional README.md file.
✔Verify 100% HTML5 validation compliance.
Day 7 MasterclassHTML Foundation

HTML Mini Project — Student Developer Profile Website — Comprehensive Practical Guide

Har concept ko visual mental models, code anatomy aur practical industry tips ke sath samjhein.

Real-World Purpose Aur Zaroorat

Projects convert isolated syntax lessons into engineering competence. In Day 7, you create your very first portfolio asset: an authentic, multi-section developer profile webpage.

A portfolio proves practical capability to evaluators and prospective employers.
Pure HTML structure must be readable and organized even before CSS styles are applied.
Every project must have a clear `README.md` file explaining what was built.
Host the project on GitHub so anyone can review your source code.
Dimaag Mein Bithane Ka Model

"This is your developer identity card. When someone asks "What have you built?", this is your first real answer."

💡 Pro Tip: Code ko ratta mat maaro; imagine karo ki browser har tag ko visually kaise draw karta hai.

👨‍🏫3. Teacher Demonstration Code

A full-page architecture incorporating all learned elements cleanly.

Blueprint: Complete Student Profile Structurehtml
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Aarav Patel | BCA Student Developer</title>
</head>
<body>
  <header>
    <h1>Aarav Patel</h1>
    <p>Aspiring Full-Stack Software Developer • BCA 1st Year</p>
    <nav>
      <a href="#about">About</a> | 
      <a href="#skills">Skills</a> | 
      <a href="#education">Education</a> | 
      <a href="#contact">Contact</a>
    </nav>
  </header>

  <main>
    <section id="about">
      <h2>About Me</h2>
      <p>I am a BCA student passionate about <strong>practical software development</strong>.</p>
    </section>

    <section id="skills">
      <h2>Technical Skills</h2>
      <ul>
        <li>HTML5 & Semantic Markup</li>
        <li>Windows 11 Command Prompt</li>
        <li>Git & GitHub Version Control</li>
      </ul>
    </section>

    <section id="education">
      <h2>Academic Records</h2>
      <table border="1">
        <tr><th>Year</th><th>Degree</th><th>Institution</th></tr>
        <tr><td>2026</td><td>BCA (Sem 1)</td><td>NextSem Academy</td></tr>
      </table>
    </section>

    <section id="contact">
      <h2>Get In Touch</h2>
      <form action="/contact" method="POST">
        <label for="msg">Message:</label><br>
        <textarea id="msg" name="message" required></textarea><br>
        <button type="submit">Send Message</button>
      </form>
    </section>
  </main>

  <footer>
    <p>Built with pure HTML5 • Connect on <a href="https://github.com">GitHub</a></p>
  </footer>
</body>
</html>

2. Hands-On Practical Lab: Follow Instructions in VS Code

Code like a professional software engineer! Follow the step-by-step instructions below in Visual Studio Code (VS Code) on your PC, test your output locally, and push to GitHub.

2 Coding Tasks
Interactive Coding TestAuto-Evaluates as you type

Day 7 Practical Task Test Studio

Test Score:0 / 2 Passed
1. Practical Task Specifications & Live Test Checklist:Type code below to pass tests
Task 1Header with Profile Info & Navigation

Add `<header>` containing `<h1>`, `<p>`, and a `<nav>` with at least two links.

⏳ WAITING
Task 2Skills List & Contact Form

Inside `<main>`, add an `<ul>` list of skills and a `<form>` containing a submit button.

⏳ WAITING
2. Type HTML & CSS Code:index.html
index.html
⚡ Real-Time Testing Active
Tab inserts 2 spaces • Live DOM refresh169 chars
Live Browser Output:
🔒 http://localhost:5500/index.html
Live
Renders live HTML & CSS typed on the left.
Interactive Bug Detective

Spot the Bug: Broken Bookmark Anchor Jumps

Tap or click on the exact line below that contains the error:

Click any code line
⚠️ Broken Code Inspector
Tap buggy line
1
<a href="about">Jump to About</a>
2
...
3
<section name="about">
4
<h2>About Section</h2>
5
</section>
Stuck? Need a detective clue before checking the solution?

Senior Developer Forensic Analysis:

For internal anchor jumps, the href MUST begin with a hash symbol (href="#about"), and the target element must use id="about" instead of deprecated name attributes.

Golden Rule: Always validate code syntax and security attributes before pushing to GitHub!

📝Independent Practice: Assignment

📄 index.html

Mini Project Milestone: Deploy to GitHub Repository

  • •Create a new GitHub repository named `student-profile-html`.
  • •Place `index.html` and your profile image in the repository.
  • •Add a `README.md` file featuring: Project Title, Live Preview link, Built With (HTML5), and Author info.
  • •Enable GitHub Pages in your repository settings under Settings > Pages > Deploy from Branch.
  • •Test your live URL on your mobile phone.
Submission Evaluation Criteria: Submit your live GitHub Pages link and repository URL.
Exact Assignment Solution Code: index.html

Open Visual Studio Code on your PC (code .), create index.html, paste this complete step-by-step verified code, test in your browser, and push to your GitHub repo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>BCA Student Developer Profile - Day 7 Milestone</title>
</head>
<body>
  <header>
    <h1>Er. Manoj Kumar</h1>
    <p>BCA First Year Student • Aspiring Software Engineer</p>
    <nav>
      <strong>Quick Links: </strong>
      <a href="#about">About</a> |
      <a href="#skills">Skills</a> |
      <a href="#projects">Projects</a> |
      <a href="#contact">Contact</a>
    </nav>
  </header>
  <hr>

  <main>
    <section id="about">
      <h2>About Me</h2>
      <p>I am undertaking the 90-Day BCA practical development journey at Nextsem Academy. My focus is writing semantic, accessible, standard-compliant software systems.</p>
      <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=250" alt="Student Profile Avatar" width="160">
    </section>

    <section id="skills">
      <h2>Technical Skillset</h2>
      <ul>
        <li>HTML5 Semantic Architecture & Form Validation</li>
        <li>Windows 11 Command Line Interface (CLI)</li>
        <li>Git Version Control & GitHub Pages Deployment</li>
        <li>C / C++ Programming Fundamentals</li>
      </ul>
    </section>

    <section id="projects">
      <h2>Featured Lab Exercises</h2>
      <ol>
        <li><strong>Day 1:</strong> Student Launch Page</li>
        <li><strong>Day 4:</strong> BCA Semester Syllabus Matrix Table</li>
        <li><strong>Day 5:</strong> Job Portal Application Form</li>
        <li><strong>Day 6:</strong> Semantic Academic College Portal</li>
      </ol>
    </section>

    <section id="contact">
      <h2>Connect & Collaborate</h2>
      <p>Explore my source code repositories on GitHub: <a href="https://github.com" target="_blank" rel="noopener noreferrer">https://github.com/my-bca-profile ↗</a></p>
    </section>
  </main>
  <hr>

  <footer>
    <p><small>&copy; 2026 Student Developer Profile. Built with 100% Pure HTML5. Hosted live via GitHub Pages.</small></p>
  </footer>
</body>
</html>
Verified Assignment Code Solution (100% Tested & Ready to Run)

🎓4. Viva Check: Mandatory Conceptual Test

What is the purpose of the `README.md` file in a GitHub project repository?

5. Mandatory Step: Push to GitHub to Unlock Next Lesson

Target Repo: student-profile-html

Windows 11 Terminal / VS Code
1$
git init
2$
git add .
Stage all modified files and new assets for commit
3$
git commit -m "Day 07: Complete HTML5 student developer profile project"
Commit staged changes with a descriptive message
4$
git branch -M main
5$
git remote add origin https://github.com/YOUR_USERNAME/student-profile-html.git
6$
git push -u origin main
Push local commits directly to your remote GitHub repository
⌨️ Paste into terminal:Ctrl + V✨ Word wrap active (no horizontal cutoff)
Completion Prerequisites VerificationIncomplete Steps
Google Login
✔ Required
VS Code Implementation
Step 4 Viva Check
Own GitHub Project
Required

Exact GitHub Setup Guide & Expected Structure

Day 7 Requirements

Follow these exact folder and file names to prevent verification errors.

1. GitHub Repository
student-profile-html
Must be set to Public
2. Exact FolderNEW
day-07/ or bca-day-7/
Create inside repo root
3. Exact File NameREQUIRED
index.html
⚠️ No spaces or custom names
4. What to Submit Below
https://github.com/YOU/student-profile-html
Or direct link to index.html
Terminal Commands to Create & Push Day 7
1$
# 1. Enter your repository directory
2$
cd student-profile-html
Change working directory to student-profile-html
3$
# 2. Create the exact folder for Day 7
4$
mkdir day-07
Create a new project folder (day-07)
5$
cd day-07
Change working directory to day-07
6$
# 3. Create your code file: index.html
7$
# (Write your Day 7 homework code inside index.html)
8$
# 4. Save, stage, commit and push to GitHub:
9$
git add .
Stage all modified files and new assets for commit
10$
git commit -m "Day 07: HTML Mini Project — Student Developer Profile Website"
Commit staged changes with a descriptive message
11$
git push origin main
Push local commits directly to your remote GitHub repository
⌨️ Paste into terminal:Ctrl + V✨ Word wrap active (no horizontal cutoff)
How to Avoid "Could not find your practical code file" Errors:
1.Use Lowercase index.html: Avoid spaces or custom names like Alan Turing..html or Index.HTML. Linux/GitHub servers are strictly case-sensitive.
2.Separate Day Folders: Create a new folder day-07/ for today so you don't overwrite previous days.
3.Ensure Public Visibility: If your GitHub repo is Private, automated validation cannot inspect your code. Set it to Public.
4.Check on GitHub Website: Before clicking "Verify", open your repo in Google Chrome to confirm your files were pushed to branch main.
📁 github.com/YOUR_USERNAME/student-profile-html
Branch: main
README.md# BCA Practical Portfolio overview
day-01/Day 1 Prior Lesson
└──index.html
day-02/Day 2 Prior Lesson
└──index.html
day-03/Day 3 Prior Lesson
└──index.html
day-04/Day 4 Prior Lesson
└──index.html
day-05/Day 5 Prior Lesson
└──index.html
day-06/Day 6 Prior Lesson
└──index.html
day-07/✨ CREATE THIS FOLDER FOR TODAY (Day 7)
└──index.htmlMust contain: <form>, <label>, <input type="text">, <select>
Sequential Progression Enforced

You are welcome to read all notes, inspect code snippets, and practice all exercises of Day 7 freely! To officially submit your GitHub repository and unlock subsequent days in your portfolio, please complete Day 6: HTML Semantic Elements & Page Architecture first.

Complete Day 6 First
Day 6: HTML Semantic Elements & Page Architecture
WhatsApp
Curriculum & Practical Systems Authored by Er. Manoj Kumar
NextSem Academy • BCA Practical Learning Portal