BELAJAR HTML - PENGERTIAN, KURIKULUM DAN CARA BELAJAR

Modul: Fundamental HTML

Waktunya berkenalan dengan HTML! apa sih tujuan dan tools apa saja yang akan dipakai untuk mulai membuat website pertamamu

Bagian: Perkenalan dan persiapan

Perkenalan

Intro singkat mengenai kelas membuat website pertama kamu di Skodev.

Persiapan alat

Tool apa saja yang kamu butuhkan untuk mengikuti course ini ?

Membuat file HTML dan melihat hasilnya

Kita akan membuat file HTML pertama dan langsung melihat hasilnya

Bagian: Mulai Belajar HTML

Menampilkan text dengan HTML

Belajar menampilkan sebuah paragraf di HTML

Heading di HTML

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

Membuat link di halaman HTML

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

Membuat sebuah daftar

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

Memberi jarak di text HTML

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

Memasukkan gambar pada HTML

Kita bisa menampilkan gambar pada halaman HTML dengan tag img

iFrame

Memasukkan situs lain ke halaman web kita bisa menggunakan iframe

Tugas: buat situs pertamamu

Sekarang waktunya kamu membuat situs sendiri

Bagian: Struktur file HTML

Struktur baku HTML

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

Reload otomatis saat mengubah file

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

Jarak (tab) untuk visual yang baik

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

Menambahkan favicon

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

Elemen semantik HTML

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

Tugas: Menambahkan struktur HTML ke situs kamu

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

Bagian: Tag HTML lainnya

Elemen article HTML

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

Elemen Section HTML

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

Membuat halaman kedua

Situs kamu boleh berisi lebih dari satu halaman

Mengubah format tulisan

Tulisan kamu bisa dibuat variasi dengan mengubah ketebalan atau kemiringannya.

Masih ada banyak tag lagi!

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

Tugas membuat banyak halaman

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

Modul: Menghias Web dengan CSS

Setelah familiar dengan teknologi HTML, sekarang kita bisa mulai menghias websitenya dengan bantuan CSS

Bagian: Mempercantik tulisan

Menghias website dengan CSS

Mulai menghias halaman websitemu menjadi unik dengan bantuan CSS

Cara menggunakan CSS

Ada 3 cara berbeda dalam menggunakan CSS

Mengubah warna text dan latar

Warna text dan latar HTML kamu bisa diubah dengan CSS

Memilih elemen di CSS

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

Menghias text dengan CSS

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

Mengatur jarak text dengan CSS

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

Mengubah font CSS

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

Menggunakan Google Font

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

Mengubah ukuran font

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

Membuat tulisan tebal dan miring

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

Membuat situs yang menarik

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

Bagian: Ukuran elemen dan Box Model

Display inline dan block HTML

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

Mengenal tag pembantu DIV dan SPAN

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

Mengatur lebar dan tinggi elemen

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

Belajar konsep box model di CSS

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

Border untuk garis batas

Border adalah garis tepi yang bisa diberikan pada setiap elemen HTML

Padding batas di dalam border

Padding adalah jarak antara konten dengan garis batas alias bordernya

Margin jarak di luar border

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

Overflow pada CSS

bagaimana jika konten yang dimuat melebihi batas yang diberikan?

Inline-box - Membuat dua box berdampingan

bagaimana cara membuat dua box saling berdampingan pada HTML

Membuat halaman layout sederhana

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

Modul: HTML dan CSS Level 2

Eksplor lebih banyak lagi elemen HTML seperti table dan form. Tidak lupa kita akan belajar banyak materi CSS yang lebih canggih!

Bagian: Membuat dan menghias table

Kenalan dengan table HTML

Mulai membuat tabel HTML untuk menampilkan data terstruktur

Menghias table dengan CSS

Waktunya kita menghias table dengan CSS

Variasi selektor dalam CSS

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

Bikin daftar favoritmu

Latihan menggunakan table dengan membuat daftar favoritmu

Bagian: Kenalan dengan Form

Form pada HTML

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

Dasar dasar form HTML

Mari mulai mengintip dasar dasar materi dari table di HTML

Attribut pada input

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

Menghias form dan input

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

Berbagai input lain

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

Bagian: Selektor CSS tidak biasa

Pseudo class link pada CSS

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

Pseudo-class Posisi

Menghias CSS berdasarkan posisinya dengan pseudo class

Pseudo class form

Menghias form berdasarkan pseudo class nya

CSS Combinator

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

Pseudo element CSS

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

Membuat form yang menarik

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

Bagian: Posisi pada CSS

Perkenalan position pada CSS

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

Position static CSS

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

Position relative CSS

Belajar posisi relative pada CSS untuk mengubah posisi asli dari elemen

position absolute CSS

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

Position fixed CSS

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

Position sticky

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

Float pada CSS

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

Elemen dengan berbagai posisi

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

Bagian: Transition, transformation dan animation

Intro transition, transformation dan animation

CSS tidak begitu-begitu saja! ada banyak hal menarik yang bisa kamu lakukan di CSS

Transformasi 2D

Kita bisa melakukan Transformasi pada elemen HTML dalam dimensi 2D

Transition pada CSS

Kamu bisa melakukan transisi pada elemen HTML dengan CSS secara halus dengan durasi tertentu

Animation pada CSS

membuat animasi sederhana dengan bantuan property animation dari CSS3

Modul: Membuat layout website

Belajar bagaimana cara membuat layout website secara utuh dengan bantuan flexbox.

Bagian: Intro layout website

Membuat layout website

Kelas perkenalan bagaimana membuat layout website.

Cara berpikir membuat layout

Ini dia tips bagaimana kamu bisa memecah layout besar menjadi bagian bagian kecil

Property untuk membuat layout

Ada beberapa cara untuk membuat layout pada HTML dengan CSS

Bagian: Layouting with flexbox

Membuat layout dengan flexbox

Flexbox adalah salah satu properi CSS yang sangat berguna untuk membuat layout design website

Menyusun layout ke samping flexbox

Sekarang waktunya kita mengitip kode dari flexbox, bagaimana cara menyusun item ke samping

Proptery flexbox lainnya

Flexbox punya beberapa property lain yang bisa kamu atur untuk menyesuaikan tampilan

Mengatur jarak baris flexbox

Mengatur jarak antar konten pada items di flexbox

Contoh penggunaan flexbox: navigasi

Setelah belajar dasar-dasarnya, waktunya kita praktek ke layout yang sering terlihat

Contoh penggunaan flexbox: cards

Contoh kasus: Membuat deretan cards (kartu) dengan flexbox

Flex Grow

Membuat layout dengan mudah memanfaatkan flex grow

Membuat layout website (tugas)

Sekarang giliran kamu! coba buat layout website ini dengan bantuan flexbox.

Tips membuat konten di tengah

Bagaimana kalau kamu ingin membuat seluruh halaman kamu berada di tengah? flexbox juga bisa jadi jawabannya

Modul: Membuat website responsive

Website responsive jadi hal wajib untuk dipelajari, Bikin situs kamu tetap menarik di berbagai ukuran device, seperti smartphone, tablet dan desktop.

Bagian: Perkenalan website responsif

Intro website responsive

Bikin website kamu menjadi responsif! Website responsive berguna agar tampilan situs kamu tetap asyik dan mudah digunakan di berbagai ukuran device

Mengenal viewport

bagian penting dalam belajar responsive design adalah mengenal apa itu viewport

Megenal media query

Media query adalah bagian terpenting dari website responsive. Ia menjadi syarat kapan style tertentu harus berubah pada ukuran yang ditentukan.

Bagian: Ukuran fluid (dinamis)

Membuat lebar fluid

Belajar membuat lebar yang punya ukuran dinamis pada responsive website

Ukuran font dinamis

Membuat ukuran font bisa dengan mudah dibaca pada ukurang mobile atau tablet tidak kalah pentingnya.

Membatasi ukuran gambar dan video

Selain tulisan kita juga perlu memperhatikan ukuran aset seperti gambar atau video

Bagian: Tips dan teknik website responsive

Mengubah lebar jadi 100%

Pada saat menampilkan layout di ukuran mobile, normalnya kita mau menampilkan ukuran lebar yang berbedar dari ukuran desktop

Sembunyi dan tampilkan elemen

Dengan memanfaatkan break point media query, kita bisa memilih kapan menyembunyikan atau menampilkan elemen tertentu

Flexbox untuk navigasi responsive

Kita bisa memanfaatkan flexbox untuk membuat navigasi menu yang responsif

Membuat kolom yang fleksibel

Sekarang kita buat kolom yang ukurannnya fleksible di berbagai device

Bikin website responsive sendiri

Waktunya kamu membuat website responsifmu sendiri

Modul: Membuat komponen

Agar membuat tampilan yang konsisten. Kita bisa mulai berpikir membuat komponen untuk beberapa hal seperti cards, button dan lainnya

Bagian: Membuat komponen website

Intro membuat komponen

Perkenalan kelas komponen. Belajar membuat CSS yang lebih dekat dengan dunia nyata. Bagaimana biasanya orang menulis class dan mengatur kode nya

Konsep dasar membuat komponen

Beberapa hal yang perlu kamu ketahui dalam membuat komponen

Komponen alert

belajar bagaimana cara membuat komponen alert yang canti dengan CSS

Komponen button (tombol)

Sekarang kita akan membuat komponen button. Atau tombol yang orang klik

Komponen Card (kartu)

Belajar bagaimana cara membuat komponen Card dengan CSS

Komponen form dan input

Implementasi komponen pada elemen form dan input HTML

Bikin komponen kamu sendiri

Masih ada banyak komponen yang bisa kamu buat.

Modul: Web accessibility

Belajar dasar-dasar dari aksesibilitas pada dunia website. Untuk membuat website kamu bisa lebih mudah digunakan banyak orang lain.

Bagian: Intro Aksesibilitas Web

Apa itu aksesibilitas

Aksesibilitas pada dunia web development artinya membuat website kamu bisa digunakan oleh sebanyak orang mungkin

Menggunakan tag semantik

Penggunaan tag semantik bisa membantu mesin dan orang membaca konten kamu dengan mudah

Tulisan dan bahasa

Tulisan masih mendominasi sebuah situs web, karena itu perlu memberi perhatian lebih padanya.

Layout yang mudah dipahami

Layout adalah pandangan pertama orang lain pada kontenmu, ia bisa menentukan fokus orang pada webmu.

Form yang ramah pengguna

Buat form kamu mudah diisi, dipahami dan diperbaiki saat ada kesalahan

Memberikan alternatif

Berikan alternatif konten yang bisa dikonsumsi oleh banyak orang.

WAI Aria

Aria roles adalah atribut pada HTML yang bisa memberi makna pada tag HTML.

Modul: Tugas akhir

Tugas akhir dari seri belajar HTML dan CSS ini.

Bagian: Tugas akhir

Latihan clone homepage facebook

Latihan membuat halaman untuh dari situs facebook

Bikin portfolio pribadi kamu

Waktunya untuk memamerkan karya kamu

Bantu usaha lokal

Manfaatkan skill kamu dengan membantu usaha di sekitar

Modul: Publish website kamu

Waktunya website kamu bisa diakses semua orang dengan bantuan hosting dan nama domain

Bagian: Publish website

Membuat situs menjadi publik

Situs kamu bisa diakses secara publik dengan punya tempat hosting (server) dan nama domain

Hosting gratis di Github pages

Salah satu tempat Hosting gratis adalah Github pages

Nama domain custom pada github pages

Github pages juga menawarkan cara untuk menghubungkan nama domain yang sudah kamu beli dari tempat lain

Modul: Extra Info

Bonus informasi tambahan yang akan diupdate mengenal hal hal seputar HTML dan CSS

Bagian: Bonus chapter

Komentar di HTML dan CSS

Menulis komentar pada HTML atau CSS bisa memberi informasi tambahan untuk developer atau timnya

Vendor prefix pada CSS

Ada beberapa property CSS yang tidak didukung pada semua browser. Untuk itu, vendor prefix solusinya

Mengenal CSS framework

Kumpulan kode yang sudah dibuat dan siap dipasang di situs kamu! kenalkan CSS Framework

Apa itu CSS Reset

Menghilangkan efek default dari HTML dengan menulis CSS reset

Intro html

Berkenalan dengan html, singkatan dari hypertext markup language, bahasa markup yang digunakan untuk membuat struktur dasar website

menyimpan file html pertama

menyimpan file html membutuhkan format khusus yaitu .html, tidak boleh yang lain, kita juga akan melihat cara membuka file html di browser yang sangat mudah.

Berkenalan dengan tag HTML

Tag html adalah cara penulisan kode kode html yang perlu kita ketahui. Ada banyak tag html yang akan kita lihat satu persatu

Heading dan paragraf

Ada berbagai macam cara untuk membuat tulisan di HTML, salah duanya heading dan paragraf. Heading akan membuat tulisan kita lebih tebal secara otomatis, sementara paragraf akan terlihat seperti text biasa

Membuat link

Website kita bisa terhubung dengan halaman halaman lain, mulai dari halaman lokal, atau halaman yang kita buat sendiri sampai halaman luar seperti google, belajar cara menghubungkannya dengan tag link

Menampilkan gambar

salah satu hal yang menari di website adalah gambar, kita akan melihat bagaimana cara menampilkan gambar dengan tag img di html

Apa itu iframe

Iframe memungkinkan website untuk mengambil konten dari website lain dan menampilkannya di website sendiri. Lihat bagaimana kekuatan iframe yang luar biasa

Mengubah format text

Kita bisa mengubah format text langsung di html, mulai dari menebalkan sampai memiringkan tulisan di halaman website

Perbedaan element block dan inline

Tag-tag pada html punya sifat-sifat yang automatis ikut saat digubakan. Salah satunya sifat block dan sifat inline. Disini kita akan lihat perbedaan apa itu block element dan apa itu inline element

Doctype HTML

Apa itu doctype html dan apa kegunannya. Temukan jawabannya di video ini

Komentar pada html

Komentar adalah cara kita membuat dokumentasi atau menambahkan info sebagai developer atau penulis kode, agar kode lebih mudah dibaca atau mudah mendapatkan keterangannya

Membuat lebih dari satu halaman

Kita akan melihat bagaimana cara membuat beberapa halaman html dan menghubungkannya satu sama lain

Membuat table html

Kita akan melihat bagaimana cara membuat table pada html. Tag tag apa saja yang kita butuhkan?

list pada html

Apa itu list dan bagaimana cara membuatnya. Ada beberapa jenis list, kita akan melihatnya di video ini

Charset, symbol dan entities

Untuk menampilkan html secara benar, kita butuh mendeklarasikan charset. Selain itu ada juga cara penggunaan symbol dan entities di html

Form , text dan textarea

Kita akan mulai melihat cara membuat form dan elemen elemen apa saja yang bisa kita masukkan ke dalam form html

Attribut, label dan id

Setiap tag html memiliki attribute. Apa itu attribute dan kegunannya? mari kita saksikan

Checkbox dan radio

Checkbox dan radio button adalah dua element form yang bisa kita manfaatkan untuk membuat pilihan ke user yang menggunakan website

Penggunaan select dan Option

Selain checkbox dan radio, select juga bisa kita manfaatkan untuk menampilkan pilihan.

Menyelesaikan form

Menyelesaikan form html dengan menambahkan input submit, tombol yang digunakan saat user ingin mengirimkan data datanya

Ke mana setelah ini

Selamat! teman-teman sudah menyelesaikan playlist htmlnya. Setelah ini, kita bisa mulai belajar CSS untuk menghias website atau melihat feature-feature baru di html5