NS
Guest Mode:

BCA Student Stories & UpdatesLive

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

HTML Setup & First Webpage

HTML (HyperText Markup Language) is the standard skeleton of every webpage on the internet. Browsers do not understand Word files; they read raw HTML tags and paint them onto your screen.

Active Layout:Traditional Practical Guide (Default)
Interactive Line-by-Line Studio Available!
Build code line-by-line with clickable pills, explanations, and auto-verification.
Interactive Learning Roadmap

Day 1 Step-by-Step Practical Flow

🎯1. What You Will Learn Today

✔Understand how browsers parse HTML documents.
✔Configure VS Code workspace and create an `index.html` file.
✔Write the boilerplate structure: `<!DOCTYPE html>`, `<html>`, `<head>`, `<body>`.
✔Display your first heading and paragraph on a live browser tab.
Day 1 MasterclassHTML Foundation

HTML Setup & First Webpage — Comprehensive Practical Guide

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

Real-World Purpose Aur Zaroorat

HTML (HyperText Markup Language) is the standard skeleton of every webpage on the internet. Browsers do not understand Word files; they read raw HTML tags and paint them onto your screen.

<!DOCTYPE html> tells the browser you are using modern HTML5.
The <head> holds metadata, page title, and stylesheet links (invisible to the page visitor).
The <body> holds everything the user sees on their screen.
Always save your primary homepage file as `index.html`.
Dimaag Mein Bithane Ka Model

"Think of HTML as the brick-and-mortar skeleton of a house. Without it, you cannot paint walls (CSS) or wire the electricity (JavaScript)."

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

👨‍🏫3. Teacher Demonstration Code

Every professional web page begins with this exact 10-line boilerplate.

Minimal Valid HTML5 Documenthtml
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>NextSem BCA Practical Day 1</title>
</head>
<body>
  <h1>Welcome to BCA Practical Portal</h1>
  <p>Today is Day 1 of my coding journey into computer software!</p>
</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
1Create Project Folder & Open in VS Code

Open ⊞ Windows Terminal or Command Prompt on your PC and execute:

Windows 11 Terminal / PowerShell
1$
mkdir bca-day-01
Create a new project folder (bca-day-01)
2$
cd bca-day-01
Change working directory to bca-day-01
3$
code .
Launch this folder immediately in Visual Studio Code
⌨️ Paste into terminal:Ctrl + V✨ Word wrap active (no horizontal cutoff)

💡 Tip: The command code . immediately opens the new project folder inside Visual Studio Code.

2Create index.html & Paste Starter Template

In VS Code Explorer (Ctrl + Shift + E), click New File, name it index.html, and paste this base template:

index.htmlhtml
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My First BCA Webpage</title>
</head>
<body>
  <!-- Write your h1 heading and p paragraph here -->
</body>
</html>
3Implement Practical Tasks in VS Code (Checklist)
0 / 2 Checked
Task 1

Add an <h1> Heading

Inside the <body>, create an <h1> heading saying "Hello Nextsem Developer".

Syntax / Hint: Use <h1>Hello Nextsem Developer</h1> inside <body>.
Task 2

Add a <p> Paragraph

Directly below the heading, add a <p> tag describing your BCA coding goal.

Syntax / Hint: Write <p>I am learning practical coding.</p>.
4Test & Preview Locally on Your PC
  • Right-click index.html in VS Code and select "Open with Live Server".
  • Alternatively, open File Explorer, navigate to bca-day-01, and double-click index.html to view in Google Chrome or Edge.
  • Verify all elements and styles look correct in the browser before pushing!
Code Complete in VS Code? Next Step:After implementing and verifying your code in VS Code, proceed to Step 3 (Bug Hunt) and Step 4 (Viva Check) before executing git push in Step 5!
Interactive Bug Detective

Spot the Bug: Broken Page Structure

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

Click any code line
⚠️ Broken Code Inspector
Tap buggy line
1
<!DOCTYPE html>
2
<html>
3
<title>Buggy Page</title>
4
<h1>Why is my title outside head?</h1>
5
</html>
Stuck? Need a detective clue before checking the solution?

Senior Developer Forensic Analysis:

The <title> tag must be inside a <head> element, and visible content like <h1> must be enclosed inside a <body> element. Browsers might try to fix it, but search engines and validation tools will fail.

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

📝Independent Practice: Assignment

📄 index.html

Homework Task: Student Launch Page

  • •Create a local folder named `bca-day-1` on your PC.
  • •Open the folder in VS Code and create `index.html`.
  • •Add your full name in an <h1> heading.
  • •Add a paragraph detailing: Your BCA Roll Number, College Name, and your target career track.
  • •Open the file directly in Google Chrome and verify the display.
Submission Evaluation Criteria: Verify with browser DevTools (F12) that there are zero HTML syntax warnings.
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 Launch Page - Day 1</title>
</head>
<body>
  <h1>Er. Manoj Kumar</h1>
  <p>
    <strong>BCA Roll Number:</strong> 2403BCA101<br>
    <strong>College Name:</strong> IGNOU BCA Center / Nextsem Academy<br>
    <strong>Target Career Track:</strong> Full-Stack Software Engineer
  </p>
  <hr>
  <p>Welcome to my BCA practical learning portfolio! Built directly in Visual Studio Code with 100% valid HTML5 standards.</p>
</body>
</html>
Verified Assignment Code Solution (100% Tested & Ready to Run)

🎓4. Viva Check: Mandatory Conceptual Test

Why is <!DOCTYPE html> required at the very first line of an HTML document?

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

Target Repo: html-css-projects

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 01: Setup HTML5 boilerplate and first page"
Commit staged changes with a descriptive message
4$
git branch -M main
5$
git remote add origin https://github.com/YOUR_USERNAME/html-css-projects.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
Day 1 Exclusive SetupOne-Time GitHub Step

How to Create Your Repository on GitHub (Step-by-Step)

Open github.com/new
🔒https://github.com/new
🐙
GitHub/new
+
U

Create a new repository

A repository contains all project files, including the revision history.

Repository name *
your-username
/
e.g. bca-practicals
PublicRequired

Anyone on the internet can see this repository. You choose who can commit.

Add a README file (Leave UNCHECKED)
Step 5 action
Create repository
Step 1 of 6: Direct URL
Direct URLStep 1 of 6

1. Open github.com/new

Open the direct repository creation page on GitHub in a new browser tab.

Action to take:

Navigate to https://github.com/new (or click the '+' icon in GitHub's top-right corner).

Click here to open github.com/new ↗
Repository Checklist:
Name: bca-practicals
Visibility: Public
README: Leave unchecked
Don't have a GitHub account yet? Sign up free on github.com ↗

Exact GitHub Setup Guide & Expected Structure

Day 1 Requirements

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

1. GitHub Repository
html-css-projects
Must be set to Public
2. Exact FolderNEW
day-01/ or bca-day-1/
Create inside repo root
3. Exact File NameREQUIRED
index.html
⚠️ No spaces or custom names
4. What to Submit Below
https://github.com/YOU/html-css-projects
Or direct link to index.html
Terminal Commands to Create & Push Day 1
1$
# 1. Enter your repository directory
2$
cd html-css-projects
Change working directory to html-css-projects
3$
# 2. Create the exact folder for Day 1
4$
mkdir day-01
Create a new project folder (day-01)
5$
cd day-01
Change working directory to day-01
6$
# 3. Create your code file: index.html
7$
# (Write your Day 1 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 01: HTML Setup & First Webpage"
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-01/ 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/html-css-projects
Branch: main
README.md# BCA Practical Portfolio overview
day-01/✨ CREATE THIS FOLDER FOR TODAY (Day 1)
└──index.htmlMust contain: <!DOCTYPE html>, <head>, <title>, <body>

Sign In Required to Submit Repository

Reading is 100% free with 0 login required. Sign in with your Google account to verify your GitHub repo, record completion, and sync your portfolio.

WhatsApp
Curriculum & Practical Systems Authored by Er. Manoj Kumar
NextSem Academy • BCA Practical Learning Portal