npm install
📦 GitHub
✨ The Prompt Phrase
Which command do you run in your terminal to download and set up all the dependencies listed in a project's package.json file? ~npm install~
💻 Code Preview
📦 All-in-One Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>npm install - Interactive Tutorial</title>
<style>
:root {
--bg: #0f172a;
--card-bg: rgba(30, 41, 59, 0.7);
--primary: #cb3837; /* npm Red */
--secondary: #fbbf24;
--accent: #818cf8;
--text: #f1f5f9;
--text-muted: #94a3b8;
--success: #22c55e;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
background-color: var(--bg);
background-image:
radial-gradient(circle at 20% 20%, rgba(203, 56, 55, 0.15) 0%, transparent 40%),
radial-gradient(circle at 80% 80%, rgba(129, 140, 248, 0.15) 0%, transparent 40%);
color: var(--text);
line-height: 1.6;
overflow-x: hidden;
}
/* Layout */
.container { max-width: 900px; margin: 0 auto; padding: 20px; }
/* Hero Section */
.hero {
height: 80vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
animation: fadeIn 1s ease-out;
}
.hero h1 {
font-size: clamp(2.5rem, 8vw, 5rem);
background: linear-gradient(to right, #fff, var(--primary), #fff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 20px;
font-family: monospace;
}
.hero p { font-size: 1.2rem; color: var(--text-muted); max-width: 600px; }
/* Glassmorphism Cards */
.section {
background: var(--card-bg);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 24px;
padding: 40px;
margin-bottom: 40px;
box-shadow: 0 20px 40px rgba(0,0,0,0.3);
transition: transform 0.3s ease;
}
.section:hover { transform: translateY(-5px); }
h2 { color: var(--primary); margin-bottom: 20px; display: flex; align-items: center; gap: 10px; }
/* CSS-Only Tabs */
.tab-wrapper { margin-top: 20px; }
.tab-input { display: none; }
.tab-labels { display: flex; gap: 10px; margin-bottom: 20px; border-bottom: 1px solid #334155; padding-bottom: 10px; }
.tab-label { cursor: pointer; padding: 8px 16px; border-radius: 8px; transition: 0.3s; color: var(--text-muted); }
#tab1:checked ~ .tab-labels label[for="tab1"],
#tab2:checked ~ .tab-labels label[for="tab2"] {
background: var(--primary);
color: white;
}
.tab-content { display: none; animation: slideIn 0.4s ease; }
#tab1:checked ~ .content1, #tab2:checked ~ .content2 { display: block; }
/* Accordion */
details { background: rgba(255,255,255,0.05); border-radius: 12px; margin-bottom: 10px; }
summary { padding: 15px; cursor: pointer; font-weight: bold; list-style: none; display: flex; justify-content: space-between; }
summary::after { content: '▼'; font-size: 0.8rem; transition: 0.3s; }
details[open] summary::after { transform: rotate(180deg); }
.details-content { padding: 0 15px 15px; color: var(--text-muted); }
/* Code Breakdown */
.code-box {
background: #000;
padding: 20px;
border-radius: 12px;
font-family: monospace;
position: relative;
overflow-x: auto;
border-left: 4px solid var(--primary);
}
.token-cmd { color: #50fa7b; }
.token-arg { color: #f1fa8c; }
/* Tooltip */
.tooltip {
position: relative;
border-bottom: 1px dashed var(--secondary);
cursor: help;
color: var(--secondary);
}
.tooltip::after {
content: attr(data-tip);
position: absolute;
bottom: 125%;
left: 50%;
transform: translateX(-50%);
background: #334155;
color: white;
padding: 8px 12px;
border-radius: 6px;
font-size: 0.8rem;
width: 200px;
opacity: 0;
visibility: hidden;
transition: 0.3s;
z-index: 10;
}
.tooltip:hover::after { opacity: 1; visibility: visible; }
/* Quiz */
.quiz-option {
display: block;
padding: 15px;
background: rgba(255,255,255,0.05);
border-radius: 10px;
margin-bottom: 10px;
cursor: pointer;
transition: 0.3s;
}
.quiz-input { display: none; }
.feedback { height: 0; overflow: hidden; transition: 0.5s; opacity: 0; }
.quiz-input:checked + .quiz-option { background: var(--accent); }
#q1-correct:checked ~ .feedback-correct,
#q1-wrong:checked ~ .feedback-wrong {
height: auto; opacity: 1; padding: 15px; margin-top: 10px; border-radius: 10px;
}
.feedback-correct { background: rgba(34, 197, 94, 0.2); border: 1px solid var(--success); }
.feedback-wrong { background: rgba(239, 68, 68, 0.2); border: 1px solid #ef4444; }
/* Animations */
@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } }
.confetti-box { display: none; font-size: 2rem; }
#q1-correct:checked ~ .confetti-box { display: block; animation: bounce 1s infinite; }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
/* Footer */
footer { text-align: center; padding: 40px; color: var(--text-muted); font-size: 0.9rem; }
/* Responsive */
@media (max-width: 600px) {
.section { padding: 20px; }
.hero h1 { font-size: 3rem; }
}
</style>
</head>
<body>
<div class="container">
<!-- 1. Hero Header -->
<header class="hero">
<h1>npm install</h1>
<p>The magic wand of the JavaScript world. One command to bring your project to life! 🚀</p>
<div style="margin-top: 30px;">
<a href="#what" style="color: var(--primary); text-decoration: none; font-weight: bold;">Scroll to Start ↓</a>
</div>
</header>
<!-- PART A: Quick Overview -->
<section id="what" class="section">
<h2>📦 What Is It?</h2>
<p>Imagine you're building a LEGO castle. Instead of molding every single plastic brick yourself, you order a "Castle Kit" that comes with all the pieces you need. 🧱</p>
<p style="margin-top: 15px;">
<strong>npm install</strong> is that order form. It looks at your project's list of requirements (the <code>package.json</code>) and automatically downloads every tool, library, and "brick" your code needs to run.
</p>
</section>
<!-- 3. Why Use It? -->
<section class="section">
<h2>🤔 Why Use It?</h2>
<div class="tab-wrapper">
<input type="radio" name="tabs" id="tab1" class="tab-input" checked>
<input type="radio" name="tabs" id="tab2" class="tab-input">
<div class="tab-labels">
<label for="tab1" class="tab-label">For Beginners</label>
<label for="tab2" class="tab-label">For Pros</label>
</div>
<div class="tab-content content1">
<p>✅ <strong>No Manual Downloads:</strong> Don't hunt for ZIP files on random websites.</p>
<p>✅ <strong>Instant Setup:</strong> Get a complex project running in seconds.</p>
<p>✅ <strong>Safety:</strong> Ensures you have the exact version of a tool that works.</p>
</div>
<div class="tab-content content2">
<p>🚀 <strong>Dependency Management:</strong> Handles "dependencies of dependencies" automatically.</p>
<p>🚀 <strong>Consistency:</strong> Ensures every developer on the team has the same environment.</p>
<p>🚀 <strong>Automation:</strong> Easily integrates into CI/CD pipelines for deployment.</p>
</div>
</div>
</section>
<!-- 4. How Does It Work? -->
<section class="section">
<h2>⚙️ How Does It Work?</h2>
<details>
<summary>Step 1: The Reading 📖</summary>
<div class="details-content">npm looks for a file named <code>package.json</code> in your folder. This is your project's "shopping list".</div>
</details>
<details>
<summary>Step 2: The Fetching 🚚</summary>
<div class="details-content">It connects to the global <span class="tooltip" data-tip="A massive online database of JS code">npm registry</span> and finds the requested packages.</div>
</details>
<details>
<summary>Step 3: The Storage 🏗️</summary>
<div class="details-content">It creates a folder called <code>node_modules</code> and stuffs everything inside. It also creates a <code>package-lock.json</code> to remember exactly what it did.</div>
</details>
</section>
<!-- 6. Code Breakdown -->
<section class="section">
<h2>🔍 Code Breakdown</h2>
<div class="code-box">
<span class="token-cmd">npm</span>
<span class="token-arg">install</span>
</div>
<ul style="margin-top: 20px; list-style-position: inside;">
<li><strong>npm</strong>: The "Node Package Manager" tool.</li>
<li><strong>install</strong>: The command telling it to download dependencies.</li>
</ul>
<p style="margin-top: 15px; font-size: 0.9rem; color: var(--text-muted);">
<em>Pro Tip: You can shorten this to just <code>npm i</code>!</em>
</p>
</section>
<!-- 7. Common Mistakes -->
<section class="section" style="border-left: 4px solid #ef4444;">
<h2>⚠️ Common Mistakes</h2>
<p>❌ <strong>Deleting node_modules:</strong> Don't panic if you do! Just run <code>npm install</code> again to bring it back.</p>
<p>❌ <strong>Committing node_modules to Git:</strong> NEVER do this. It's too heavy. Use a <code>.gitignore</code> file!</p>
<p>❌ <strong>Running without package.json:</strong> It won't know what to download. Make sure you're in the right folder.</p>
</section>
<!-- 9. Practice Quiz -->
<section class="section">
<h2>🎮 Mini Quiz</h2>
<p style="margin-bottom: 20px;">Where does npm store the downloaded packages?</p>
<input type="radio" name="quiz1" id="q1-wrong" class="quiz-input">
<label for="q1-wrong" class="quiz-option">A) In a folder called 'downloads'</label>
<input type="radio" name="quiz1" id="q1-correct" class="quiz-input">
<label for="q1-correct" class="quiz-option">B) In a folder called 'node_modules'</label>
<div class="feedback feedback-wrong">❌ Not quite! Try again. Hint: It starts with 'node_'.</div>
<div class="feedback feedback-correct">✨ Correct! You're a natural! 🎉</div>
<div class="confetti-box">🎊 🥳 🎈</div>
</section>
<!-- 10. Summary Card -->
<section class="section" style="background: linear-gradient(135deg, var(--primary), var(--accent)); color: white;">
<h2>📜 Cheat Sheet</h2>
<p>• <strong>Command:</strong> <code>npm install</code></p>
<p>• <strong>Goal:</strong> Download project dependencies.</p>
<p>• <strong>Requirement:</strong> Needs a <code>package.json</code> file.</p>
<p>• <strong>Output:</strong> Creates <code>node_modules/</code> folder.</p>
</section>
<footer>
<p>Generated by AI Prompt Dictionary • 2024</p>
<p style="margin-top: 10px; font-size: 0.7rem;">No JavaScript was harmed (or used) in the making of this tutorial.</p>
</footer>
</div>
</body>
</html>
Live Preview