VIT Students: Frontend Internship Prerequisites, from Git and JavaScript to Browser DevTools

To be ready for a frontend internship, you need four working skills. You should be able to use Git branches without fear, run and debug projects with npm, write basic asynchronous JavaScript, and find bugs in browser DevTools. HTML and CSS fluency is assumed. This guide gives you a scorecard, four exercises and a worked example so you can check each skill yourself, for example while at VIT.

What “ready” means for a frontend internship

Most beginner frontend internships are not about knowing a framework perfectly. A mentor will hand you a small task, such as fixing a layout bug, wiring a form to an API or adding a component. They will expect you to get the code, create a branch, run it, find the problem, change it and explain what you did. Every step in that loop depends on a tool, and the tools are where beginners lose the most time.

That is why this guide is organised around tools rather than around syllabus topics. A student who has finished a web technologies course can still be stuck on the first day because they have never resolved a merge conflict or read a failed network request. The four areas below close that gap.

• Git: branching, committing, merging, resolving conflicts and opening a pull request.
• npm: installing dependencies, reading package.json, running scripts and understanding version ranges.
• JavaScript async basics: callbacks, promises, async/await, fetch and error handling.
• Browser DevTools: Elements, Console, Network, Sources and basic performance checks.

The prerequisites scorecard

Rate yourself honestly on each row. Give 0 if you have never done it, 1 if you can do it with a tutorial open, and 2 if you can do it without help and explain why it works. Add up the scores at the end.

How to read your total (maximum 26):

• 20-26: You are ready to start a beginner task. Spend your time on a small portfolio project.
• 12-19: You have the base. Work through the exercises below for the rows where you scored 0 or 1.
• 0-11: Start with Exercises 1 and 2. They are the fastest route to being productive on a shared codebase.

Exercise 1: Git branching and conflict practice

Do this on a throwaway repository on your own laptop. Nothing here needs a remote server until the last step.

1. Create a folder, run git init and add a file named index.html with a heading. Commit it on the main branch.
2. Create a branch with git switch -c feature/navbar. Change the heading to “Home” and commit.
3. Switch back to main with git switch main. Change the same line to “Welcome” and commit.
4. Merge the feature branch into main with git merge feature/navbar. Git will report a conflict.
5. Open the file and find the conflict markers. Choose the final text, delete the markers and run git add followed by git commit.
6. Run git log --oneline --graph --all and describe in two sentences what the graph shows.
7. Push to a new empty repository on a hosting service of your choice, then open a pull request from a second branch to main.

What good looks like: you can explain why the conflict happened (two branches changed the same line) without looking at notes. You also know that git pull is a fetch followed by a merge.

Habits mentors notice

• One purpose per branch, and a name that says what it is for.
• Commit messages in the imperative: “Fix button alignment on mobile”, not “changes”.
• Never committing node_modules. Add it to .gitignore before your first commit.
• Checking git status and git diff before every commit.

Exercise 2: npm workflow drill

Node.js includes npm. Check the installed versions with node -v and npm -v.

1. Create a project with npm init -y and open the generated package.json.
2. Install a runtime dependency (for example a small date library) with npm install. Install a development tool such as a linter with npm install --save-dev. Note which section of package.json each lands in.
3. Add a "scripts" entry such as "lint": "eslint ." and run it with npm run lint.
4. Delete the node_modules folder and run npm install again. Confirm the project rebuilds from package.json and the lock file alone.
5. Run npm outdated and read the output. Find the columns for current, wanted and latest versions.
6. Run npm audit and read one finding. Decide what you would ask a senior developer before running a forced fix.

Concepts to be able to explain aloud:

• What the caret (^) and tilde (~) mean in a version range.
• Why the lock file is committed to the repository.
• The difference between dependencies and devDependencies.
• The difference between npm install and npm ci, and when a team prefers the second.

Common errors to practise reading:

• Module not found: usually a missing install or a wrong import path, including letter case.
• Peer dependency conflict: two packages want incompatible versions of a third.
• Permission or path errors on install: often an environment issue, not a code issue.
• Script not found: the name in npm run does not match the scripts entry.

Exercise 3: JavaScript async basics

Frontend work is mostly waiting for something: a server, a timer or a user. If async code confuses you, you will write bugs that appear only some of the time.

Step A: Predict the output

Before running this snippet, write down the order in which you expect the three lines to print. Then run it in the browser Console.

console.log("A");
setTimeout(() => console.log("B"), 0);
Promise.resolve().then(() => console.log("C"));
console.log("D");

The point is to understand the event loop at a working level. Synchronous code runs first, then promise callbacks (microtasks), then timer callbacks (tasks). If your prediction was wrong, read about microtasks and try again. This snippet is illustrative, so check the real output yourself.

Step B: Build a fetch with three states

Write a small page that loads a list from a public JSON endpoint. It must show a loading message, the list on success and a readable message on failure.

async function loadUsers() {
  const status = document.querySelector("#status");
  status.textContent = "Loading...";
  try {
    const res = await fetch("https://example.com/api/users");
    if (!res.ok) {
      throw new Error("Request failed: " + res.status);
    }
    const users = await res.json();
    status.textContent = "";
    renderUsers(users);
  } catch (err) {
    status.textContent = "Could not load users. Try again.";
    console.error(err);
  }
}

This code is an illustrative pattern, and the URL is a placeholder. The line most beginners miss is the res.ok check. fetch only rejects on network failure, so a 404 or 500 response still resolves unless you test for it.

Step C: Run requests in parallel

Fetch two endpoints at once with Promise.all. Then change one URL to a bad one and observe what happens to the whole result. Write one sentence on when Promise.allSettled would be a better choice.

Checklist for async fluency:

• You can convert a promise chain to async/await, and back.
• You know that an async function always returns a promise.
• You handle errors with try/catch and do not leave empty catch blocks.
• You avoid await inside a loop when the calls are independent.
• You can cancel or ignore a stale request, for example with AbortController.

Exercise 4: Browser DevTools debugging

Chrome, Edge and Firefox all offer DevTools. Press F12, or right-click an element and choose Inspect. Panel names differ slightly between browsers, but the ideas carry across.

A debugging routine that works

1. Reproduce the bug reliably and write down the exact steps.
2. Read the Console first. The first error often explains the later ones.
3. Narrow the scope. Is it the data (Network), the structure (Elements) or the logic (Sources)?
4. Hypothesise one cause and test it with a breakpoint or a live edit.
5. Fix and verify in the original steps, then check a second screen size.
6. Record the cause in your commit message so the next person learns from it.

Worked example (illustrative): the list that never appears

This is a made-up scenario to show how the four tools combine. It is not a record of a real project or a real test run.

The task: A mentor assigns you a bug. A “Courses” page shows an empty list, and users report it only on the staging build.

1. Git. Clone the repository, run git switch -c fix/empty-course-list, and keep the branch separate from main.
2. npm. Run npm ci to match the lock file, then npm run start. The page loads locally, and the list is still empty.
3. DevTools, Console. You see a red error: cannot read properties of undefined while reading a property named items.
4. DevTools, Network. The request to the courses endpoint returns status 200, but the Response tab shows the data as a plain array, with no items wrapper.
5. DevTools, Sources. Place a breakpoint on the line that reads data.items. Pausing confirms that data is an array.
6. JavaScript. The code assumed an object shape that the server does not return. You change the code to accept an array, and you add a guard that shows “No courses yet” when the array is empty. You also add a res.ok check that was missing.
7. Git. Stage only the two changed files after reading git diff. Commit with the message “Handle array response in course list and add empty state”. Push and open a pull request.
8. Pull request description. Write the symptom, the cause, the fix and how a reviewer can check it (open the page, confirm the list renders, confirm the empty state with an empty array).

The fix itself is small. What the mentor values is the path: you reproduced the bug, narrowed it with evidence and left a clear record. That is the skill set the scorecard measures.

A four-week practice plan

If you have less time, do weeks 1 and 4 first. Git and DevTools show up on the first day of almost any frontend task.

Where a free online internship fits

Once your scorecard sits near 20, a structured task list helps you apply these tools on real assignments. The free two-week online internship from CareerSwami runs for 14 days, with 26 tracks to choose from. It includes a free offer letter and a free completion certificate after successful completion. CareerSwami is an independent platform and has no stated link with your university. Treat it as extra practice you can describe in your own words, not as a replacement for your college’s requirements.

VIT Vellore and Frontend Internship Preparation: Rules That Shape Your Timeline

The FFCS Academic Regulations (Version 4.0) on vit.ac.in say students should complete four weeks of industrial internship after the first year, in one stretch or two stretches of two weeks, for the credits prescribed in the curriculum. A frontend student can use this window after the first or second year, since the work expected, building and debugging interfaces, can be recorded in the log week by week.

Because the log and the viva voce are evaluated, a Git history with clear commits and notes on what was fixed in browser DevTools gives concrete material to show an evaluator. Students keep a digital activity log, then upload a report and the industry’s completion certificate to the academic software; the School’s evaluation committee awards a grade after a viva voce, and the student registers for the internship course in a later semester.

The Career Development Centre, described on the VIT placement page, coordinates placement and internship work across the four campuses and facilitates summer and winter internships. The same page states that VIT does not guarantee a fixed placement rate. The Regulations also state that each School has a faculty in-charge who helps students find an industry and obtain its approval, so the choice of company should go through that person early. Treat these as the 2024 version of the rules and check the current one.

Frontend-specific checks before you apply

• Open the current academic regulations on vit.ac.in and confirm the version still applies to your admission year.
• Ask your School’s industrial internship in-charge whether the company and the work you plan are acceptable.
• Check your branch curriculum for the exact internship and project credits and the semester in which to register.
• Keep the activity log updated weekly and get the completion certificate in the format your School expects.
• Write to placement@vit.ac.in or visit the CDC for current rules on summer and winter internships.

Frequently Asked Questions

Do I need a framework like React before a frontend internship?

Not necessarily. Many beginner tasks expect solid HTML, CSS and JavaScript first, and a framework second. If you plan to learn one, do it after you pass the async and DevTools rows of the scorecard, since framework bugs are debugged with the same tools.

How much Git do I really need?

Enough to work on a branch, commit cleanly, resolve a simple conflict, and open a pull request. Rebasing and advanced history editing can wait until a team asks for them.

What is the difference between npm install and npm ci?

Broadly, npm install can update the lock file as it resolves versions. npm ci installs exactly what the lock file lists and fails if it does not match package.json. Teams often use the second in automated builds for repeatability.

Why does my fetch not throw an error on a 404?

fetch rejects mainly on network-level failures. An HTTP error status still produces a response, so check res.ok or res.status and throw your own error.

Is console.log enough for debugging?

It works for quick checks, but breakpoints let you inspect every variable at a moment in time and step through logic without editing code. Learn both and prefer breakpoints for anything involving state or async flow.

Can I complete these exercises without a powerful laptop?

Yes. Git, npm and DevTools run well on modest machines. Keep to small projects and close other tabs while profiling.

Will an online internship count for credit at VIT?

That depends on your programme’s rules, which this article cannot confirm. Ask your faculty advisor or career office for the clause in writing before you rely on it.

What should I put on my resume after these exercises?

List projects, not tool names alone. For example, a page with three-state data fetching, a link to the repository and a one-line summary of a bug you diagnosed. Do not claim a skill you cannot demonstrate in a short live walkthrough.

Related Frontend Development guides

• SRM Students: Frontend Development Internship Project Ideas with Defined Scope
• Chandigarh University Students: Frontend Internship Interview Questions on CSS, JavaScript and React
• Lovely Professional University Students: Spotting Genuine Frontend Development Internship Opportunities
• All Frontend Development internship guides