Developer Academy: Belajar Dasar Pemrograman Web

4.87 •

Front-End Web,

React

Learning Path

Belajar Dasar Pemrograman Web

Teknologi:

Web

Level: Dasar - Pemula

Level: Dasar - Pemula 41 Jam Belajar

120.834

Siswa Terdaftar

Pelajari komponen-komponen dasar HTML dan CSS yang merupakan fondasi utama untuk menjadi front-end web developer.

Belajar Sekarang

Informasi kelas Lihat silabus

Learning Path Front-End Web Developer

Kelas ini merupakan langkah ke-satu Anda untuk menjadi Front-End Web Developer.

Langkah setelahnya

Langkah 2

Belajar Dasar Pemrograman JavaScript

45 Jam 4,86 Level Dasar

Learning Path React Developer

Kelas ini merupakan langkah ke-satu Anda untuk menjadi React Developer.

Langkah setelahnya

Langkah 2

Belajar Dasar Pemrograman JavaScript

45 Jam 4,86 Level Dasar

Apa yang akan Anda dapatkan

Sertifikat

Dapatkan sertifikat standar industri setelah menyelesaikan kelas ini.

Code Review

Kode yang Anda kerjakan akan di-review secara komprehensif oleh Reviewer.

Forum Diskusi

Diskusikan materi belajar dengan siswa lainnya.

Modul Tutorial

Materi bacaan elektronik disajikan dengan bahasa yang mudah dipahami.

Submission

Uji kemampuan teknis Anda dengan mengerjakan tugas submission.

Kode Interaktif

Modul belajar dalam bentuk video, disertai dengan latihan untuk menguji pemahaman.

Kuis

Kuis pilihan ganda membantu Anda memahami materi yang dipelajari.

Ujian

Validasi pengetahuan Anda dengan mengerjakan soal-soal ujian.

Level Dasar
Mempelajari materi yang berkenaan dengan topik tanpa perlu ada latar belakang khusus.

Level Pemula
Mempelajari topik dasar dengan objektif membuat produk, sistem, atau latihan sederhana.

Deskripsi

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.

Web merupakan platform yang dapat diakses melalui banyak macam perangkat. Hal ini menjadi keuntungan jika Anda mengembangkan aplikasi berbasis web.
Pengembangan web tidak membutuhkan komputer/laptop yang memiliki spesifikasi tinggi sehingga bukan menjadi hambatan utama bagi Anda yang tidak memiliki perangkat yang mumpuni.
Website adalah platform yang dijangkau oleh banyak Search Engine seperti Google Search sehingga sangat cocok sebagai media promosi bisnis atau konten.
Mengembangkan website termasuk pengembangan yang mudah di-maintenance dan mudah untuk dipublikasi.

Target dan Sasaran Siswa :

Kelas ditujukan bagi pemula yang ingin memulai karirnya di bidang web development (pembuatan web) dan membutuhkan dasar atau fondasi yang kuat sebelum belajar lebih dalam di bidang web, dengan mengacu pada standar internasional milik Google Developers.
Kelas dapat diikuti oleh siswa yang melek IT sehingga wajib memiliki dan dapat mengoperasikan komputer dengan baik.
Kelas ini didesain untuk pemula sehingga tidak ada prasyarat dalam pemahaman pemrograman sebelumnya.
Siswa harus bisa belajar mandiri, berkomitmen, benar-benar punya rasa ingin tahu, dan tertarik pada subjek materi, karena sebaik apa pun materi kelas ini, tidak akan berguna tanpa keseriusan siswa untuk belajar, berlatih, dan mencoba.

Tujuan Umum dan Khusus Pelatihan :

Di akhir pelatihan, peserta dapat membuat sebuah website sederhana menggunakan kode pemrograman yang sesuai standar global.
Membangun website menggunakan HTML dan CSS..
Menerapkan struktur website yang baik menggunakan standar semantic HTML.
Mendemonstrasikan penyusunan layout website menggunakan teknik float atau flexbox.

Selengkapnya

Sembunyikan

Learning Path

Kelas ini merupakan langkah ke-satu Anda untuk menjadi Front-End Web Developer.

Langkah setelahnya

Langkah 2

Belajar Dasar Pemrograman JavaScript

45 Jam 4,86 Level Dasar

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

Peralatan Belajar

Spesifikasi minimal perangkat

Kelas 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)

Tools

Kelas ini membutuhkan beberapa tools berikut:

Web Browser (Google Chrome atau Mozilla Firefox)

Teks Editor (VSCode)

Metode Ajar

Online - Self-paced Learning
- Total jam belajar : 55 jam
- Rekomendasi waktu belajar : 10 jam per minggu (selesai dalam 39 hari)
- Anda tentukan sendiri berapa lama waktu yang akan digunakan untuk belajar materi kelas ini selama masih aktif terdaftar pada kelas
Fasilitas Pengajaran
- Materi bacaan elektronik : Materi akan disajikan dalam bentuk teks dan bacaan
- Forum diskusi : Setiap kelas memiliki sebuah forum diskusi yang dapat Anda gunakan untuk bertanya dan berdikusi
- Evaluasi pembelajaran
  - Ujian akhir kelas
  - Submission (proyek akhir) berupa sebuah halaman website menggunakan teknik semantic HTML dan layouting
- Sertifikat kompetensi

Lihat semua metode ajar

Metode Ajar

Online - Self-paced Learning
- Total jam belajar : 55 jam
- Rekomendasi waktu belajar : 10 jam per minggu (selesai dalam 39 hari)
- Anda tentukan sendiri berapa lama waktu yang akan digunakan untuk belajar materi kelas ini selama masih aktif terdaftar pada kelas
Fasilitas Pengajaran
- Materi bacaan elektronik : Materi akan disajikan dalam bentuk teks dan bacaan
- Forum diskusi : Setiap kelas memiliki sebuah forum diskusi yang dapat Anda gunakan untuk bertanya dan berdikusi
- Evaluasi pembelajaran
  - Ujian akhir kelas
  - Submission (proyek akhir) berupa sebuah halaman website menggunakan teknik semantic HTML dan layouting
- Sertifikat kompetensi

Kontributor

Curriculum Developer yang membangun kelas ini:

Dimas Maulana Dwi Saputra

Curriculum Developer at Dicoding Indonesia

Nur Rizki Adi Prasetyo

Curriculum Developer at Dicoding Indonesia

Reviewer

Code Reviewer yang akan me-review tugas dan kode Anda:

Bibita Habibi Mustafa

Platform Engineer at Dicoding Indonesia

LINE API Expert
IoT Enthusiast

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

Full Stack Development Enthusiast
Mobile Development Enthusiast
Machine Learning Enthusiast

Buchori Rafsanjani

Curriculum Developer at Dicoding Indonesia

Unity Certified Associate

Widyarso Joko Purnomo

Khrisna dari Dicoding

Head of Reviewer at Dicoding Indonesia

Associate Android Developer

Lihat semua kontributor dan reviewer

Kontributor & Reviewer

Kontributor 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

LINE API Expert
IoT Enthusiast

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

Full Stack Development Enthusiast
Mobile Development Enthusiast
Machine Learning Enthusiast

Buchori Rafsanjani

Curriculum Developer at Dicoding Indonesia

Unity Certified Associate

Widyarso Joko Purnomo

Khrisna dari Dicoding

Head of Reviewer at Dicoding Indonesia

Associate Android Developer

Ahmad Arif Faizin

Curriculum Developer at Dicoding Indonesia

Nasrul Gunawan

Sr. Backend Engineer at Stockbit

Web & Mobile Enthusiast
UI/UX Enthusiast

Khofidin

IT & Traceability Manager at Austrex

Google Certified Associate Android Developer
Multi stack developer

Ahmad dari Dicoding

Managing Editor at Dicoding Indonesia

Associate Android Developer

Luthfi Alfarisi

External Code Reviewer at Dicoding Indonesia

Associate Android Developer
Android & Web Enthusiast

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

Associate Android Developer

Alvin Indra Pratama

External Code Reviewer at Dicoding Indonesia

Front-End Developer

Alfian Yusuf Abdullah

Head of Reviewer at Dicoding Indonesia

Associate Android Developer
Kotlin Enthusiast
UI/UX Enthusiast

Khairul Anas

External Code Reviewer at Dicoding Indonesia

• Dicoding Graduate

• Flutter Developer

• Mobile & Web Enthusiast

Fahmi Jabbar

External Code Reviewer at Dicoding Indonesia

Certified TensorFlow Developer

Dimas Maulana Dwi Saputra

Curriculum Developer at Dicoding Indonesia

Mobile and Web Enthusiast
Node.js Developer Certified
AWS Certified Cloud Practitioner
React Developer
Associate Android Developer

Gilang Ramadhan

Curriculum Developer at Dicoding Indonesia

Alexzander Purwoko Widiantoro

Code Reviewer at Dicoding Indonesia

Associate Android Developer
Android, Web & IoT Enthusiast

Thingkilia Finnatia Husin

External Code Reviewer at Dicoding Indonesia

Associate Android Developer
Bangkit Graduate 2021
Android Developer
Kotlin Enthusiast

Lukman Bahar Agung Pambudi

External Code Reviewer at Dicoding Indonesia

Freelance Practitioner
Full Stack Software Developer

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

Android Dev
Web Dev

Muhammad Nazar Alwi

External Code Reviewer at Dicoding Indonesia

Software Engineering Student
Dicoding Graduate
iOS Developer

Ivan Andrianto

External Reviewer at Dicoding Indonesia

Google Data Analytics Professional Certificate
UI/UX Enthusiast
Machine Learning Enthusiast
Mobile & Web Enthusiast

Shaddam Amru Hasibuan

Front-end Developer at SMEsHub Indonesia

Software Developer
Front-end/React Developer
Linux Enthusiast

Muhammad Ilham Adhim

Front-End Web Developer

Muhammad Rifki Erlangga

External Code Reviewer at Dicoding Indonesia

Front-end Web Developer

Tatang Kuswandi

External Code Reviewer at Dicoding Indonesia

Mobile and Web Enthusiast

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

Software Engineer

Muhammad Amru Salim

External Code Reviewer at Dicoding Indonesia

Mobile and Web Enthusiast

Yusril Adriansyah Putra

External Code Reviewer at Dicoding Indonesia

Front-End Web Developer
Back-End Web Developer
Javascript Enthusiast

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

Front-End Web Developer
Cyber Security Enthusiast

Ilham Shiddiq

External Code Reviewer at Dicoding Indonesia. Backend Developer at a company in Bandung.

Back-End Web Developer
Web Developing Enthusiast

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

see more about me

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

SIB Graduate Batch 2 - Front-End & Back-End Web
Certified by Dicoding Indonesia

You can reach out me on my Linkedin.

Rizqy Hidayat

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

LINE API Expert
IoT Enthusiast

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

Full Stack Development Enthusiast
Mobile Development Enthusiast
Machine Learning Enthusiast

Buchori Rafsanjani

Curriculum Developer at Dicoding Indonesia

Unity Certified Associate

Widyarso Joko Purnomo

Khrisna dari Dicoding

Head of Reviewer at Dicoding Indonesia

Associate Android Developer

Ahmad Arif Faizin

Curriculum Developer at Dicoding Indonesia

Nasrul Gunawan

Sr. Backend Engineer at Stockbit

Web & Mobile Enthusiast
UI/UX Enthusiast

Khofidin

IT & Traceability Manager at Austrex

Google Certified Associate Android Developer
Multi stack developer

Ahmad dari Dicoding

Managing Editor at Dicoding Indonesia

Associate Android Developer

Luthfi Alfarisi

External Code Reviewer at Dicoding Indonesia

Associate Android Developer
Android & Web Enthusiast

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

Associate Android Developer

Alvin Indra Pratama

External Code Reviewer at Dicoding Indonesia

Front-End Developer

Alfian Yusuf Abdullah

Head of Reviewer at Dicoding Indonesia

Associate Android Developer
Kotlin Enthusiast
UI/UX Enthusiast

Khairul Anas

External Code Reviewer at Dicoding Indonesia

• Dicoding Graduate

• Flutter Developer

• Mobile & Web Enthusiast

Fahmi Jabbar

External Code Reviewer at Dicoding Indonesia

Certified TensorFlow Developer

Dimas Maulana Dwi Saputra

Curriculum Developer at Dicoding Indonesia

Mobile and Web Enthusiast
Node.js Developer Certified
AWS Certified Cloud Practitioner
React Developer
Associate Android Developer

Gilang Ramadhan

Curriculum Developer at Dicoding Indonesia

Alexzander Purwoko Widiantoro

Code Reviewer at Dicoding Indonesia

Associate Android Developer
Android, Web & IoT Enthusiast

Thingkilia Finnatia Husin

External Code Reviewer at Dicoding Indonesia

Associate Android Developer
Bangkit Graduate 2021
Android Developer
Kotlin Enthusiast

Lukman Bahar Agung Pambudi

External Code Reviewer at Dicoding Indonesia

Freelance Practitioner
Full Stack Software Developer

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

Android Dev
Web Dev

Muhammad Nazar Alwi

External Code Reviewer at Dicoding Indonesia

Software Engineering Student
Dicoding Graduate
iOS Developer

Ivan Andrianto

External Reviewer at Dicoding Indonesia

Google Data Analytics Professional Certificate
UI/UX Enthusiast
Machine Learning Enthusiast
Mobile & Web Enthusiast

Shaddam Amru Hasibuan

Front-end Developer at SMEsHub Indonesia

Software Developer
Front-end/React Developer
Linux Enthusiast

Muhammad Ilham Adhim

Front-End Web Developer

Muhammad Rifki Erlangga

External Code Reviewer at Dicoding Indonesia

Front-end Web Developer

Tatang Kuswandi

External Code Reviewer at Dicoding Indonesia

Mobile and Web Enthusiast

Gusti Muhammad Aulia Nur Sulthan

Hallo Semua.

saya sangat open untuk kolaborasi khususnya di machine learning.

Samodra

External Code Reviewer at Dicoding Indonesia

Software Engineer

Muhammad Amru Salim

External Code Reviewer at Dicoding Indonesia

Mobile and Web Enthusiast

Yusril Adriansyah Putra

External Code Reviewer at Dicoding Indonesia

Front-End Web Developer
Back-End Web Developer
Javascript Enthusiast

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

Front-End Web Developer
Cyber Security Enthusiast

Ilham Shiddiq

External Code Reviewer at Dicoding Indonesia. Backend Developer at a company in Bandung.

Back-End Web Developer
Web Developing Enthusiast

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

see more about me

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

SIB Graduate Batch 2 - Front-End & Back-End Web
Certified by Dicoding Indonesia

You can reach out me on my Linkedin.

Rizqy Hidayat

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

Testimoni Siswa

Ribuan siswa sukses belajar di Dicoding Academy. Apa kata mereka? Berikut adalah testimoni asli mereka.

Indah Astyaningrum

PT. Televisi Transformasi Indonesia

Belajar Dasar Pemrograman Web

Belajar pemprograman di dicoding sangat mudah di pahami serta materi dan latihannya juga menarik.

Baca selengkapnya

Bagus Nafian Tomi

PT. JPC Indonesia

Belajar Dasar Pemrograman Web

Sangat pas sekali untuk yang baru mulai belajar web programming karena materi diberikan secara tertulis sehingga jika ada yang lupa atau belum paham tinggal mencari materinya dan dibaca lagi (sangat merepotkan sekali bukan jika berupa video).

Baca selengkapnya

Lihat semua testimoni

Testimoni Siswa

Indah Astyaningrum

PT. Televisi Transformasi Indonesia

Belajar Dasar Pemrograman Web

Belajar pemprograman di dicoding sangat mudah di pahami serta materi dan latihannya juga menarik.

Bagus Nafian Tomi

PT. JPC Indonesia

Belajar Dasar Pemrograman Web

Sangat pas sekali untuk yang baru mulai belajar web programming karena materi diberikan secara tertulis sehingga jika ada yang lupa ato belum paham tinggal mencari materinya dan dibaca lagi (sangat merepotkan sekali bukan jika berupa video)

Enny Sriwi Juita Siahaan

DataOn

Belajar Dasar Pemrograman Web

Saya punya background kuiah bidang IT, dari awal saya tidak suka pelajaran CSS & Javaascript karena tidak menarik. Tapi setelah belajar disini ternyata menarik juga, saya jadi lebih mengerti pemakaian CSS & JavaScript, padahal dulu ga suka ngoding sama sekali. Tengkyu dicoding ({})

Putu Heri Setiawan

PT. Sumber Alfaria Trijaya Tbk

Belajar Dasar Pemrograman Web

Materi Pemrograman Web Dasar ini sangat mudah dipelajari. Senang rasanya bisa menyelesaikan semua materinya, tim reviewer nya juga responnya sangat cepat dalam mereview tugas submission. Dicoding Mantap....

Punya pertanyaan seputar kelas ini?

Berikut adalah beberapa pertanyaan yang paling sering ditanyakan.

Bagaimana cara memasukkan token Academy? Aturan membuat pertanyaan di forum diskusi kelas Bagaimana cara mencetak sertifikat kelulusan kelas?

Lihat semua FAQ

Silabus

Materi yang akan Anda pelajari pada kelas ini.

Persiapan Belajar

Memahami HAKI, mekanisme belajar, forum diskusi, glosarium, dan daftar referensi.

8 Artikel

55 menit

Pendahuluan

Pengenalan mengenai website, apa itu website, tools dalam mengembangkan sebuah website.

3 Artikel
1 Ujian

40 menit

Apa itu Website?
5 Menit
Server dan Client
5 Menit
Anatomi Website
15 Menit
Kuis: Pendahuluan

15 Menit

Pengenalan HTML

Memberikan pemahaman fungsi HTML dalam website, memahami struktur dasar HTML dengan mencoba membuat sebuah halaman HTML sederhana.

4 Artikel
1 Ujian

70 menit

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

Pendalaman HTML

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.

25 Artikel
1 Ujian

405 menit

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

Pengenalan CSS

Memahami peran CSS dalam pembuatan website, benefit menerapkan CSS dan mengetahui penulisan sintaks dasar CSS dengan menerapkan beberapa basic styling pada elemen HTML.

10 Artikel
1 Ujian

110 menit

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

Pendalaman CSS

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.

48 Artikel
1 Ujian

920 menit

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

Layout Responsif dengan Flexbox

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.