
Belajar Dasar Pemrograman Web
Teknologi:
WebLevel: Dasar - Pemula
Siswa Terdaftar
Teknologi:
WebLevel: Dasar - Pemula
Siswa Terdaftar
Kelas ini merupakan langkah ke-satu Anda untuk menjadi Front-End Web Developer.
Kelas ini merupakan langkah ke-satu Anda untuk menjadi React Developer.
Website di era sekarang sudah menjadi kebutuhan utama yang tidak bisa diabaikan. Seluruh sektor bisnis atau edukasi dapat memanfaatkan website sebagai alat untuk promosi, tukar informasi, dan lainnya. Berdasarkan data dari World Wide Web Technology Surveys, dari seluruh website yang aktif, 88.2% menggunakan HTML dan 95.6% menggunakan CSS. Kelas ini membahas tuntas mengenai HTML dan CSS sebagai fondasi dalam pembuatan website.
Kelas ini merupakan langkah ke-satu Anda untuk menjadi Front-End Web Developer.
Peralatan Belajar
Spesifikasi minimal perangkat:
Prosesor
Intel Celeron (Rekomendasi Core i3 ke atas)
Tools yang dibutuhkan untuk belajar:
Web Browser (Google Chrome atau Mozilla Firefox)
Lihat semua peralatan belajar
Lihat semua peralatan belajarKelas ini membutuhkan spesifikasi perangkat seperti berikut:
RAM
1GB
Layar
1366 x 768 (Rekomendasi Full HD 1920 x 1080)
Sistem Operasi
Windows, Linux, MacOS
Prosesor
Intel Celeron (Rekomendasi Core i3 ke atas)
Kelas ini membutuhkan beberapa tools berikut:
Web Browser (Google Chrome atau Mozilla Firefox)
Teks Editor (VSCode)
Metode Ajar
Lihat semua metode ajar
Lihat semua metode ajarKontributor
2Curriculum Developer yang membangun kelas ini:
Dimas Maulana Dwi Saputra
Curriculum Developer at Dicoding Indonesia
Nur Rizki Adi Prasetyo
Curriculum Developer at Dicoding Indonesia
Reviewer
47Code Reviewer yang akan me-review tugas dan kode Anda:
Bibita Habibi Mustafa
Platform Engineer at Dicoding Indonesia
Moch Ridwan Taufik Alamsyah
External Code Reviewer at Dicoding Indonesia
"What We Learn When We Learn By Doing"
Currently as R&D Engineer at csacomputer.com
Buchori Rafsanjani
Curriculum Developer at Dicoding Indonesia
Widyarso Joko Purnomo
Khrisna dari Dicoding
Head of Reviewer at Dicoding Indonesia
Lihat semua kontributor dan reviewer
Lihat semua kontributor dan reviewerKontributor kelas
Curriculum Developer yang membangun kelas ini:
Dimas Maulana Dwi Saputra
Curriculum Developer at Dicoding Indonesia
Nur Rizki Adi Prasetyo
Curriculum Developer at Dicoding Indonesia
Tim Reviewer
Code Reviewer yang akan me-review tugas dan kode Anda:
Bibita Habibi Mustafa
Platform Engineer at Dicoding Indonesia
Moch Ridwan Taufik Alamsyah
External Code Reviewer at Dicoding Indonesia
"What We Learn When We Learn By Doing"
Currently as R&D Engineer at csacomputer.com
Buchori Rafsanjani
Curriculum Developer at Dicoding Indonesia
Widyarso Joko Purnomo
Khrisna dari Dicoding
Head of Reviewer at Dicoding Indonesia
Ahmad Arif Faizin
Curriculum Developer at Dicoding Indonesia
Nasrul Gunawan
Sr. Backend Engineer at Stockbit
Khofidin
IT & Traceability Manager at Austrex
Ahmad dari Dicoding
Managing Editor at Dicoding Indonesia
Luthfi Alfarisi
External Code Reviewer at Dicoding Indonesia
Inggih Wicaksono
Web Developer at Erasys Consulting
- Fullstack man but currently focus on React.js
- Hacktoberfest fans @igihcksn
Agista Septiyanto
Code Reviewer at Dicoding Indonesia
Alvin Indra Pratama
External Code Reviewer at Dicoding Indonesia
Alfian Yusuf Abdullah
Head of Reviewer at Dicoding Indonesia
Khairul Anas
External Code Reviewer at Dicoding Indonesia
• Dicoding Graduate
• Flutter Developer
• Mobile & Web Enthusiast
Fahmi Jabbar
External Code Reviewer at Dicoding Indonesia
Dimas Maulana Dwi Saputra
Curriculum Developer at Dicoding Indonesia
Gilang Ramadhan
Curriculum Developer at Dicoding Indonesia
Alexzander Purwoko Widiantoro
Code Reviewer at Dicoding Indonesia
Thingkilia Finnatia Husin
External Code Reviewer at Dicoding Indonesia
Lukman Bahar Agung Pambudi
External Code Reviewer at Dicoding Indonesia
Ni Luh Putu Anita Dewi
Nosef Nunggaran
External Code Reviewer at Dicoding Indonesia
AWS Certified Solutions Architect
Ananda Dwi Prayoga
Android Engineer at Vidio.com
Muhammad Nazar Alwi
External Code Reviewer at Dicoding Indonesia
Ivan Andrianto
External Reviewer at Dicoding Indonesia
Shaddam Amru Hasibuan
Front-end Developer at SMEsHub Indonesia
Muhammad Ilham Adhim
Front-End Web Developer
Muhammad Rifki Erlangga
External Code Reviewer at Dicoding Indonesia
Tatang Kuswandi
External Code Reviewer at Dicoding Indonesia
Gusti Muhammad Aulia Nur Sulthan
Hallo Semua.
Perkenalkan nama saya Gusti Muhammad Aulia Nur Sulthan biasa di panggil tann. saat ini saya mahasiswa tingkat akhir. saya sangat tertarik dibidang Artificial Intelligence dan sedang berfokus di Natural language processing.Â
saya sangat open untuk kolaborasi khususnya di machine learning.
Samodra
External Code Reviewer at Dicoding Indonesia
Muhammad Amru Salim
External Code Reviewer at Dicoding Indonesia
Yusril Adriansyah Putra
External Code Reviewer at Dicoding Indonesia
Sarah Salsabila
Ex-Reviewer at Dicoding Indonesia
Computer Science Student , Machine Learning and Data Science Enthusias
Yudistira Arya Mutamang
External Code Reviewer at Dicoding Indonesia
Ilham Shiddiq
External Code Reviewer at Dicoding Indonesia. Backend Developer at a company in Bandung.
Rully Indra Laelaningrum
Product Engineer at Dicoding Indonesia
Abraham Bulyan Zebua
make something from nothing
I love design and make new things especially for make an app and my desire is to make apps looks nice and friendly for user not just nice for eye but easy to use
Muhammad Alvino Dienova
External Reviewer at Dicoding Indonesia
Front-End Web Developer
Tia Dwi Setiani
Curriculum Developer at Dicoding Indonesia
Certified Tensorflow Developer
Marcello Sebastian
External Code Reviewer at Dicoding Indonesia
Front-end Development Enthusiast
Sofyan Egi Lesmana
External Code Reviewer at Dicoding Indonesia
You can reach out me on my Linkedin.
Rizqy Hidayat
Product Engineer, Dicoding Indonesia
Product Engineer, Dicoding Indonesia
Farida Aidah
Orang
"hello fafa"
Refiandi Reza Syawaldriyansah
External Reviewer Dicoding
Front-End & Javascript Enthusiast
Fauzi Kurniawan
External Code Reviewer at Dicoding Indonesia
Javascript enthusiast
Bibita Habibi Mustafa
Platform Engineer at Dicoding Indonesia
Moch Ridwan Taufik Alamsyah
External Code Reviewer at Dicoding Indonesia
"What We Learn When We Learn By Doing"
Currently as R&D Engineer at csacomputer.com
Buchori Rafsanjani
Curriculum Developer at Dicoding Indonesia
Widyarso Joko Purnomo
Khrisna dari Dicoding
Head of Reviewer at Dicoding Indonesia
Ahmad Arif Faizin
Curriculum Developer at Dicoding Indonesia
Nasrul Gunawan
Sr. Backend Engineer at Stockbit
Khofidin
IT & Traceability Manager at Austrex
Ahmad dari Dicoding
Managing Editor at Dicoding Indonesia
Luthfi Alfarisi
External Code Reviewer at Dicoding Indonesia
Inggih Wicaksono
Web Developer at Erasys Consulting
- Fullstack man but currently focus on React.js
- Hacktoberfest fans @igihcksn
Agista Septiyanto
Code Reviewer at Dicoding Indonesia
Alvin Indra Pratama
External Code Reviewer at Dicoding Indonesia
Alfian Yusuf Abdullah
Head of Reviewer at Dicoding Indonesia
Khairul Anas
External Code Reviewer at Dicoding Indonesia
• Dicoding Graduate
• Flutter Developer
• Mobile & Web Enthusiast
Fahmi Jabbar
External Code Reviewer at Dicoding Indonesia
Dimas Maulana Dwi Saputra
Curriculum Developer at Dicoding Indonesia
Gilang Ramadhan
Curriculum Developer at Dicoding Indonesia
Alexzander Purwoko Widiantoro
Code Reviewer at Dicoding Indonesia
Thingkilia Finnatia Husin
External Code Reviewer at Dicoding Indonesia
Lukman Bahar Agung Pambudi
External Code Reviewer at Dicoding Indonesia
Ni Luh Putu Anita Dewi
Nosef Nunggaran
External Code Reviewer at Dicoding Indonesia
AWS Certified Solutions Architect
Ananda Dwi Prayoga
Android Engineer at Vidio.com
Muhammad Nazar Alwi
External Code Reviewer at Dicoding Indonesia
Ivan Andrianto
External Reviewer at Dicoding Indonesia
Shaddam Amru Hasibuan
Front-end Developer at SMEsHub Indonesia
Muhammad Ilham Adhim
Front-End Web Developer
Muhammad Rifki Erlangga
External Code Reviewer at Dicoding Indonesia
Tatang Kuswandi
External Code Reviewer at Dicoding Indonesia
Gusti Muhammad Aulia Nur Sulthan
Hallo Semua.
Perkenalkan nama saya Gusti Muhammad Aulia Nur Sulthan biasa di panggil tann. saat ini saya mahasiswa tingkat akhir. saya sangat tertarik dibidang Artificial Intelligence dan sedang berfokus di Natural language processing.Â
saya sangat open untuk kolaborasi khususnya di machine learning.
Samodra
External Code Reviewer at Dicoding Indonesia
Muhammad Amru Salim
External Code Reviewer at Dicoding Indonesia
Yusril Adriansyah Putra
External Code Reviewer at Dicoding Indonesia
Sarah Salsabila
Ex-Reviewer at Dicoding Indonesia
Computer Science Student , Machine Learning and Data Science Enthusias
Yudistira Arya Mutamang
External Code Reviewer at Dicoding Indonesia
Ilham Shiddiq
External Code Reviewer at Dicoding Indonesia. Backend Developer at a company in Bandung.
Rully Indra Laelaningrum
Product Engineer at Dicoding Indonesia
Abraham Bulyan Zebua
make something from nothing
I love design and make new things especially for make an app and my desire is to make apps looks nice and friendly for user not just nice for eye but easy to use
Muhammad Alvino Dienova
External Reviewer at Dicoding Indonesia
Front-End Web Developer
Tia Dwi Setiani
Curriculum Developer at Dicoding Indonesia
Certified Tensorflow Developer
Marcello Sebastian
External Code Reviewer at Dicoding Indonesia
Front-end Development Enthusiast
Sofyan Egi Lesmana
External Code Reviewer at Dicoding Indonesia
You can reach out me on my Linkedin.
Rizqy Hidayat
Product Engineer, Dicoding Indonesia
Product Engineer, Dicoding Indonesia
Farida Aidah
Orang
"hello fafa"
Refiandi Reza Syawaldriyansah
External Reviewer Dicoding
Front-End & Javascript Enthusiast
Fauzi Kurniawan
External Code Reviewer at Dicoding Indonesia
Javascript enthusiast
Ribuan siswa sukses belajar di Dicoding Academy. Apa kata mereka? Berikut adalah testimoni asli mereka.
Lihat semua testimoni
Lihat semua testimoniBerikut adalah beberapa pertanyaan yang paling sering ditanyakan.
Materi yang akan Anda pelajari pada kelas ini.
Memahami HAKI, mekanisme belajar, forum diskusi, glosarium, dan daftar referensi.
5 Menit
5 Menit
10 Menit
5 Menit
5 Menit
10 Menit
10 Menit
5 Menit
Pengenalan mengenai website, apa itu website, tools dalam mengembangkan sebuah website.
5 Menit
5 Menit
15 Menit
Kuis: Pendahuluan
15 Menit
Memberikan pemahaman fungsi HTML dalam website, memahami struktur dasar HTML dengan mencoba membuat sebuah halaman HTML sederhana.
Pengenalan ke HTML
5 Menit
Membuat berkas HTML Pertama
15 Menit
Struktur Dasar HTML
15 Menit
Identifikasi Elemen pada Halaman Website
20 Menit
Kuis: Pengenalan HTML
15 Menit
Belajar mengorganisir konten dengan elemen semantik yang ada, mengenal attribute pada HTML, mengenal paragraf, header, gambar, list, dan elemen teks lainnya. Memahami perbedaan inline dan block elemen.
HTML lebih Dalam
5 Menit
Atribut HTML
15 Menit
Paragraf
10 Menit
Heading
10 Menit
List
15 Menit
Menambahkan List pada Halaman Profil
10 Menit
Gambar
15 Menit
Menambahkan Gambar pada Halaman Profil
25 Menit
Teks Terformat
25 Menit
Anchor, Emphasized Text, Important Text, dan Short Quotation
20 Menit
Citation, Defining Terms, Subscript, Superscript, Highlighted Text, dan Line Break
20 Menit
Menerapkan Anchor pada Navigasi Halaman Profil
20 Menit
Semantic HTML - Mengorganisasikan Halaman Konten
5 Menit
Header, Footer, Main dan Nav
15 Menit
Articles, Aside, dan Section
15 Menit
Generic Element
15 Menit
Mengorganisasikan Konten pada Halaman Profil
15 Menit
Menetapkan Elemen Header, Main, dan Footer
20 Menit
Menggunakan Div, Aside, Article, dan Section pada Konten
40 Menit
Table
5 Menit
Struktur Dasar Sebuah Tabel
15 Menit
Spanning Cell
20 Menit
Elemen dan Atribut pada Tabel
5 Menit
Menerapkan Elemen Tabel pada Halaman Profil
20 Menit
Special Character
10 Menit
Kuis: Pendalaman HTML
15 Menit
Memahami peran CSS dalam pembuatan website, benefit menerapkan CSS dan mengetahui penulisan sintaks dasar CSS dengan menerapkan beberapa basic styling pada elemen HTML.
Pengenalan ke Styling
5 Menit
Keuntungan dan Cara Kerja CSS
5 Menit
Memberikan Markup pada Dokumen
5 Menit
Menuliskan Aturan Styling
10 Menit
Melampirkan Styling pada Dokumen HTML
10 Menit
Menerapkan Styling Dasar pada Halaman Profil
5 Menit
Membuat Berkas CSS
10 Menit
Menulis Rules pada Berkas CSS
15 Menit
Menghubungkan Berkas CSS dengan HTML
10 Menit
CSS Conception
20 Menit
Kuis: Pengenalan CSS
15 Menit
Memahami lebih dalam mengenai selector CSS, memahami penerapan styling untuk font dan text (mengubah tipe dan ukuran font, mengubah warna teks, dsb.), memahami tentang foreground color dan background color, memahami konsep box model, dan layouting menggunakan float. Di akhir materi ini kita sudah dapat membuat satu halaman profil dengan menerapkan semantic struktur, styling, dan layouting menggunakan float.
Styling lebih Dalam
5 Menit
Selector Basic, Type Selector, dan Class Selector
25 Menit
ID Selector, Attribute Selector, dan Universal Selector
25 Menit
Combinators: Adjacent SIbling Selector dan General Sibling Selector
25 Menit
Combinators: Child Selector dan Descendant Selector
25 Menit
Pseudo Selector
35 Menit
Formatting Text (Text dan Font Styling)
5 Menit
Memilih Jenis dan Ukuran Font
25 Menit
Font Weight, Font Style, Font Variant, dan Shorthand
15 Menit
Text Styling: Line Height, Text Indent, dan Text Alignment
20 Menit
Text Styling: Text Decoration, Text Transform, Text Spacing, dan Text Shadow
20 Menit
Menerapkan Font Styling pada Halaman Profil
5 Menit
Menggunakan Font dari Google Font
40 Menit
Menetapkan Ukuran, Ketebalan, dan Perataan Teks pada Halaman Profil
30 Menit
Color
5 Menit
Menetapkan Nilai Warna
25 Menit
Text dan Background Color
20 Menit
Box Model
5 Menit
Box Element
5 Menit
Box Dimensions
40 Menit
Border
35 Menit
Padding
20 Menit
Margin
15 Menit
Centering Content
15 Menit
Display Roles
15 Menit
Box Shadow
15 Menit
Rounded Corner
15 Menit
Menerapkan Box Model pada Halaman Profil
5 Menit
Menetapkan ukuran pada gambar
20 Menit
Menerapkan Card Style pada Elemen Article
20 Menit
Menerapkan Jumbotron dan Navigasi pada Header
20 Menit
Menyesuaikan Padding dan Margin pada Body dan Elemen Main
15 Menit
Positioning
5 Menit
Perbedaan Static Flow dan Non-Static Flow
15 Menit
Normal Flow
15 Menit
Relative Positioning
15 Menit
Absolute Positioning
20 Menit
Fixed Positioning
15 Menit
Floating
20 Menit
Permasalahan Penerapan Float
15 Menit
Clear Property
15 Menit
Teknik Overflow
15 Menit
Menerapkan Positioning dan Float pada Halaman Profil
5 Menit
Menetapkan Float pada Content dan Aside
35 Menit
Menambahkan meta tag viewport
30 Menit
Media Query
50 Menit
Membuat Sticky Navigation
15 Menit
Memperbaiki CSS
10 Menit
Kuis: Pendalaman CSS
15 Menit
Memahami tentang penggunaan flexbox sebagai layout dasar membangun kalkulator berbasis website. Flex merupakan teknik baru dalam menyusun layout yang responsif, dan dapat dikombinasikan dengan media query agar lebih optimal ketika diakses menggunakan mobile devices.
Pengenalan Flexbox
5 Menit
Alasan Flexbox Hadir
10 Menit
Dasar-Dasar dan Terminologi Flexbox
15 Menit
Properti-Properti pada Flex Container
30 Menit
Properti-Properti pada Flex Items
20 Menit
Implementasi Flexbox pada Halaman Profil Bandung
40 Menit
Pengenalan Latihan: Landing Page Dicoding Indonesia
10 Menit
Latihan: Landing Page Dicoding Indonesia
60 Menit
Latihan: Menerapkan Responsibilitas pada Landing Page
40 Menit
Kuis: Layout Responsif dengan Flexbox
15 Menit
Dapat membuat website sederhana dengan menerapkan semantic element, dan layout flexbox atau float.
Ujian Akhir
15 Menit
Submission: Tugas Akhir Membuat Website
600 Menit