Semester 1
18 modul ajar · XI TJKT · Fase F
PENGENALAN WEB DEVELOPMENT
Fase 1 pembelajaran
Pengenalan Web Development
Isi Pokok
Client-Server, Browser, HTTP/HTTPS. HTML, CSS, JavaScript. VS Code, Browser Developer Tools.
Kegiatan Praktik
Praktik cara kerja. Praktik komponen. Praktik tools.
HTML (HyperText Markup Language)
Isi Pokok
Struktur Dokumen HTML. head, body, div, p, h1-h6. a (hyperlink), img. ul/ol/li.
Kegiatan Praktik
Praktik struktur. Praktik element dasar. Praktik link & gambar. Praktik list.
HTML (lanjutan)
Isi Pokok
input, select, textarea, button. tr, td, th, thead, tbody. header, nav, main, footer, article.
Kegiatan Praktik
Praktik form. Praktik table. Praktik semantic.
CSS (Cascading Style Sheets)
Isi Pokok
Inline, Internal, External. Class, ID, Element. color, background, font, margin, padding.
Kegiatan Praktik
Praktik jenis css. Praktik selector. Praktik properti.
CSS (LANJUTAN)
Fase 2 pembelajaran
CSS (lanjutan)
Isi Pokok
content, padding, border, margin. Display, Position, Flexbox Dasar. relative, absolute, fixed.
Kegiatan Praktik
Praktik box model. Praktik layout. Praktik position.
Praktik: Membuat Halaman Profil
Isi Pokok
Struktur HTML halaman profil. Styling dengan CSS. Responsive dasar.
Kegiatan Praktik
Praktik struktur html. Praktik styling. Praktik responsive.
Praktik: Membuat Form Kontak
Isi Pokok
Form HTML lengkap. Validasi HTML5. Styling form dengan CSS.
Kegiatan Praktik
Praktik form. Praktik validasi. Praktik styling.
Isi Pokok
Konsep responsive design. Breakpoint untuk mobile, tablet, desktop. Testing di berbagai ukuran layar.
Kegiatan Praktik
Praktik konsep. Praktik media query. Praktik testing.
PROYEK: WEBSITE PROFIL SEDERHANA (AWAL)
Fase 3 pembelajaran
Proyek: Website Profil Sederhana (Awal)
Isi Pokok
Perencanaan struktur website. Pemilihan warna dan font. Mulai coding halaman utama.
Kegiatan Praktik
Praktik perencanaan. Praktik desain. Praktik coding.
Proyek: Website Profil Sederhana (Lanjutan)
Isi Pokok
Membuat halaman profil menggunakan HTML. Memberikan styling dengan CSS. Membuat form kontak sederhana. Responsive dasar (media query).
Kegiatan Praktik
Praktik profil. Praktik styling. Praktik form. Praktik responsive.
Proyek: Website Profil Sederhana (Finalisasi)
Isi Pokok
Penyelesaian semua halaman. Responsive design. Persiapan presentasi.
Kegiatan Praktik
Praktik finalisasi. Praktik responsive. Praktik persiapan.
Presentasi Proyek Website Profil
Isi Pokok
Presentasi proyek per kelompok. Penilaian presentasi.
Kegiatan Praktik
Praktik presentasi. Praktik penilaian.
REVIEW MATERI SEMESTER 1
Fase 4 pembelajaran
Review Materi Semester 1
Isi Pokok
Review HTML & CSS. Tanya jawab. Persiapan ujian.
Kegiatan Praktik
Praktik review. Praktik tanya jawab. Praktik persiapan.
Ujian Akhir Semester 1
Isi Pokok
HTML & CSS. Pengujian responsive.
Kegiatan Praktik
Praktik praktik. Praktik testing.
Evaluasi dan Penutup Semester 1
Isi Pokok
Evaluasi proses belajar. Rencana semester 2.
Kegiatan Praktik
Praktik evaluasi. Praktik rencana.
Tambahan: Review HTML & CSS Lanjutan
Isi Pokok
Review materi HTML lanjutan. Tanya jawab.
Kegiatan Praktik
Praktik review. Praktik tanya jawab.
TAMBAHAN: PRAKTIK CSS FRAMEWORK
Fase 5 pembelajaran
Tambahan: Praktik CSS Framework
Isi Pokok
Pengenalan CSS framework. Praktik dengan framework. Komparasi dengan CSS murni.
Kegiatan Praktik
Praktik pengenalan. Praktik praktik. Praktik komparasi.
Tambahan: Workshop Responsive Design
Isi Pokok
Workshop responsive design. Mobile-first approach. Testing cross-browser.
Kegiatan Praktik
Praktik workshop. Praktik mobile-first. Praktik testing.
Daftar Modul
Pengenalan Web Development
Modul ajar Pengenalan Web Development (Placeholder)
HTML (HyperText Markup Language)
Modul ajar HTML (HyperText Markup Language) (Placeholder)
HTML (lanjutan)
Modul ajar HTML (lanjutan) (Placeholder)
CSS (Cascading Style Sheets)
Modul ajar CSS (Cascading Style Sheets) (Placeholder)
CSS (lanjutan)
Modul ajar CSS (lanjutan) (Placeholder)
Praktik: Membuat Halaman Profil
Modul ajar Praktik: Membuat Halaman Profil (Placeholder)
Praktik: Membuat Form Kontak
Modul ajar Praktik: Membuat Form Kontak (Placeholder)
Praktik: Responsive Design dengan Media Query
Modul ajar Praktik: Responsive Design dengan Media Query (Placeholder)
Proyek: Website Profil Sederhana (Awal)
Modul ajar Proyek: Website Profil Sederhana (Awal) (Placeholder)
Proyek: Website Profil Sederhana (Lanjutan)
Modul ajar Proyek: Website Profil Sederhana (Lanjutan) (Placeholder)
Proyek: Website Profil Sederhana (Finalisasi)
Modul ajar Proyek: Website Profil Sederhana (Finalisasi) (Placeholder)
Presentasi Proyek Website Profil
Modul ajar Presentasi Proyek Website Profil (Placeholder)
Review Materi Semester 1
Modul ajar Review Materi Semester 1 (Placeholder)
Ujian Akhir Semester 1
Modul ajar Ujian Akhir Semester 1 (Placeholder)
Evaluasi dan Penutup Semester 1
Modul ajar Evaluasi dan Penutup Semester 1 (Placeholder)
Tambahan: Review HTML & CSS Lanjutan
Modul ajar Tambahan: Review HTML & CSS Lanjutan (Placeholder)
Tambahan: Praktik CSS Framework
Modul ajar Tambahan: Praktik CSS Framework (Placeholder)
Tambahan: Workshop Responsive Design
Modul ajar Tambahan: Workshop Responsive Design (Placeholder)