DEV Community: Bhadra Mohit

A Complete Guide to Git: Commands, Usage, and Step-by-Step Workflow

Bhadra Mohit — Sat, 29 Aug 2026 10:48:44 +0000

Whether you're working solo on a side project or collaborating with a team of 50 developers, Git is the backbone of modern software development. It tracks every change you make, lets you experiment safely with branches, and makes collaboration possible without stepping on each other's code.

This guide walks through Git from the ground up — what it is, why you need it, and a detailed, hands-on breakdown of the commands you'll actually use every day, along with the ones you'll reach for once things get a little more advanced.

What is Git and Why Do You Need It?

Git is a distributed version control system (VCS) that tracks changes to files over time. "Distributed" means every developer has a full copy of the project's history on their own machine — not just the latest files, but every commit ever made. This is what makes Git fast, reliable, and usable even without an internet connection.

Git lets you:

Save "snapshots" of your project at any point (commits)
Go back to a previous version if something breaks
Work on new features without affecting the main codebase (branching)
Merge work from multiple people without overwriting each other's changes
Keep a full history of who changed what, and when, and why

Git vs a Traditional Save System

Aspect	Without Git	With Git
Change tracking	Manual (copy-pasting folders like `project_final_v2`)	Automatic, precise history of every change
Collaboration	Risk of overwriting others' work	Merge and conflict resolution built in
Rollback	Difficult or impossible	Instant — revert to any previous commit
Branching	Not possible without duplicating folders	Native, lightweight branching
Accountability	No record of who changed what	Full commit history with author and timestamp
Offline work	Depends on manual backups	Full history available locally, no network needed

Git vs GitHub — A Common Point of Confusion

It's worth clarifying this early: Git is the version control tool itself (installed on your machine). GitHub (along with GitLab, Bitbucket, etc.) is a cloud platform that hosts Git repositories and adds collaboration features like pull requests, issues, and code review. You can use Git without ever touching GitHub — but GitHub makes sharing and collaborating far easier.

Installing and Setting Up Git

Before using Git, install it for your OS (via git-scm.com, a package manager like apt/brew/choco), then configure your identity — this information gets attached to every commit you make.

git config --global user.name "Your Name"
git config --global user.email "you@example.com"

Some other useful one-time configuration steps:

git config --global init.defaultBranch main     # set default branch name to "main"
git config --global core.editor "code --wait"   # set VS Code as your commit message editor
git config --global color.ui auto               # enable colored output in the terminal

Check your current configuration anytime:

git config --list          # view all settings
git config user.name       # view a specific setting

Git config exists at three levels — --local (this repo only), --global (this user, all repos), and --system (all users on the machine). Local settings override global, which override system.

Starting a Project: `init` vs `clone`

There are two ways to start working with Git on a project.

`git init` — Start a New Repository

Turns your current folder into a Git repository, creating a hidden .git folder that stores all version history.

git init
git init my-project        # create the folder and initialize it in one step

`git clone` — Copy an Existing Repository

Downloads a full copy of an existing repository (including all its history) from a remote source like GitHub.

git clone https://github.com/username/repository.git
git clone https://github.com/username/repository.git custom-folder-name
git clone --depth 1 https://github.com/username/repository.git   # shallow clone, history only from the latest commit

init vs clone at a glance:

`git init`	`git clone`
Creates a brand-new, empty repository	Copies an existing repository
Used when starting a project from scratch	Used when joining an existing project
No remote connection by default	Automatically sets up the remote (`origin`)

The Core Git Workflow

Understanding Git means understanding its three (or four) areas:

Working Directory — Your actual project files, where you make edits
Staging Area (Index) — A holding area for changes you're about to commit
Local Repository (.git) — Where committed snapshots are permanently stored on your machine
Remote Repository — The shared copy hosted on a server (e.g., GitHub), synced via push/pull

Here's the typical day-to-day flow, step by step:

Step 1: Check the Status

See what's changed, what's staged, and what's untracked.

git status              # detailed status
git status -s           # short, condensed format

Step 2: Ignore Files You Don't Want Tracked

Before staging, it's worth setting up a .gitignore file so build artifacts, dependencies, and secrets never get committed by accident.

# .gitignore example
node_modules/
.env
*.log
dist/
.DS_Store

Git will simply skip any file or folder pattern listed here when you run git add.

Step 3: Stage Your Changes

Move changes from the working directory into the staging area, preparing them for a commit.

git add filename.txt      # stage a specific file
git add folder/           # stage everything in a folder
git add .                 # stage all changed files in the current directory and below
git add -A                # stage all changes across the entire repo, including deletions
git add -p                # interactively choose which changes (hunks) to stage

git add . vs git add -A:

`git add .`	`git add -A`
Stages new and modified files in current directory and below	Stages all changes across the entire repository
May miss deleted files outside current directory	Includes deletions everywhere

Step 4: Commit Your Changes

Save a permanent snapshot of the staged changes, with a message describing what changed.

git commit -m "Add login functionality"
git commit -am "Fix navbar alignment bug"     # stage tracked files + commit in one step
git commit --amend -m "Corrected commit message"   # edit the most recent commit
git commit --amend --no-edit                  # add staged changes to the last commit without changing its message

Tip: Only amend commits that haven't been pushed yet — amending shared history causes conflicts for collaborators.

Good commit messages matter. A widely used convention:

<type>: <short summary>

<optional longer description>

Example: fix: correct off-by-one error in pagination logic

Common types: feat, fix, docs, style, refactor, test, chore.

Step 5: View History

git log                       # full commit history
git log --oneline             # condensed, one line per commit
git log --oneline --graph     # visual branch history
git log --author="Mohit"      # filter commits by author
git log -p filename.txt       # show changes made to a specific file over time
git show <commit-hash>        # show details and diff of one specific commit
git blame filename.txt        # see who last modified each line of a file

Step 6: Push to a Remote Repository

Upload your local commits to a remote server like GitHub.

git push origin main
git push -u origin main        # push and set upstream tracking (only needed once per branch)
git push                       # after upstream is set, just this works
git push --force-with-lease    # safer force-push that fails if remote has new commits you don't have

Caution: Avoid git push --force on shared branches — it overwrites remote history and can wipe out teammates' work. --force-with-lease is the safer alternative since it checks first.

Step 7: Fetch and Pull Updates

git fetch origin           # download remote changes WITHOUT merging them into your branch
git pull origin main       # fetch AND merge remote changes into your current branch
git pull --rebase          # fetch and rebase instead of merge, for a cleaner history

fetch vs pull:

`git fetch`	`git pull`
Downloads changes only	Downloads AND merges changes
Safe — doesn't touch your working files	Can create merge commits or conflicts immediately
Lets you review before merging	Applies changes right away

Branching: Working on Features Independently

Branches let you work on new features or fixes without touching the main codebase until you're ready.

git branch                     # list all local branches
git branch -a                  # list all branches, including remote-tracking ones
git branch feature/login       # create a new branch
git checkout feature/login     # switch to that branch
git checkout -b feature/login  # create AND switch in one command
git switch feature/login       # modern alternative to checkout
git switch -c feature/login    # modern alternative to checkout -b
git branch -m old-name new-name   # rename a branch

Merging Branches

Once your feature is ready, merge it back into the main branch.

git checkout main
git merge feature/login
git merge --no-ff feature/login   # always create a merge commit, even for fast-forward merges (preserves feature history)

Resolving Merge Conflicts

Conflicts happen when the same lines of a file were changed differently on two branches. Git will pause the merge and mark the conflicting sections in the file:

<<<<<<< HEAD
your current branch's version
=======
the incoming branch's version
>>>>>>> feature/login

To resolve it:

Open the file and manually edit it to keep the correct content (removing the <<<<<<<, =======, >>>>>>> markers)
Stage the resolved file — git add filename.txt
Complete the merge — git commit (Git pre-fills a merge commit message for you)

If you want to back out of a conflicted merge entirely:

git merge --abort

Deleting a Branch

git branch -d feature/login          # safe delete (only if merged)
git branch -D feature/login          # force delete (even if not merged)
git push origin --delete feature/login   # delete the branch on the remote too

checkout/switch vs merge:

Command	Purpose
`git checkout` / `git switch`	Moves you between branches
`git merge`	Combines changes from one branch into another

Undoing Changes: Choosing the Right Command

Git offers multiple ways to undo work, depending on how far you want to go back.

`git restore` — Undo Uncommitted Changes

git restore filename.txt          # discard changes in working directory
git restore --staged filename.txt # unstage a file (keep the edits)
git restore --source=HEAD~1 filename.txt   # restore a file to how it was one commit ago

`git reset` — Move the Commit Pointer Backward

git reset --soft HEAD~1    # undo last commit, keep changes staged
git reset --mixed HEAD~1   # undo last commit, keep changes unstaged (this is the default mode)
git reset --hard HEAD~1    # undo last commit AND discard all changes permanently
git reset <commit-hash>    # reset to a specific commit

`git revert` — Safely Undo a Commit (Recommended for Shared Branches)

Instead of erasing history, revert creates a new commit that undoes a previous one — safer for branches others are working on.

git revert <commit-hash>
git revert HEAD               # revert the most recent commit
git revert --no-commit <commit-hash>   # revert changes without auto-committing, so you can review first

reset vs revert:

`git reset`	`git revert`
Rewrites history (dangerous on shared branches)	Preserves history, adds a new "undo" commit
Good for local, unpushed commits	Good for commits already pushed/shared
Can permanently lose changes (`--hard`)	Never loses commit history

`git reflog` — Your Safety Net

Even after a reset --hard, Git usually hasn't actually deleted your commits yet. reflog shows a log of everywhere HEAD has pointed, letting you recover "lost" commits.

git reflog
git checkout <commit-hash-from-reflog>

Working with Remotes

git remote -v                                   # view connected remotes and their URLs
git remote add origin <repository-url>          # connect a remote repository
git remote remove origin                        # disconnect a remote
git remote rename origin upstream               # rename a remote
git remote show origin                          # detailed info about a remote, including tracked branches

Stashing: Temporarily Saving Work

If you need to switch branches but aren't ready to commit, stash saves your uncommitted changes without a commit.

git stash                       # save current changes
git stash save "WIP: navbar fix"   # save with a descriptive message
git stash list                  # view all stashes
git stash pop                   # reapply the most recent stash and remove it from the list
git stash apply                 # reapply a stash but keep it in the list
git stash apply stash@{2}       # apply a specific stash by index
git stash drop stash@{0}        # delete a specific stash
git stash clear                 # delete all stashes

Comparing Changes

git diff                     # changes in working directory not yet staged
git diff --staged            # changes staged but not yet committed
git diff branch1 branch2     # differences between two branches
git diff HEAD~2 HEAD         # differences between two commits

Rewriting and Combining Commits

`git rebase` — Reapply Commits on Top of Another Branch

Rewrites commit history to create a cleaner, linear project history (compared to merge, which preserves branch structure).

git checkout feature/login
git rebase main
git rebase -i HEAD~3          # interactive rebase — reorder, edit, squash, or drop the last 3 commits

During an interactive rebase, Git opens an editor listing your commits with options like pick, squash, reword, and drop next to each one — letting you clean up messy commit history before merging.

If conflicts occur during a rebase:

# fix the conflicted files, then:
git add .
git rebase --continue
# or to cancel entirely:
git rebase --abort

merge vs rebase:

`git merge`	`git rebase`
Preserves full branch history	Creates a clean, linear history
Adds a merge commit	No extra merge commit
Safe for shared/public branches	Best used on local, unpushed branches

`git cherry-pick` — Apply a Specific Commit from Another Branch

Useful when you need just one specific fix from another branch, without merging everything.

git cherry-pick <commit-hash>
git cherry-pick <hash1> <hash2>     # cherry-pick multiple commits

Tagging Releases

Tags mark specific points in history — commonly used for release versions (v1.0, v2.1.3).

git tag v1.0                        # create a lightweight tag
git tag -a v1.0 -m "Version 1.0"    # create an annotated tag with a message
git tag                             # list all tags
git push origin v1.0                # push a specific tag
git push origin --tags              # push all tags
git tag -d v1.0                     # delete a local tag
git push origin --delete v1.0       # delete a tag from the remote

Bonus: Submodules and Aliases

Git Submodules

Submodules let you include one Git repository inside another — useful for shared libraries.

git submodule add https://github.com/user/library.git libs/library
git submodule update --init --recursive

Git Aliases — Save Yourself Some Typing

git config --global alias.co checkout
git config --global alias.br branch
git config --global alias.st status
git config --global alias.cm "commit -m"

Now git st works exactly like git status.

Common Git Commands Cheat Sheet

Command	Purpose
`git init`	Initialize a new repository
`git clone <url>`	Copy an existing repository
`git status`	Show current state of working directory
`git add .`	Stage all changes
`git commit -m "message"`	Save a snapshot with a message
`git push`	Upload commits to remote
`git fetch`	Download remote changes without merging
`git pull`	Download and merge remote changes
`git branch`	List/create branches
`git checkout` / `git switch`	Switch branches
`git merge`	Combine branch changes
`git log`	View commit history
`git diff`	View unstaged/staged differences
`git stash`	Temporarily save uncommitted changes
`git reset`	Move commit pointer, optionally discarding changes
`git revert`	Undo a commit safely with a new commit
`git rebase`	Reapply commits for a linear history
`git cherry-pick`	Apply a specific commit to the current branch
`git tag`	Mark a specific commit (e.g., a release)
`git reflog`	Recover lost commits or view HEAD history

A Realistic Step-by-Step Example

Here's what a typical feature development flow looks like end to end:

Update your local main branch — git checkout main && git pull origin main
Create a new branch — git checkout -b feature/user-profile
Make your code changes in your editor
Check what changed — git status
Stage the changes — git add .
Commit with a clear message — git commit -m "feat: add user profile page"
Push the branch to remote — git push -u origin feature/user-profile
Open a Pull Request on GitHub/GitLab for review
Address review feedback — make edits, then git add . and git commit --amend --no-edit or a new commit, then push again
Resolve any merge conflicts if the main branch has moved forward
Merge into main once approved, then delete the feature branch — both locally and on the remote

Wrapping Up

Git can feel overwhelming at first because of how many commands it has, but in practice, you'll use a small core set daily: status, add, commit, push, pull, branch, and merge. The rest — stash, rebase, cherry-pick, revert, reflog — become genuinely useful as your projects grow and your collaboration needs get more complex.

The best way to get comfortable with Git isn't memorizing every command — it's using it daily on real projects until the workflow becomes second nature. Break something, fix it, and you'll understand Git faster than any tutorial can teach you.

Made with care by Mohit Bhadra. If this guide helped you understand Git a little better, feel free to share it with someone who's still afraid of the command line.

Test Automation Tools: A Complete Guide to Selenium, JUnit, and TestNG

Bhadra Mohit — Sat, 29 Aug 2026 10:24:42 +0000

Manual testing alone can't keep up with modern software delivery. Every sprint, every release, and every hotfix demands repeated checks — and doing that by hand, again and again, is slow, expensive, and error-prone. That's where test automation tools step in.

In this guide, we'll walk through the fundamentals of test automation, compare it with manual testing, and then dive into three of the most widely used tools in the Java testing ecosystem: Selenium, JUnit, and TestNG. By the end, you'll understand not just what these tools do, but how they fit together to build a real automation workflow.

Introduction to Test Automation

Test automation is the practice of using specialized software to execute test cases, compare actual outcomes with expected results, and report the outcome — all without a human manually clicking through the application.

Instead of a tester repeating the same steps every time a new build is released, an automation script does it in seconds, consistently and accurately.

Why Do We Need Automation in Software Testing?

As applications grow bigger and release cycles get shorter (thanks to Agile and DevOps practices), manual testing starts to hit real limits:

Repetitive regression testing — Every new feature can break existing functionality. Re-testing the entire application manually for every release isn't scalable.
Speed of delivery — Teams push code multiple times a day. Manual testers simply cannot verify builds that fast.
Human error — Repetitive manual work leads to fatigue, and fatigue leads to missed bugs.
Cross-browser and cross-device coverage — Testing an app across 10 browser/OS combinations manually is extremely time-consuming.
Cost over time — While automation has an upfront investment, it pays off quickly for tests that get executed repeatedly.

The Automation Testing Life Cycle

Automation isn't just "write a script and run it." It follows a structured life cycle:

Test Tool Selection — Choosing the right automation tool based on the application type (web, mobile, desktop) and team's tech stack.
Defining the Scope of Automation — Deciding what to automate. Not everything should be automated — highly repetitive, stable, and business-critical flows are ideal candidates.
Planning, Design, and Development — Creating the test strategy, automation framework structure, and writing reusable test scripts.
Test Execution — Running the automated scripts, either on demand or as part of a CI/CD pipeline.
Result Analysis and Reporting — Reviewing pass/fail reports, logs, and screenshots to identify defects.
Maintenance — Updating test scripts as the application evolves (UI changes, new features, updated flows).

Manual Testing vs Automation Testing

Aspect	Manual Testing	Automation Testing
Execution	Performed by a human tester	Performed by scripts/tools
Speed	Slower, especially for large test suites	Much faster, especially for repetitive tests
Accuracy	Prone to human error and fatigue	Highly consistent and precise
Initial Cost	Low setup cost	Higher upfront investment (tools, scripting)
Best Suited For	Exploratory, usability, ad-hoc testing	Regression, load, repetitive functional testing
Reusability	Limited — steps repeated manually each time	High — scripts can be reused across builds
Human Judgment	Strong (intuition, visual/UX checks)	Weak (can't judge subjective quality)

Benefits of Test Automation

Faster feedback on code quality with every build
Reusable test scripts across multiple test cycles
Broader test coverage in less time
Reduced human error in repetitive checks
Easy integration with CI/CD pipelines for continuous testing
Detailed, consistent reporting for every run

Challenges of Test Automation

High initial investment in tools, framework setup, and skilled resources
Maintenance overhead — scripts break when the UI or application logic changes
Not suitable for all test types — exploratory and usability testing still need humans
Requires programming skills to write and maintain scripts
False confidence risk — passing automated tests don't guarantee bug-free software if coverage is poor

Selenium: Automating the Browser

Selenium is one of the most popular open-source frameworks for automating web browsers. It allows testers to simulate real user interactions — clicking buttons, filling forms, navigating pages — entirely through code.

What Makes Up the Selenium Framework?

Selenium isn't a single tool; it's a suite of components:

Selenium WebDriver — The core component used to directly communicate with the browser and control it programmatically.
Selenium Grid — Allows running tests in parallel across multiple machines and browsers simultaneously.
Selenium IDE — A browser extension for recording and playing back simple test scripts (great for beginners).

Understanding Selenium WebDriver

WebDriver acts as a bridge between your test script and the actual browser. It sends commands directly to the browser (Chrome, Firefox, Edge, Safari) using browser-specific drivers, which makes it fast and reliable compared to older approaches that relied on JavaScript injection.

A simple example of Selenium WebDriver in Java:

WebDriver driver = new ChromeDriver();
driver.get("https://example.com");
WebElement loginButton = driver.findElement(By.id("login"));
loginButton.click();

This script opens Chrome, navigates to a website, finds an element by its ID, and clicks it — exactly what a human tester would do manually, but automatically.

Advantages of Selenium for Web Application Testing

Open-source and free — no licensing cost
Multi-browser support — Chrome, Firefox, Edge, Safari, and more
Multi-language support — Java, Python, C#, JavaScript, Ruby
Cross-platform — Windows, macOS, Linux
Strong community support and extensive documentation
Easy integration with frameworks like JUnit, TestNG, and CI/CD tools like Jenkins

JUnit: The Foundation of Java Testing

JUnit is a widely used unit testing framework for Java applications. It provides a simple, annotation-based way to write and run repeatable tests, and it's often the first testing framework Java developers learn.

Core Concepts of JUnit

JUnit tests are written as regular Java methods, marked with special annotations that tell JUnit how and when to run them.

Common JUnit annotations:

@Test — Marks a method as a test case
@BeforeEach — Runs before every test method (setup)
@AfterEach — Runs after every test method (cleanup)
@BeforeAll — Runs once before all tests in the class
@AfterAll — Runs once after all tests in the class
@Disabled — Skips a test temporarily

Assertions in JUnit

Assertions are how JUnit verifies whether the actual outcome matches the expected outcome. If an assertion fails, the test fails.

import static org.junit.jupiter.api.Assertions.*;
import org.junit.jupiter.api.Test;

class CalculatorTest {

    @Test
    void testAddition() {
        Calculator calc = new Calculator();
        int result = calc.add(2, 3);
        assertEquals(5, result, "2 + 3 should equal 5");
    }
}

Common assertion methods include assertEquals(), assertTrue(), assertFalse(), assertNull(), and assertThrows().

Executing Test Cases in JUnit

JUnit tests can be executed through:

IDEs like IntelliJ IDEA or Eclipse (right-click → Run Test)
Build tools like Maven (mvn test) or Gradle (gradle test)
CI/CD pipelines, where tests run automatically on every code push

TestNG: A More Powerful Testing Framework

TestNG (Test Next Generation) was built to overcome some of the limitations of older Java testing frameworks. It's inspired by JUnit but adds more flexibility and features, making it a favorite for large-scale automation projects — especially when combined with Selenium.

Advantages of TestNG

Flexible test configuration using XML files
Built-in support for parallel test execution
Grouping of test cases (e.g., run only "smoke" tests or only "regression" tests)
Data-Driven Testing support out of the box
Better reporting with detailed HTML test reports
Dependency management between test methods

TestNG Annotations

@Test — Marks a method as a test
@BeforeMethod / @AfterMethod — Runs before/after each test method
@BeforeClass / @AfterClass — Runs before/after all methods in a class
@BeforeSuite / @AfterSuite — Runs before/after the entire test suite
@Test(priority = 1) — Controls execution order
@Test(groups = "smoke") — Groups related tests

Assertions in TestNG

TestNG uses a similar assertion style to JUnit:

import org.testng.Assert;
import org.testng.annotations.Test;

public class LoginTest {

    @Test
    public void verifyLoginTitle() {
        String actualTitle = "Login Page";
        Assert.assertEquals(actualTitle, "Login Page", "Title mismatch!");
    }
}

Data-Driven Testing with TestNG

One of TestNG's standout features is the @DataProvider annotation, which lets you run the same test method multiple times with different sets of input data — extremely useful for testing forms, login flows, or search functionality with various inputs.

@DataProvider(name = "loginData")
public Object[][] getLoginData() {
    return new Object[][] {
        {"user1", "pass123"},
        {"user2", "wrongpass"},
        {"admin", "adminpass"}
    };
}

@Test(dataProvider = "loginData")
public void testLogin(String username, String password) {
    // login logic using username and password
}

Integrating TestNG with Selenium

TestNG and Selenium work together beautifully: Selenium handles the browser interaction, while TestNG manages test structure, execution order, grouping, and reporting.

public class LoginTest {

    WebDriver driver;

    @BeforeMethod
    public void setUp() {
        driver = new ChromeDriver();
        driver.get("https://example.com/login");
    }

    @Test
    public void testValidLogin() {
        driver.findElement(By.id("username")).sendKeys("testuser");
        driver.findElement(By.id("password")).sendKeys("password123");
        driver.findElement(By.id("loginBtn")).click();

        String currentUrl = driver.getCurrentUrl();
        Assert.assertTrue(currentUrl.contains("dashboard"));
    }

    @AfterMethod
    public void tearDown() {
        driver.quit();
    }
}

This structure — Selenium for browser control, TestNG for test orchestration — is one of the most common combinations used in real-world automation frameworks.

Creating and Executing Automated Test Scripts

Bringing everything together, here's a practical step-by-step approach to building your first automated test script:

Set up your project — Use Maven or Gradle to manage dependencies (Selenium WebDriver, TestNG/JUnit).
Add browser drivers — Download the correct WebDriver (e.g., ChromeDriver) matching your browser version, or use a driver manager library to handle this automatically.
Write the test class — Structure your test using annotations (@BeforeMethod, @Test, @AfterMethod).
Locate web elements — Use locators like id, name, className, cssSelector, or xpath to find elements on the page.
Perform actions and assertions — Simulate user actions (click, type, select) and verify results using assertions.
Run the tests — Execute via IDE, build tool command, or CI/CD pipeline.
Review reports — Check TestNG/JUnit-generated reports to identify passed, failed, or skipped tests.
Maintain and refactor — As the application changes, update locators and test logic to keep scripts reliable.

Wrapping Up

_Test automation isn't about replacing manual testers — it's about freeing them from repetitive work so they can focus on exploratory testing, usability, and edge cases that truly need human judgment. _

Selenium gives you the power to automate real browser interactions.
JUnit provides a solid, simple foundation for writing and running Java tests.
TestNG builds on that foundation with more advanced features like grouping, parallel execution, and data-driven testing.

Together, these tools form the backbone of most Java-based test automation frameworks used in the industry today. Mastering them is a genuinely valuable skill — whether you're a student building your first automation project or a developer setting up a CI/CD testing pipeline.

A Beginner's Guide to Starting with HTML, CSS, and JavaScript

Bhadra Mohit — Sat, 29 Aug 2026 08:21:21 +0000

Everything you need to go from a blank text editor to a working, useful webpage

Every website you've ever visited — no matter how complex — is built on three foundations: HTML, CSS, and JavaScript. Frameworks and libraries sit on top of these three; they don't replace them. This guide goes deep into each one individually, then walks through building a genuinely useful project — a personal task tracker — combining everything you've learned.

Grab a text editor (VS Code is the standard choice, free, and works on every OS) and a browser. That's the entire toolchain required for everything below.

Part 1: HTML — Structure

HTML (HyperText Markup Language) describes what exists on a page. It isn't a programming language — there's no logic, no calculations — just structure, expressed through tags.

1.1 Anatomy of an HTML Document

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Page</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is my first paragraph.</p>
</body>
</html>

Breaking this down line by line:

<!DOCTYPE html> — tells the browser this is a modern HTML5 document. Always the first line, always exactly this.
<html lang="en"> — the root element wrapping everything; the lang attribute helps screen readers and search engines.
<head> — metadata that isn't visible on the page itself: character encoding, the page title (shown in the browser tab), linked CSS/JS files, and SEO tags.
<meta name="viewport"...> — without this line, your page won't resize properly on mobile devices. It's easy to forget and causes real problems later — include it in every project from day one.
<body> — everything the user actually sees goes here.

1.2 Tags, Elements, and Attributes

A tag is the markup itself (<p>). An element is the tag plus its content and closing tag (<p>Hello</p>). An attribute provides extra information inside the opening tag:

<a href="https://example.com" target="_blank">Visit Example</a>

Here, href and target are attributes — href sets the link destination, target="_blank" opens it in a new tab.

Most tags come in pairs (<p>...</p>). A handful are self-closing because they don't wrap content: <img>, <br>, <input>, <meta>.

1.3 The Essential Tags

Category	Tags	Purpose
Text	`<h1>`–`<h6>`, `<p>`, `<span>`, `<strong>`, `<em>`	Headings, paragraphs, inline emphasis
Structure	`<div>`, `<header>`, `<main>`, `<section>`, `<footer>`, `<nav>`	Grouping and page layout regions
Lists	`<ul>`, `<ol>`, `<li>`	Unordered/ordered lists
Links & media	`<a>`, `<img>`, `<video>`	Navigation and embedded content
Forms	`<form>`, `<input>`, `<button>`, `<label>`, `<textarea>`, `<select>`	Collecting user input
Tables	`<table>`, `<tr>`, `<td>`, `<th>`	Tabular data (not for layout)

A note on <div> versus the semantic tags (<header>, <main>, <section>, <footer>, <nav>): a <div> carries no meaning — it's a generic box. The semantic tags describe what a section of the page actually is, which helps accessibility tools, search engines, and other developers (including future you) understand the page's structure at a glance. Prefer semantic tags where one fits; fall back to <div> for anything generic.

1.4 Forms — Where Most Real Interactivity Starts

Almost every useful webpage eventually needs to collect input. A basic form looks like this:

<form>
    <label for="taskInput">New Task:</label>
    <input type="text" id="taskInput" placeholder="Enter a task...">
    <button type="submit">Add</button>
</form>

<label for="taskInput"> links to the <input> with the matching id — clicking the label focuses the input, and it's important for accessibility.
type="text" is one of many input types (email, number, checkbox, date, password all change behavior and mobile keyboard layout).
<button type="submit"> submits the form by default; you'll often override this behavior with JavaScript, which we'll do in the project below.

1.5 Practicing HTML Alone

Before adding any CSS or JS, build a static page with: a heading, a short bio paragraph, a list of three hobbies, a link to another site, and an image. This forces you to use headings, paragraphs, lists, links, and images without anything else to lean on — the fastest way to get comfortable with structure before layering on style and behavior.

Part 2: CSS — Style

CSS (Cascading Style Sheets) controls appearance: color, spacing, fonts, sizing, and layout.

2.1 Three Ways to Add CSS

<!-- 1. Inline (avoid except for quick testing) -->
<p style="color: blue;">Text</p>

<!-- 2. Internal (fine for small pages) -->
<style>
    p { color: blue; }
</style>

<!-- 3. External (the standard for real projects) -->
<link rel="stylesheet" href="style.css">

_
External stylesheets keep structure and style separate, which matters the moment your project grows past a single page._

2.2 Selectors

p { color: #333; }                 /* every <p> */
.highlight { background: yellow; } /* any element with class="highlight" */
#main-title { font-size: 2rem; }   /* the one element with id="main-title" */
.card h2 { margin-bottom: 10px; }  /* an <h2> inside an element with class="card" */
button:hover { opacity: 0.8; }     /* a button, only while hovered */

Classes vs IDs: use classes (.classname) for anything reused across multiple elements, and IDs (#idname) only for a single, unique element per page — often one you'll also target from JavaScript.

2.3 The Box Model

Every HTML element is a rectangular box made of four layers, from the inside out:

┌─────────────────────────────┐
│           margin             │
│  ┌─────────────────────────┐ │
│  │         border           │ │
│  │  ┌─────────────────────┐ │ │
│  │  │       padding         │ │ │
│  │  │  ┌─────────────────┐ │ │ │
│  │  │  │     content     │ │ │ │
│  │  │  └─────────────────┘ │ │ │
│  │  └─────────────────────┘ │ │
│  └─────────────────────────┘ │
└─────────────────────────────┘

.box {
    width: 200px;
    padding: 20px;      /* space inside the border */
    border: 2px solid #333;
    margin: 10px;        /* space outside the border */
}

By default, width only sets the content width — padding and border add on top, which trips up nearly every beginner at some point. Fix it globally with:

* {
    box-sizing: border-box;
}

This makes width include padding and border, so a 200px box stays 200px no matter how much padding you add. Add this at the top of every project.

2.4 Flexbox — Modern Layout in a Few Lines

.container {
    display: flex;
    justify-content: space-between; /* horizontal alignment */
    align-items: center;             /* vertical alignment */
    gap: 16px;                       /* space between children */
}

display: flex turns a container into a flex container — its direct children automatically line up in a row (by default) and can be aligned, spaced, and reordered without floats or manual positioning. This single property replaces most of the layout hacks that used to dominate CSS.

2.5 Responsive Design With Media Queries

.container {
    display: flex;
    flex-direction: row;
}

@media (max-width: 600px) {
    .container {
        flex-direction: column;
    }
}

Media queries apply CSS conditionally based on screen size — here, stacking a row layout into a column on small screens. Combined with the viewport <meta> tag from Part 1, this is the foundation of mobile-friendly design.

2.6 Practicing CSS Alone

Take the static page you built in Part 1 and style it: add a background color, style the heading with a custom font size and color, put the hobbies list items in a flex row with spacing between them, and add a hover effect on the link. No JavaScript yet — the goal is getting comfortable translating a visual idea into CSS properties.

Part 3: JavaScript — Behavior

JavaScript is a real programming language — variables, functions, conditionals, and loops all apply, on top of the ability to read and change the page itself.

3.1 Variables

let count = 0;          // can be reassigned later
const name = "Mohit";   // cannot be reassigned

Use const by default, and let only when you know the value will change. Avoid var — it behaves inconsistently compared to let and const and has no place in modern code.

3.2 Functions

function greet(name) {
    return `Hello, ${name}!`;
}

const greetArrow = (name) => `Hello, ${name}!`; // arrow function, same result

Functions group reusable logic. Arrow functions are a shorter syntax you'll see constantly in modern JavaScript and in every framework built on top of it.

3.3 Conditionals and Loops

const hour = 14;

if (hour < 12) {
    console.log("Good morning");
} else if (hour < 18) {
    console.log("Good afternoon");
} else {
    console.log("Good evening");
}

const tasks = ["Buy milk", "Walk the dog", "Write blog post"];
for (const task of tasks) {
    console.log(task);
}

3.4 The DOM — JavaScript's View of Your HTML

The DOM (Document Object Model) is how JavaScript sees your page: not as text, but as a tree of objects it can read and modify live.

document.querySelector('h1');          // first matching element
document.querySelectorAll('.item');    // all matching elements (a list)
document.getElementById('main-title'); // element with that exact id

Once you have an element, you can read or change it:

const heading = document.querySelector('h1');
heading.textContent = "Updated Heading";   // change the text
heading.style.color = "blue";              // change a style directly
heading.classList.add('highlight');        // add a CSS class

3.5 Events — Responding to the User

const button = document.querySelector('button');

button.addEventListener('click', function () {
    alert('Button was clicked!');
});

addEventListener is the core pattern of interactive JavaScript: pick an element, pick an event (click, submit, keydown, input, change), and provide a function to run when it happens.

3.6 Arrays and Common Array Methods

Most real UI work involves lists of things — tasks, products, comments — stored as arrays:

const tasks = ["Buy milk", "Walk the dog"];

tasks.push("Write blog post");     // add to the end
tasks.splice(1, 1);                 // remove 1 item at index 1

tasks.forEach(task => console.log(task)); // run code for each item
const upper = tasks.map(task => task.toUpperCase()); // transform each item into a new array

forEach and map will come up constantly once you start rendering lists of data onto a page — they're worth being genuinely comfortable with before moving on.

3.7 Practicing JavaScript Alone

Using the page from Parts 1 and 2, add a button that, when clicked, changes the heading's text and background color. Then add a second button that adds a new item to your hobbies list. This is deliberately close to what real UI code does constantly: respond to a click, then update the DOM.

Part 4: The Project — A Task Tracker

Time to combine everything into something genuinely useful: a task tracker that lets you add tasks, mark them complete, delete them, and see a live count — all saved so it doesn't disappear on refresh.

4.1 The HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Task Tracker</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="app">
        <h1>Task Tracker</h1>

        <form id="taskForm">
            <input type="text" id="taskInput" placeholder="Add a new task..." required>
            <button type="submit">Add</button>
        </form>

        <p id="taskCount">0 tasks remaining</p>

        <ul id="taskList"></ul>
    </div>

    <script src="script.js"></script>
</body>
</html>

4.2 The CSS

* {
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Arial, sans-serif;
    background-color: #f4f6f8;
    display: flex;
    justify-content: center;
    padding-top: 40px;
    margin: 0;
}

.app {
    background: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 400px;
}

h1 {
    text-align: center;
    color: #2c3e50;
    margin-bottom: 20px;
}

#taskForm {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

#taskInput {
    flex: 1;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 14px;
}

button {
    background-color: #3498db;
    color: white;
    border: none;
    padding: 10px 16px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
}

button:hover {
    background-color: #2980b9;
}

#taskCount {
    color: #7f8c8d;
    font-size: 14px;
    margin-bottom: 10px;
}

#taskList {
    list-style: none;
    padding: 0;
    margin: 0;
}

.task-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    border-bottom: 1px solid #eee;
}

.task-item span {
    flex: 1;
    cursor: pointer;
}

.task-item.completed span {
    text-decoration: line-through;
    color: #aaa;
}

.delete-btn {
    background-color: #e74c3c;
    padding: 4px 10px;
    font-size: 12px;
}

.delete-btn:hover {
    background-color: #c0392b;
}

4.3 The JavaScript

const taskForm = document.getElementById('taskForm');
const taskInput = document.getElementById('taskInput');
const taskList = document.getElementById('taskList');
const taskCount = document.getElementById('taskCount');

// Load saved tasks, or start with an empty list
let tasks = JSON.parse(localStorage.getItem('tasks')) || [];

function saveTasks() {
    localStorage.setItem('tasks', JSON.stringify(tasks));
}

function updateCount() {
    const remaining = tasks.filter(task => !task.completed).length;
    taskCount.textContent = `${remaining} task${remaining !== 1 ? 's' : ''} remaining`;
}

function renderTasks() {
    taskList.innerHTML = '';

    tasks.forEach((task, index) => {
        const li = document.createElement('li');
        li.className = 'task-item' + (task.completed ? ' completed' : '');

        const span = document.createElement('span');
        span.textContent = task.text;
        span.addEventListener('click', () => toggleComplete(index));

        const deleteBtn = document.createElement('button');
        deleteBtn.textContent = 'Delete';
        deleteBtn.className = 'delete-btn';
        deleteBtn.addEventListener('click', () => deleteTask(index));

        li.appendChild(span);
        li.appendChild(deleteBtn);
        taskList.appendChild(li);
    });

    updateCount();
}

function addTask(text) {
    tasks.push({ text, completed: false });
    saveTasks();
    renderTasks();
}

function toggleComplete(index) {
    tasks[index].completed = !tasks[index].completed;
    saveTasks();
    renderTasks();
}

function deleteTask(index) {
    tasks.splice(index, 1);
    saveTasks();
    renderTasks();
}

taskForm.addEventListener('submit', function (event) {
    event.preventDefault(); // stop the page from reloading on submit
    const text = taskInput.value.trim();
    if (text === '') return;

    addTask(text);
    taskInput.value = '';
});

renderTasks(); // render whatever was loaded from storage on page load

4.4 How This All Fits Together

Walking through what happens when you use this app ties every earlier section together:

On page load, JavaScript checks localStorage for previously saved tasks and renders them — this is why refreshing the page doesn't wipe your list.
Typing and submitting the form triggers the submit event listener. event.preventDefault() stops the browser's default behavior (reloading the page), which is essential — without it, every submission would refresh and lose your JavaScript state.
addTask pushes a new object into the tasks array, saves the whole array to localStorage as a JSON string, and calls renderTasks() to redraw the list.
renderTasks clears the existing list and rebuilds it from scratch using forEach, creating real DOM elements (createElement) for each task rather than writing raw HTML strings — a safer, more standard approach.
Clicking a task's text calls toggleComplete, flipping its completed flag, which the CSS then reflects instantly (.completed span gets a strikethrough) because renderTasks re-applies the completed class.
Clicking Delete calls deleteTask, which uses splice to remove that one item from the array before re-rendering.

Every concept from Parts 1–3 shows up here: semantic HTML and a form (Part 1), Flexbox and the box model for layout (Part 2), and DOM manipulation, events, arrays, and functions tying it all together (Part 3).

What to Build Next

Once this project makes sense end-to-end, natural next steps that build on the same patterns:

Add an "edit task" feature (click a task to turn it into an editable input)
Add categories or priority levels with different colors
Add a "clear completed" button
Fetch a real to-do list from a public API instead of starting empty

Each of these reuses the exact same core loop — read the DOM, update an array, re-render, save — which is, not coincidentally, the same core loop every JavaScript framework (React included) is built to manage for you automatically once your projects grow large enough to need it.

Final Thoughts

HTML, CSS, and JavaScript aren't a "beginner phase" to rush past on the way to frameworks — they're the actual foundation everything else sits on. The task tracker above is intentionally simple, but it's a genuinely complete, working, useful piece of software: it takes input, stores data, updates the interface, and persists state across page reloads. That's the same fundamental loop behind almost every web application you'll ever build, no matter how much more complex the tools around it eventually get.

Save the three files, open index.html in your browser, and you have a working app — built entirely from the ground up.

DEV Community: Bhadra Mohit

A Complete Guide to Git: Commands, Usage, and Step-by-Step Workflow

What is Git and Why Do You Need It?

Git vs a Traditional Save System

Git vs GitHub — A Common Point of Confusion

Installing and Setting Up Git

Starting a Project: init vs clone

git init — Start a New Repository

git clone — Copy an Existing Repository

The Core Git Workflow

Step 1: Check the Status

Step 2: Ignore Files You Don't Want Tracked

Step 3: Stage Your Changes

Step 4: Commit Your Changes

Step 5: View History

Step 6: Push to a Remote Repository

Step 7: Fetch and Pull Updates

Branching: Working on Features Independently

Merging Branches

Resolving Merge Conflicts

Deleting a Branch

Undoing Changes: Choosing the Right Command

git restore — Undo Uncommitted Changes

git reset — Move the Commit Pointer Backward

git revert — Safely Undo a Commit (Recommended for Shared Branches)

git reflog — Your Safety Net

Working with Remotes

Stashing: Temporarily Saving Work

Comparing Changes

Rewriting and Combining Commits

git rebase — Reapply Commits on Top of Another Branch

git cherry-pick — Apply a Specific Commit from Another Branch

Tagging Releases

Bonus: Submodules and Aliases

Git Submodules

Git Aliases — Save Yourself Some Typing

Common Git Commands Cheat Sheet

A Realistic Step-by-Step Example

Wrapping Up

Test Automation Tools: A Complete Guide to Selenium, JUnit, and TestNG

Introduction to Test Automation

Why Do We Need Automation in Software Testing?

The Automation Testing Life Cycle

Manual Testing vs Automation Testing

Benefits of Test Automation

Challenges of Test Automation

Selenium: Automating the Browser

What Makes Up the Selenium Framework?

Understanding Selenium WebDriver

Advantages of Selenium for Web Application Testing

JUnit: The Foundation of Java Testing

Core Concepts of JUnit

Assertions in JUnit

Executing Test Cases in JUnit

TestNG: A More Powerful Testing Framework

Advantages of TestNG

TestNG Annotations

Assertions in TestNG

Data-Driven Testing with TestNG

Integrating TestNG with Selenium

Creating and Executing Automated Test Scripts

Wrapping Up

A Beginner's Guide to Starting with HTML, CSS, and JavaScript

Everything you need to go from a blank text editor to a working, useful webpage

Part 1: HTML — Structure

1.1 Anatomy of an HTML Document

1.2 Tags, Elements, and Attributes

1.3 The Essential Tags

1.4 Forms — Where Most Real Interactivity Starts

1.5 Practicing HTML Alone

Part 2: CSS — Style

2.1 Three Ways to Add CSS

2.2 Selectors

2.3 The Box Model

2.4 Flexbox — Modern Layout in a Few Lines

2.5 Responsive Design With Media Queries

2.6 Practicing CSS Alone

Part 3: JavaScript — Behavior

3.1 Variables

3.2 Functions

Starting a Project: `init` vs `clone`

`git init` — Start a New Repository

`git clone` — Copy an Existing Repository

`git restore` — Undo Uncommitted Changes

`git reset` — Move the Commit Pointer Backward

`git revert` — Safely Undo a Commit (Recommended for Shared Branches)

`git reflog` — Your Safety Net

`git rebase` — Reapply Commits on Top of Another Branch

`git cherry-pick` — Apply a Specific Commit from Another Branch