1. Pengantar Bootcamp
Bootcamp ini dirancang untuk memberikan pemahaman lengkap tentang 10 teknologi web terpopuler dan penting yang digunakan dalam pengembangan web modern. Dengan mengikuti bootcamp ini, Anda akan mendapatkan pengetahuan praktis dan teori yang dibutuhkan untuk membangun aplikasi web yang responsif, interaktif, dan scalable.
Setiap teknologi akan dipelajari secara mendalam dengan contoh nyata, latihan, dan source code yang bisa Anda gunakan sebagai referensi.
3. Step by Step Pembelajaran
3.1 HTML5 & CSS3
Pelajari struktur dasar HTML5 dan cara menggunakan CSS3 untuk membuat tampilan yang menarik dan responsif.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Contoh HTML5 & CSS3</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f9fafb;
margin: 20px;
}
h1 {
color: #4f46e5;
}
p {
color: #374151;
}
</style>
</head>
<body>
<h1>Halo Dunia!</h1>
<p>Ini adalah contoh halaman HTML5 dengan styling CSS3 sederhana.</p>
</body>
</html>
3.2 JavaScript (ES6+)
Pelajari sintaks modern JavaScript, variabel, fungsi, dan manipulasi DOM.
// Contoh fungsi ES6 untuk menampilkan alert
const greet = (name) => {
alert(`Halo, ${name}! Selamat belajar JavaScript.`);
};
greet('Siswa Bootcamp');
3.3 React.js
Pelajari cara membuat komponen, state, props, dan lifecycle di React.
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div className="text-center p-4">
<h2 className="text-xl font-bold mb-2">Counter: {count}</h2>
<button
className="bg-indigo-600 text-white px-4 py-2 rounded hover:bg-indigo-700"
onClick={() => setCount(count + 1)}
>
Tambah
</button>
</div>
);
}
export default Counter;
3.4 Node.js & Express
Pelajari membuat server sederhana menggunakan Node.js dan Express.
const express = require('express');
const app = express();
const port = 3000;
app.get('/', (req, res) => {
res.send('Halo dari server Express!');
});
app.listen(port, () => {
console.log(`Server berjalan di http://localhost:${port}`);
});
3.5 TypeScript
Pelajari penggunaan tipe data statis untuk meningkatkan kualitas kode JavaScript.
function tambah(a: number, b: number): number {
return a + b;
}
const hasil = tambah(5, 10);
console.log(hasil); // Output: 15
3.6 Tailwind CSS
Pelajari framework utility-first untuk styling cepat dan responsif.
<button class="bg-indigo-600 text-white px-4 py-2 rounded hover:bg-indigo-700">
Klik Saya
</button>
3.7 Webpack & Babel
Pelajari cara mengkonfigurasi bundler dan transpiler untuk proyek modern.
// webpack.config.js (contoh sederhana)
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: __dirname + '/dist',
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: 'babel-loader',
},
],
},
};
3.8 GraphQL
Pelajari query language untuk API yang efisien dan fleksibel.
query {
users {
id
name
email
}
}
3.9 Docker
Pelajari containerization untuk deployment aplikasi yang konsisten.
# Dockerfile sederhana untuk aplikasi Node.js
FROM node:16-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
CMD ["node", "index.js"]
3.10 Testing dengan Jest & React Testing Library
Pelajari cara menulis unit test dan testing komponen React.
import { render, screen, fireEvent } from '@testing-library/react';
import Counter from './Counter';
test('menambah nilai counter saat tombol diklik', () => {
render(<Counter />);
const button = screen.getByText(/Tambah/i);
fireEvent.click(button);
expect(screen.getByText(/Counter: 1/i)).toBeInTheDocument();
});
4. Source Code Contoh
Berikut contoh source code React sederhana dengan Tailwind CSS yang bisa Anda gunakan sebagai latihan:
import React, { useState } from 'react';
function App() {
const [name, setName] = useState('');
return (
<div className="max-w-md mx-auto mt-10 p-6 bg-white rounded-lg shadow-md">
<h1 className="text-2xl font-bold mb-4 text-indigo-700">Halo, {name || 'Pengunjung'}!</h1>
<input
type="text"
placeholder="Masukkan nama Anda"
className="w-full p-2 border border-gray-300 rounded mb-4"
value={name}
onChange={(e) => setName(e.target.value)}
/>
<button
className="bg-indigo-600 text-white px-4 py-2 rounded hover:bg-indigo-700"
onClick={() => alert(`Selamat belajar, ${name || 'Pengunjung'}!`)}
>
Mulai Bootcamp
</button>
</div>
);
}
export default App;
