Belajar Frontend Website (HTML, CSS dan Javascript)

Belajar menampilkan sebuah paragraf di HTML

Membuat sebuah heading atau bagian penting dengan tag h yang punya berbagai variasi

Kekuatan sebuah situs adalah bisa saling berhubung, sekarang kita belajar menggunakan Link

Kita bisa membuat sebuah daftar dengan bantuan ol, ul, dan li

Bagaimana cara memberi jarak pada text html, baik itu spasi atau baris baru

Kita bisa menampilkan gambar pada halaman HTML dengan tag img

Memasukkan situs lain ke halaman web kita bisa menggunakan iframe

Sekarang waktunya kamu membuat situs sendiri

Kita sudah melihat cara membuat elemen HTML, namun belum memperhatikan struktur baku HTML sebenarnya

Salah satu fitur VS Code untuk membantu kita membuat aplikasi adalah live reload

Semakin banyak kode HTML yang kita tulis, akan semakin sulit untuk membaca strukturnya, gunakan tab atau jarak untuk membantu kamu

Favicon adalah icon gambar yang bisa membuat situs kamu terlihat unik. Favicon terlihat di tab browser.

Tag Semantik artinya tag HTML yang punya makna sesuai dengan namanya.

Dari situs yang kamu buat sebelumnya, silahkan tambahkan apa yang sudah kita pelajari yaitu sturktur HTML yang benar.

Lanjut mengenal elemen semantik HTML lain yaitu elemen article untuk membungkus konten yang berulang

Untuk konten yang berisi beberapa bagian, kita bisa menggunakan elemen section

Untuk konten yang berisi beberapa bagian, kita bisa menggunakan elemen section

Tulisan kamu bisa dibuat variasi dengan mengubah ketebalan atau kemiringannya.

HTML penuh dengan tag lain yang bisa kamu manfaatkan sesuai halaman situsmu

Kali ini kamu perlu membuat lebih dari satu halaman dan saling menghubungkannya.

Mulai menghias halaman websitemu menjadi unik dengan bantuan CSS

Ada 3 cara berbeda dalam menggunakan CSS

Warna text dan latar HTML kamu bisa diubah dengan CSS

Bukan hanya dengan tag, kita bisa juga memilih elemen mana yang mau dihias dengan id atau class nya.

Ada berbagai properti CSS yang bisa kamu gunakan untuk menghias tulisan pada HTML

CSS punya banyak properti untuk mengatur jarak, baik jarak antar huruf, kata dan lainnya.

Jenis tulisan atau font bisa kamu ganti loh sesuai gaya yang pas dengan konten situs kamu

Google font menawarkan ratusan font gratis yang unik untuk kamu gunakan secara gratis

Tentu tidak asyik, jika semua font pada suatu halaman punya ukuran yang sama. Sulit membedakan, mana judul mana artikelnya :)

Agar tidak membosankan, teks kamu bisa divariasikan dengan mengubah ketebalan dan kemiringannya.

Tugas kali ini adalah menghias sebuah halaman website dengan materi CSS yang sudah kamu pelajari

elemen HTML punya property display yang menentukan bagaimana ukuran lebar elemen tersebut

div dan span tidak punya arti khusus, ia bisa disebut sebagai tag pembantu dengan sifat display berbeda

Di CSS, kita menggunakan property width dan height untuk mengatur tinggi dan lebar suatu elemen

Satu konsep yang sangat penting untuk mengatur ukuran suatu elemen di HTML adalah box model

Border adalah garis tepi yang bisa diberikan pada setiap elemen HTML

Padding adalah jarak antara konten dengan garis batas alias bordernya

Sementara untuk mengatur jarak di luar border, atau jarak antar elemen HTML, gunakan margin!

bagaimana jika konten yang dimuat melebihi batas yang diberikan?

bagaimana cara membuat dua box saling berdampingan pada HTML

Waktunya tugas! sekarang dengan pengatahuan sejauh ini, buatlah layout sederhana pada HTML dan CSS

Mulai membuat tabel HTML untuk menampilkan data terstruktur

Waktunya kita menghias table dengan CSS

Di CSS, kita bisa memilih target element tertentu secara spesifik dengan parent-child relation

Latihan menggunakan table dengan membuat daftar favoritmu

form banyak digunakan di berbagai keperluan seperti registrasi, login, mengisi data dan masih banyak lagi

Mari mulai mengintip dasar dasar materi dari table di HTML

setelah mengerti dasar form dan input, waktunya kita hias dengan bantuan CSS

Masih ada banyak lagi input pada HTML yang bisa digunakan pada form. Berikut di antaranya

Memberi variasi style pada tag a (link) dan melihat apa itu pseudo class pada CSS

Setiap input bisa memiliki atribut berbeda sebagai pelengkap yang punya fungsinya masing-masing

Menghias CSS berdasarkan posisinya dengan pseudo class

Menghias form berdasarkan pseudo class nya

Kita bisa memilih sebuah elemen pada CSS dengan kombinasi berdasarkan relasi tersebut satu sama lain

Menargetkan elemen HTML pada CSS berdasarkan sifat atau posisi dari elemen tersebut

Waktunya tugas! bikin sebuah form dengan berbagai input dan styling yang menarik

setiap elemen HTML bisa diatur posisinya. Yuk kenalan dengan property position pada CSS

Mengenal Position static CSS sebagai posisi default atau standar bagi semua elemen

Belajar posisi relative pada CSS untuk mengubah posisi asli dari elemen

Absolute adalah cara kita mengatur sebuah elemen berdasarkan parent atau pembungkus elemen tersebut

Menempelkan posisi element pada layar, tidak tergantung dari scroll dan posisi elemen lainnya

Mirip dengan fixed, position sticky hanya berubah sifat aslinya ketika melewat batas scroll

Float adalah salah satu teknik klasik yang memudahkan kamu mengatur elemen untuk saling bersandingan satu sama lain

Tugas untuk membuat elemen elemen HTML dengan posisi yang kamu mau!