
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
55Code Reviewer yang akan me-review tugas dan kode Anda:
Bibita Habibi Mustafa
Platform Engineer at Dicoding Indonesia
Moch Ridwan Taufik Alamsyah
R&D Engineer at csacomputer.com, External Code Reviewer at Dicoding Indonesia
"What We Learn When We Learn By Doing?"
Buchori Rafsanjani
Curriculum Developer at Dicoding Indonesia
Widyarso Joko Purnomo
Khrisna Indrawan Eka Putra
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
R&D Engineer at csacomputer.com, External Code Reviewer at Dicoding Indonesia
"What We Learn When We Learn By Doing?"
Buchori Rafsanjani
Curriculum Developer at Dicoding Indonesia
Widyarso Joko Purnomo
Khrisna Indrawan Eka Putra
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
Product Engineer 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
Mellania Permata Sylvie
External Reviewer Machine Learning di Dicoding
Information system student, Machine Learning Enthusiasm, and Tensorflow Developer Certified
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
Rosyiidah Hasnaa
Front End Enthusiast, Undergraduate at Politeknik Elektronika Negeri Surabaya
Final Year Student of Informatics Engineering at Politeknik Elektronika Negeri Surabaya. I have experience building a website using html, css, bootstrap, and javascript and making a responsive website. I enjoy learning about front-end developers in my free time. An eager and conscientious person who works well in team environments. I'm looking for opportunities in front-end web development.
Let's connect with me on linkedin.com/in/syiidahasnaa
Shaddam Amru Hasibuan
Front-end Engineer at Smeshub
Muhammad Ilham Adhim
Front-End Web Developer
Muhammad Rifki Erlangga
External Code Reviewer at Dicoding Indonesia
Mohamad Zaelani
External Code Reviewer Dicoding
Have an Interest in Machine Learning, Cloud Computing, Mobile and Web development. Feel free to connect with me on LinkedIn.
• Dicoding Discussion Squad
• TensorFlow Developer Certified
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
Hasan Ismail Abdulmalik
Software Engineering Student at College of Vocational Studies IPB University
I am a web developer who is interested in both backend and frontend development. I have been teaching myself web development and am familiar with programming languages such as HTML, CSS, JavaScript, PHP and Python as well as frameworks like Laravel, Django, React and Node.js. I am eager to gain practical experience and contribute to the development of high-quality websites and software.
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
Eko Rahayu Widodo
Front-End Web Developer | React Developer
- Front-end web developer concentrating on developing an attractive website appearance using an Eye-catching and Beautifully crafted concept with React as the core stack.Â
- Machine Learning and Mobile Apps Enthusiasts.
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
Fazza Razaq Amiarso
Web Developer & Open Source Maintainer
I'm a self-taught web developer focusing on making everyone can inclusively use the web. Currently transitioning from React to Svelte. Interested on learning Interactive Story Telling with Data Visualization.
Personal Website:Â https://fazzaamiarso.me
Github: https://github.com/fazzaamiarso
Fauzi Kurniawan
External Code Reviewer at Dicoding Indonesia
Javascript enthusiast
Gunawan Wahyu Andreanto
Full Stack Developer
Irenius Brayen Luhat
Self-employed
Seorang pembelajar dan pengembang web. Saya adalah seorang antusias Javascript, saya mendedikasikan banyak waktu belajar saya di sini. Kenali lebih jauh dengan mengunjung website profil saya.
Bibita Habibi Mustafa
Platform Engineer at Dicoding Indonesia
Moch Ridwan Taufik Alamsyah
R&D Engineer at csacomputer.com, External Code Reviewer at Dicoding Indonesia
"What We Learn When We Learn By Doing?"
Buchori Rafsanjani
Curriculum Developer at Dicoding Indonesia
Widyarso Joko Purnomo
Khrisna Indrawan Eka Putra
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
Product Engineer 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
Mellania Permata Sylvie
External Reviewer Machine Learning di Dicoding
Information system student, Machine Learning Enthusiasm, and Tensorflow Developer Certified
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
Rosyiidah Hasnaa
Front End Enthusiast, Undergraduate at Politeknik Elektronika Negeri Surabaya
Final Year Student of Informatics Engineering at Politeknik Elektronika Negeri Surabaya. I have experience building a website using html, css, bootstrap, and javascript and making a responsive website. I enjoy learning about front-end developers in my free time. An eager and conscientious person who works well in team environments. I'm looking for opportunities in front-end web development.
Let's connect with me on linkedin.com/in/syiidahasnaa
Shaddam Amru Hasibuan
Front-end Engineer at Smeshub
Muhammad Ilham Adhim
Front-End Web Developer
Muhammad Rifki Erlangga
External Code Reviewer at Dicoding Indonesia
Mohamad Zaelani
External Code Reviewer Dicoding
Have an Interest in Machine Learning, Cloud Computing, Mobile and Web development. Feel free to connect with me on LinkedIn.
• Dicoding Discussion Squad
• TensorFlow Developer Certified
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
Hasan Ismail Abdulmalik
Software Engineering Student at College of Vocational Studies IPB University
I am a web developer who is interested in both backend and frontend development. I have been teaching myself web development and am familiar with programming languages such as HTML, CSS, JavaScript, PHP and Python as well as frameworks like Laravel, Django, React and Node.js. I am eager to gain practical experience and contribute to the development of high-quality websites and software.
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
Eko Rahayu Widodo
Front-End Web Developer | React Developer
- Front-end web developer concentrating on developing an attractive website appearance using an Eye-catching and Beautifully crafted concept with React as the core stack.Â
- Machine Learning and Mobile Apps Enthusiasts.
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
Fazza Razaq Amiarso
Web Developer & Open Source Maintainer
I'm a self-taught web developer focusing on making everyone can inclusively use the web. Currently transitioning from React to Svelte. Interested on learning Interactive Story Telling with Data Visualization.
Personal Website:Â https://fazzaamiarso.me
Github: https://github.com/fazzaamiarso
Fauzi Kurniawan
External Code Reviewer at Dicoding Indonesia
Javascript enthusiast
Gunawan Wahyu Andreanto
Full Stack Developer
Irenius Brayen Luhat
Self-employed
Seorang pembelajar dan pengembang web. Saya adalah seorang antusias Javascript, saya mendedikasikan banyak waktu belajar saya di sini. Kenali lebih jauh dengan mengunjung website profil saya.
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 website, cara kerjanya, dan tools-nya dalam mengembangkannya.
5 Menit
5 Menit
15 Menit
Kuis: Pendahuluan
15 Menit
Memberikan pemahaman fungsi HTML dalam website, memahami struktur dasar dokumen HTML dengan membangun halaman web 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 mengorganisasi konten dengan elemen semantik, mengenal beragam atribut, elemen paragraf, heading, gambar, list, dan 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, benefitnya, 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.
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 teknik baru dalam menyusun layout yang mudah dan responsif pada beragam perangkat.
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: Membangun Layout Responsif 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