Build interactive JavaScript learning projects following a standardized three-tier structure (CLASS → CHALLENGE 01 → CHALLENGE 02) with bilingual documentation, modern CSS gradients, and progressive difficulty levels.
This skill has safety concerns that you should review before use. Some patterns were detected that may pose a risk.Safety score: 60/100.
KillerSkills scans all public content for safety. Use caution before installing or executing flagged content.
Build interactive JavaScript learning projects following a standardized three-tier progression structure with bilingual documentation and modern design patterns.
This skill helps you create educational JavaScript projects with a consistent structure, style, and documentation pattern. Each project includes a main implementation (CLASS) and two progressive challenges that build upon the core concept. All projects include bilingual documentation (English and Portuguese-BR), modern CSS with gradients, and a standardized file structure.
Generate the following directory structure for each new project:
```
project-name/
├── index.html # Main project version
├── index.js # Main JavaScript file
├── style.css # CSS styles
├── README.md # English documentation
├── README-PTBR.md # Portuguese documentation
├── challenge-1/ # First challenge
│ ├── index.html
│ ├── index.js
│ ├── style.css
│ ├── README.md
│ └── README-PTBR.md
├── challenge-2/ # Second challenge
│ ├── index.html
│ ├── index.js
│ ├── style.css
│ ├── README.md
│ └── README-PTBR.md
└── gifs/ # Demo GIFs (if applicable)
├── class.gif
├── challenge-1.gif
└── challenge-2.gif
```
Create HTML files following this template:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Project Name</title>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<!-- Project content here -->
<script src="index.js"></script>
</body>
</html>
```
**Key requirements:**
Implement consistent CSS with these patterns:
**Color Scheme:**
**Standard Classes:**
**CSS Reset:**
```css
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Roboto', sans-serif;
background: linear-gradient(to right, #0f2027, #2c5364, #203a43);
color: #fff;
}
```
**Button Styling:**
```css
.btn {
background-color: #2e647a;
color: #fff;
border: none;
padding: 1rem 2rem;
cursor: pointer;
transition: all 0.3s;
}
.btn:hover {
opacity: 0.8;
transform: translateY(-2px);
}
```
Use rem units for responsiveness and `transition: all 0.3s` for smooth interactions.
Follow these JavaScript patterns:
**Naming Conventions:**
**Best Practices:**
**Example Pattern:**
```javascript
const calculateBtn = document.getElementById('calculateBtn');
const clearBtn = document.getElementById('clearBtn');
const resultDisplay = document.getElementById('result');
calculateBtn.addEventListener('click', () => {
const input = parseFloat(document.getElementById('input').value);
if (!input || input < 0) {
resultDisplay.textContent = 'Please enter a valid value';
return;
}
const result = performCalculation(input);
resultDisplay.textContent = `Result: ${result}`;
});
clearBtn.addEventListener('click', () => {
document.getElementById('input').value = '';
resultDisplay.textContent = '';
});
```
Generate both `README.md` (English) and `README-PTBR.md` (Portuguese) with this structure:
**README.md Template:**
```markdown
[🇧🇷 Versão em Português](./README-PTBR.md)
Basic implementation description and usage instructions.
Description of first challenge requirements and additional features.
[View Challenge 1](./challenge-1/)
Description of second challenge with advanced requirements.
[View Challenge 2](./challenge-2/)
```
Mirror this structure in `README-PTBR.md` with Portuguese translations.
**CLASS (Main Version):**
**CHALLENGE 01:**
**CHALLENGE 02:**
**Input Fields:**
```html
<input type="number" id="inputField" class="input"
placeholder="Enter value" min="0" max="999">
```
**Button Group:**
```html
<div class="btn-group">
<button id="calculateBtn" class="btn">Calculate</button>
<button id="clearBtn" class="btn">Clear</button>
</div>
```
**Result Display:**
```html
<div id="result" class="result"></div>
```
**Creating a BMI Calculator Project:**
1. Create directory structure: `bmi-calculator/` with subdirectories
2. Implement CLASS version with basic BMI calculation
3. Add CHALLENGE 01 with BMI categories (underweight, normal, overweight, obese)
4. Enhance CHALLENGE 02 with color-coded results and health recommendations
5. Write bilingual documentation explaining each version
6. Add demo GIFs showing functionality
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/js-dev-course-builder/raw