Skip to content

Instantly share code, notes, and snippets.

@Galaktikshapes

Galaktikshapes/index.html

Created March 13, 2026 15:30
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Galaktikshapes/ffde96812608468a444a3fe6901690cb to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Galaktikshapes/ffde96812608468a444a3fe6901690cb to your computer and use it in GitHub Desktop.
Download ZIP
Untitled
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ISTQB Foundation Level - Cram Sheet</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 20px;
line-height: 1.4;
color: #1a202c;
}
.container {
max-width: 850px;
margin: 0 auto;
background: white;
border-radius: 12px;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
overflow: hidden;
}
.header {
background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
color: white;
padding: 30px;
text-align: center;
}
.header h1 {
font-size: 28px;
font-weight: 700;
margin-bottom: 8px;
letter-spacing: -0.5px;
}
.header .subtitle {
font-size: 14px;
opacity: 0.9;
font-weight: 500;
}
.content {
padding: 30px;
}
.section {
margin-bottom: 24px;
break-inside: avoid;
}
.section-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
padding-bottom: 8px;
border-bottom: 2px solid #e5e7eb;
}
.section-number {
background: #3b82f6;
color: white;
width: 28px;
height: 28px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 14px;
flex-shrink: 0;
}
.section-title {
font-size: 16px;
font-weight: 700;
color: #1e3a8a;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.section-body {
padding-left: 38px;
}
.process-flow {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 10px 0;
}
.process-step {
background: #f0f9ff;
border: 1px solid #bae6fd;
border-radius: 6px;
padding: 8px 12px;
font-size: 12px;
flex: 1;
min-width: 140px;
position: relative;
}
.process-step::after {
content: "→";
position: absolute;
right: -12px;
top: 50%;
transform: translateY(-50%);
color: #3b82f6;
font-weight: bold;
}
.process-step:last-child::after {
content: none;
}
.process-step strong {
color: #0369a1;
display: block;
margin-bottom: 2px;
}
table {
width: 100%;
border-collapse: collapse;
margin: 10px 0;
font-size: 13px;
}
th {
background: #1e3a8a;
color: white;
padding: 10px;
text-align: left;
font-weight: 600;
}
td {
padding: 10px;
border-bottom: 1px solid #e5e7eb;
}
tr:nth-child(even) {
background: #f8fafc;
}
.badge {
display: inline-block;
padding: 3px 8px;
border-radius: 4px;
font-size: 11px;
font-weight: 600;
margin-right: 6px;
}
.badge-blue { background: #dbeafe; color: #1e40af; }
.badge-green { background: #d1fae5; color: #065f46; }
.badge-purple { background: #e9d5ff; color: #6b21a8; }
.badge-orange { background: #ffedd5; color: #9a3412; }
.technique-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin: 10px 0;
}
.technique-card {
background: #f8fafc;
border-radius: 8px;
padding: 12px;
border-left: 3px solid #3b82f6;
}
.technique-card h4 {
font-size: 12px;
color: #3b82f6;
margin-bottom: 6px;
text-transform: uppercase;
}
.technique-card ul {
list-style: none;
font-size: 12px;
}
.technique-card li {
padding: 2px 0;
padding-left: 12px;
position: relative;
}
.technique-card li::before {
content: "•";
position: absolute;
left: 0;
color: #3b82f6;
}
.formula-box {
background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
border: 2px solid #7dd3fc;
border-radius: 8px;
padding: 12px;
text-align: center;
margin: 10px 0;
}
.formula {
font-family: 'Courier New', monospace;
font-size: 14px;
font-weight: 700;
color: #0369a1;
}
.lifecycle-flow {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 4px;
margin: 10px 0;
font-size: 12px;
}
.lifecycle-step {
background: #fef3c7;
padding: 6px 10px;
border-radius: 4px;
border: 1px solid #fcd34d;
font-weight: 600;
color: #92400e;
}
.arrow {
color: #9ca3af;
font-weight: bold;
}
.comparison {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin: 10px 0;
}
.comparison-box {
padding: 10px;
border-radius: 6px;
font-size: 12px;
}
.severity {
background: #fee2e2;
border-left: 3px solid #ef4444;
}
.priority {
background: #dbeafe;
border-left: 3px solid #3b82f6;
}
.memory-tricks {
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
border-radius: 8px;
padding: 16px;
margin-top: 20px;
}
.memory-tricks h3 {
font-size: 14px;
color: #92400e;
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 6px;
}
.trick-item {
display: flex;
align-items: flex-start;
gap: 8px;
margin: 6px 0;
font-size: 12px;
}
.trick-acronym {
background: #92400e;
color: white;
padding: 2px 6px;
border-radius: 4px;
font-weight: 700;
font-family: monospace;
flex-shrink: 0;
}
.tips-box {
background: #ecfdf5;
border: 1px solid #6ee7b7;
border-radius: 8px;
padding: 16px;
margin-top: 20px;
}
.tips-box h3 {
color: #065f46;
font-size: 14px;
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 6px;
}
.tips-list {
list-style: none;
font-size: 12px;
}
.tips-list li {
padding: 4px 0;
padding-left: 16px;
position: relative;
}
.tips-list li::before {
content: "✓";
position: absolute;
left: 0;
color: #10b981;
font-weight: bold;
}
.highlight {
background: #fef08a;
padding: 2px 4px;
border-radius: 3px;
font-weight: 600;
}
.key-point {
background: #f0f9ff;
border-left: 3px solid #0ea5e9;
padding: 8px 12px;
margin: 8px 0;
font-size: 12px;
border-radius: 0 4px 4px 0;
}
@media print {
body {
background: white;
padding: 0;
}
.container {
box-shadow: none;
max-width: 100%;
}
.section {
break-inside: avoid;
}
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>ISTQB Foundation Level</h1>
<div class="subtitle">Last-Minute Cram Sheet • Certification Exam Prep</div>
</div>
<div class="content">
<!-- Section 1: Test Process -->
<div class="section">
<div class="section-header">
<div class="section-number">1</div>
<div class="section-title">Fundamental Test Process</div>
</div>
<div class="section-body">
<div class="process-flow">
<div class="process-step">
<strong>Planning & Control</strong>
Scope, strategy, resources, schedule
</div>
<div class="process-step">
<strong>Analysis & Design</strong>
Identify conditions, design test cases
</div>
<div class="process-step">
<strong>Implementation & Execution</strong>
Run tests, log defects
</div>
<div class="process-step">
<strong>Exit Criteria & Reporting</strong>
Check goals, report results
</div>
<div class="process-step">
<strong>Test Closure</strong>
Archive testware, lessons learned
</div>
</div>
<div class="key-point">
<strong>Key Point:</strong> Testing is <span class="highlight">iterative</span>, not strictly sequential
</div>
</div>
</div>
<!-- Section 2: Test Levels -->
<div class="section">
<div class="section-header">
<div class="section-number">2</div>
<div class="section-title">Test Levels</div>
</div>
<div class="section-body">
<table>
<tr>
<th>Level</th>
<th>Purpose</th>
</tr>
<tr>
<td><span class="badge badge-blue">Unit</span></td>
<td>Test individual components/modules in isolation</td>
</tr>
<tr>
<td><span class="badge badge-green">Integration</span></td>
<td>Test combined modules/interfaces between components</td>
</tr>
<tr>
<td><span class="badge badge-purple">System</span></td>
<td>Test the complete system as a whole (end-to-end)</td>
</tr>
<tr>
<td><span class="badge badge-orange">Acceptance</span></td>
<td>Verify requirements are met by the user/stakeholder</td>
</tr>
</table>
</div>
</div>
<!-- Section 3: Test Types -->
<div class="section">
<div class="section-header">
<div class="section-number">3</div>
<div class="section-title">Test Types</div>
</div>
<div class="section-body">
<table>
<tr>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><strong>Functional</strong></td>
<td>Verify features work against requirements (what the system does)</td>
</tr>
<tr>
<td><strong>Non-Functional</strong></td>
<td>Performance, security, usability, reliability (how well it does it)</td>
</tr>
<tr>
<td><strong>Regression</strong></td>
<td>Check existing functionality still works after changes/fixes</td>
</tr>
<tr>
<td><strong>Smoke / Sanity</strong></td>
<td>Quick checks to see if software is stable enough for further testing</td>
</tr>
</table>
</div>
</div>
<!-- Section 4: Test Design Techniques -->
<div class="section">
<div class="section-header">
<div class="section-number">4</div>
<div class="section-title">Test Design Techniques</div>
</div>
<div class="section-body">
<div class="technique-grid">
<div class="technique-card">
<h4>Black Box / Specification-Based</h4>
<ul>
<li><strong>Equivalence Partitioning</strong> – Reduce redundant tests by grouping inputs</li>
<li><strong>Boundary Value Analysis</strong> – Test edges of ranges (min, max, just beyond)</li>
<li><strong>Decision Tables</strong> – Test combinations of inputs/conditions</li>
</ul>
</div>
<div class="technique-card">
<h4>White Box / Structure-Based</h4>
<ul>
<li><strong>Statement Coverage</strong> – Execute all statements</li>
<li><strong>Branch Coverage</strong> – Execute all decision outcomes</li>
<li><strong>Path Coverage</strong> – Execute all independent paths</li>
</ul>
</div>
</div>
<div class="technique-card" style="margin-top: 8px; border-left-color: #8b5cf6;">
<h4 style="color: #8b5cf6;">Experience-Based</h4>
<ul>
<li><strong>Exploratory Testing</strong> – Simultaneous learning, test design, and execution</li>
<li><strong>Error Guessing</strong> – Anticipate defects based on experience</li>
</ul>
</div>
</div>
</div>
<!-- Section 5: Test Coverage -->
<div class="section">
<div class="section-header">
<div class="section-number">5</div>
<div class="section-title">Test Coverage</div>
</div>
<div class="section-body">
<p style="font-size: 12px; margin-bottom: 8px;"><strong>Definition:</strong> How much of the software (requirements, code, or tests) has been exercised.</p>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: 12px; margin: 8px 0;">
<div><strong>Types:</strong> Requirement, Code, Test Case, Defect coverage</div>
<div><strong>Thresholds:</strong> Minimum (release criteria) vs Maximum (100%, often impractical)</div>
</div>
<div class="formula-box">
<div class="formula">Coverage % = (Items Tested / Total Items) × 100</div>
</div>
</div>
</div>
<!-- Section 6: Defects -->
<div class="section">
<div class="section-header">
<div class="section-number">6</div>
<div class="section-title">Defect Management</div>
</div>
<div class="section-body">
<p style="font-size: 12px; margin-bottom: 8px;"><strong>Lifecycle:</strong></p>
<div class="lifecycle-flow">
<span class="lifecycle-step">New</span>
<span class="arrow">→</span>
<span class="lifecycle-step">Assigned</span>
<span class="arrow">→</span>
<span class="lifecycle-step">Open</span>
<span class="arrow">→</span>
<span class="lifecycle-step">Fixed</span>
<span class="arrow">→</span>
<span class="lifecycle-step">Retest</span>
<span class="arrow">→</span>
<span class="lifecycle-step">Closed</span>
</div>
<div class="comparison">
<div class="comparison-box severity">
<strong>Severity</strong> = Impact on system<br>
<span style="font-size: 11px; color: #666;">How bad is the bug?</span>
</div>
<div class="comparison-box priority">
<strong>Priority</strong> = Urgency to fix<br>
<span style="font-size: 11px; color: #666;">How soon must it be fixed?</span>
</div>
</div>
<div style="background: #f3f4f6; padding: 10px; border-radius: 6px; font-size: 11px; margin-top: 8px;">
<strong>Defect Report Must Include:</strong> Summary, Steps to Reproduce, Expected vs Actual Result, Severity, Priority, Environment
</div>
</div>
</div>
<!-- Section 7: Checklist-Based Testing -->
<div class="section">
<div class="section-header">
<div class="section-number">7</div>
<div class="section-title">Checklist-Based Testing</div>
</div>
<div class="section-body">
<ul style="font-size: 12px; list-style: none; padding-left: 0;">
<li style="padding: 4px 0;">✓ Use predefined checklists to ensure testing completeness</li>
<li style="padding: 4px 0;">✓ <strong>Good for:</strong> Smoke tests, sanity checks, regression, compliance</li>
<li style="padding: 4px 0;">✗ <strong>Limitation:</strong> Not exhaustive; best combined with exploratory testing</li>
</ul>
</div>
</div>
<!-- Memory Tricks -->
<div class="memory-tricks">
<h3>🧠 Quick Memory Tricks (Acronyms)</h3>
<div class="trick-item">
<span class="trick-acronym">PDCA</span>
<span><strong>Plan, Do, Check, Act</strong> — Test process improvement cycle</span>
</div>
<div class="trick-item">
<span class="trick-acronym">RICE</span>
<span><strong>Requirements, Input, Conditions, Expected</strong> — Test case components</span>
</div>
<div class="trick-item">
<span class="trick-acronym">ORDER</span>
<span><strong>Smoke before Sanity</strong> — Smoke = build verification (shallow), Sanity = functionality check (deeper)</span>
</div>
</div>
<!-- Exam Tips -->
<div class="tips-box">
<h3>🎯 Exam Strategy Tips</h3>
<ul class="tips-list">
<li>Read carefully: Watch for keywords <span class="highlight">always, never, best, main, most</span></li>
<li>Eliminate clearly wrong answers first (increases odds from 25% to 33%/50%)</li>
<li>Don't overthink tricky questions — trust your first instinct</li>
<li>Time management: ~1.5 minutes per question (40 questions ≈ 60 minutes)</li>
<li>Flag uncertain questions and return if time permits</li>
</ul>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment