Membuat website dengan HTML dan CSS

Daftar Kelas ini

Mulai perjalanan kamu di dunia web development dengan menguasai dua skill ini HTML dan CSS

Daftar Kelas ini

Keunggulan Course ini

Video dengan kualitas HD

Dukungan Materi tertulis

Audio jernih tanpa gangguan

Tugas latihan untuk praktek

Bayar satu kali, tanpa batasan

Modul dan materi disusun rapi

Baca testimonial teman-teman yang sudah pernah belajar di Sekolah Koding. Baca Testimoni di sini

- Informasi - Target - Tools - Durasi - Materi

Informasi kelas

Membuat website dengan HTML dan hias dengan CSS. Miliki kedua kekuatan ini, kamu akan bisa membuat berbagai macam website!

Apa itu HTML ?

HTML adalah teknologi yang digunakan untuk membuat struktur dasar website, seperti menampilkan text, gambar, video dan lainnya.

Apa itu CSS ?

CSS adalah teknologi yang digunakan untuk menghias halaman HTML alias menghias website kamu.

Apa manfaat HTML dan CSS

Dengan menguasai HTML dan CSS, kamu akan bisa membuat berbagai macam layout website sesuai kebutuhan pekerjaan atau klien kamu.

Istilah "slicing" adalah mengubah desain yang kamu atau tim designer buat dan menjadikannya kode (HTML dan CSS) sehingga ia bukan lagi sekedar desain, tapi sebuah website yang bisa digunakan oleh banyak orang.

Kamu juga akan membuka pintu pekerjaan yang bernama "front end developer". Sebelum nanti lanjut mempelajari Javascript.

Update pada kelas (Changelog)

(13 Sept 2023) menambahkan modul aksesibiltas pada website
(14 Sept 2023) menambahkan video latihan membuat halaman depan facebook

Modul yang akan datang

Membuat layout dengan Grid

Skill yang kamu dapatkan

Membuat struktur dasar website dengan HTML
Menghias halaman website dengan CSS
Membuat website yang responsive di berbagai ukuran
Bisa membuat berbagai element seperti table, form, gambar dan lainnya
Bisa membuat halaman website utuh dari layout yang diberikan
Bisa mempublish website (hosting) agar bisa diakses semua orang

Teknologi yang digunakan

Text editor
Browser

Berapa lama waktu belajarnya ?

Di Skodev, kamu belajar sesuai tempo kamu sendiri. Sesuaikan dengan jadwal kegiatan sehari-hari kamu, tanpa ada paksaan.

Daftar Materi

Fundamental HTML

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

Chapter: 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

Chapter: 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

Chapter: 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.

Chapter: 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.

Menghias Web dengan CSS

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

Chapter: 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

Chapter: 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

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!

Chapter: 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

Chapter: 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

Chapter: 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

Chapter: 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!

Chapter: 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

Membuat layout website

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

Chapter: 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

Chapter: 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

Membuat website responsive

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

Chapter: 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.

Chapter: 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

Chapter: 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

Membuat komponen

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

Chapter: 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.

Web accessibility

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

Chapter: 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.

Tugas akhir

Tugas akhir dari seri belajar HTML dan CSS ini.

Chapter: 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

Publish website kamu

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

Chapter: 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

Extra Info

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

Chapter: 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

Daftar Modul

Fundamental HTML

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

Menghias Web dengan CSS

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

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!

Membuat layout website

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

Membuat website responsive

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

Membuat komponen

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

Web accessibility

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

Tugas akhir

Tugas akhir dari seri belajar HTML dan CSS ini.

Publish website kamu

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

Extra Info

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