Pelajari Pengembangan Web: Kursus Utama HTML, CSS, React & Node!

Daftar Isi

Pengenalan HTML
Dasar-dasar CSS
Memulai dengan React
Pengantar Node.js
Penutup dan Langkah Selanjutnya

1. Pengenalan HTML

HTML (HyperText Markup Language) adalah bahasa dasar untuk membuat halaman web. HTML menggunakan elemen-elemen yang membentuk struktur konten seperti teks, gambar, tautan, dan lainnya.

Tampilan editor kode dengan contoh kode HTML yang menampilkan struktur dasar halaman web

Struktur Dasar HTML

<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="UTF-8">
    <title>Judul Halaman</title>
  </head>
  <body>
    <h1>Halo Dunia!</h1>
    <p>Ini adalah paragraf pertama saya.</p>
  </body>
</html>

Elemen-elemen utama seperti <html> , <head> , dan <body> membentuk kerangka halaman. Tag <h1> hingga <h6> digunakan untuk judul, dan <p> untuk paragraf.

Elemen Penting Lainnya

<a> - Membuat tautan ke halaman lain atau sumber lain.
<img> - Menampilkan gambar pada halaman.
<ul> dan <ol> - Membuat daftar tidak berurutan dan berurutan.
<div> - Kontainer umum untuk mengelompokkan elemen.

Tampilan halaman web sederhana yang menampilkan judul, paragraf, dan gambar ilustrasi

2. Dasar-dasar CSS

CSS (Cascading Style Sheets) digunakan untuk mengatur tampilan dan layout halaman web. Dengan CSS, Anda dapat mengubah warna, ukuran, posisi, dan gaya elemen HTML.

Tampilan editor kode dengan contoh kode CSS yang mengatur warna dan layout halaman web

Sintaks Dasar CSS

selector {
  property: value;
}

Contoh:

h1 {
  color: navy;
  font-size: 2rem;
}
p {
  color: #555555;
  line-height: 1.5;
}

Cara Menghubungkan CSS ke HTML

Inline CSS: langsung di atribut style elemen HTML.
Internal CSS: menggunakan tag <style> di dalam <head> .
External CSS: menghubungkan file CSS terpisah dengan tag <link> .

Tampilan halaman web dengan teks berwarna dan layout yang rapi menggunakan CSS

3. Memulai dengan React

React adalah library JavaScript untuk membangun antarmuka pengguna yang interaktif dan dinamis. React menggunakan komponen yang dapat digunakan kembali untuk membangun aplikasi web modern.

Tampilan editor kode dengan contoh kode React yang menampilkan komponen fungsional sederhana

Contoh Komponen React Sederhana

import React from 'react';

function HaloDunia() {
  return <h1>Halo Dunia dari React!</h1>;
}

export default HaloDunia;

Komponen React biasanya ditulis dalam JSX, yang mirip dengan HTML tapi di dalam JavaScript. Komponen ini dapat digunakan kembali dan dikelola dengan state dan props.

Membuat Aplikasi React Baru

Pastikan Node.js sudah terpasang di komputer Anda.
Buka terminal dan jalankan: npx create-react-app nama-aplikasi
Masuk ke folder aplikasi: cd nama-aplikasi
Jalankan aplikasi: npm start

Tampilan browser yang menampilkan aplikasi React dengan tulisan Halo Dunia dari React

4. Pengantar Node.js

Node.js adalah runtime JavaScript yang berjalan di server. Dengan Node.js, Anda dapat membuat aplikasi backend menggunakan JavaScript, sehingga memungkinkan pengembangan full-stack dengan satu bahasa.

Membuat Server HTTP Sederhana

const http = require('http');

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end('Halo Dunia dari Node.js!');
});

server.listen(3000, () => {
  console.log('Server berjalan di http://localhost:3000');
});

Jalankan file ini dengan perintah node nama-file.js di terminal, lalu buka http://localhost:3000 di browser untuk melihat hasilnya.

Menggunakan NPM (Node Package Manager)

NPM adalah manajer paket untuk Node.js yang memungkinkan Anda menginstal dan mengelola pustaka pihak ketiga.

Inisialisasi proyek: npm init
Instal paket: npm install nama-paket
Jalankan skrip yang didefinisikan di package.json

Tampilan terminal yang menjalankan perintah npm install dan npm start untuk proyek Node.js

5. Penutup dan Langkah Selanjutnya

Anda telah mempelajari dasar-dasar HTML, CSS, React, dan Node.js. Langkah selanjutnya adalah terus berlatih dengan membuat proyek nyata, membaca dokumentasi resmi, dan mengikuti komunitas pengembang.