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.
Applied Bachelor of Informatics Engineering from 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
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.
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.
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
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.
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.
Applied Bachelor of Informatics Engineering from 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
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.
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.
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
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.
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.
Information system student, Machine Learning Enthusiasm, and Tensorflow Developer Certified
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
Google Data Analytics Professional Certificate
UI/UX Enthusiast
Machine Learning Enthusiast
Mobile & Web Enthusiast
Rosyiidah Hasnaa
Frontend Developer
Applied Bachelor of Informatics Engineering from 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
Frontend Engineer
React Frontend Engineer
Product & UX
Linux Enthusiast
Muhammad Ilham Adhim
Front-End Web Developer
Muhammad Rifki Erlangga
External Code Reviewer at Dicoding Indonesia
Front-end Web Developer
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.
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
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
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
- Frontend web enthusiast - Contribute through technology </>
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.
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.
Muhammad Zainul Hakim
Developer
Learning the web tech.
Tatang Kuswandi
Seprian Dani
External Academy Code Reviewer at Dicoding Indonesia
Testimoni Siswa
Ribuan siswa sukses belajar di Dicoding Academy. Apa kata mereka? Berikut adalah testimoni asli mereka.
BAGUS BUDI SATOTO
PT Telkom Indonesia
Belajar Dasar Pemrograman Web
Dicoding memiliki program belajar mandiri yang sangat fleksibel. Saya dapat belajar kapan saja dan di mana saja sesuai dengan jadwal saya sendiri. Ini memungkinkan saya untuk mengembangkan keterampilan baru tanpa harus meninggalkan pekerjaan saat ini.
Dicoding memiliki program belajar mandiri yang sangat fleksibel. Saya dapat belajar kapan saja dan di mana saja sesuai dengan jadwal saya sendiri. Ini memungkinkan saya untuk mengembangkan keterampilan baru tanpa harus meninggalkan pekerjaan saat ini.
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 ({})
Testimoni Siswa
BAGUS BUDI SATOTO
PT Telkom Indonesia
Belajar Dasar Pemrograman Web
Dicoding memiliki program belajar mandiri yang sangat fleksibel. Saya dapat belajar kapan saja dan di mana saja sesuai dengan jadwal saya sendiri. Ini memungkinkan saya untuk mengembangkan keterampilan baru tanpa harus meninggalkan pekerjaan saat ini.
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 ({})
Punya pertanyaan seputar kelas ini?
Berikut adalah beberapa pertanyaan yang paling sering ditanyakan.
Mempelajari alat yang digunakan dalam membangun struktur halaman website. Modul ini membahas tentang HTML, struktur dasar dokumen HTML, dsb.
7Artikel
1Ujian
130 menit
Pengantar HTML
5 Menit
Latihan: Membangun Halaman Web Pertama (Halaman Profil)
25 Menit
Latihan: Identifikasi Elemen pada Halaman Profil
15 Menit
Anatomi Elemen HTML
15 Menit
Attribute di Elemen HTML
20 Menit
Anatomi Dokumen HTML
20 Menit
Rangkuman Pengenalan HTML
15 Menit
Kuis: Pengenalan HTML
15 Menit
Pendalaman HTML
Mendalami penerapan HTML dalam membangun struktur halaman web secara lebih lanjut. Di antaranya seperti beragam elemen HTML, teknik mengorganisir konten website dengan elemen semantik, mengenal attribute pada elemen, generic element, table, dsb. Selain itu, modul ini membahas tentang perbedaan antara elemen yang bersifat inline dan block.
28Artikel
1Ujian
480 menit
Pengantar Pendalaman HTML
5 Menit
Paragraf
10 Menit
Heading
10 Menit
List
15 Menit
Latihan: Menambahkan List pada Halaman Profil
10 Menit
Gambar
15 Menit
Latihan: Menambahkan Gambar pada Halaman Profil
25 Menit
Inline Formatting Text: Long Quotations, Preformatted Text, dan Figure
25 Menit
Inline Formatting Text: Anchor, Emphasized Text, Important Text, dan Short Quotation
20 Menit
Inline Formatting Text: Citation, Defining Terms, Subscript, Superscript, Highlighted Text, dan Line Break
20 Menit
Latihan: Menerapkan Elemen Anchor pada Halaman Profil
20 Menit
Semantic HTML: Mengorganisasi Halaman Konten
5 Menit
Semantic HTML: Header, Footer, Main, dan Nav
15 Menit
Semantic HTML: Articles, Aside, dan Section
15 Menit
Generic Element
15 Menit
Pengantar Latihan: Mengorganisasi Konten pada Halaman Profil
15 Menit
Latihan: Menetapkan Elemen Header, Main, dan Footer di Halaman Profil
20 Menit
Latihan: Menerapkan Elemen Div, Aside, Article, dan Section di Halaman Profil
35 Menit
Tabel
5 Menit
Struktur Dasar Tabel
15 Menit
Spanning Cell
20 Menit
Elemen dan Atribut pada Tabel
5 Menit
Latihan: Menerapkan Elemen Tabel pada Halaman Profil
20 Menit
Input User
20 Menit
Atribut pada Elemen Input
15 Menit
Mengirim Data Formulir
25 Menit
Special Character
10 Menit
Rangkuman Pendalaman HTML
35 Menit
Kuis: Pendalaman HTML
15 Menit
Pengenalan CSS
Memahami peran CSS dalam pembuatan website, benefitnya, dan mengetahui penulisan sintaks dasar CSS dengan menerapkan beberapa basic styling pada elemen HTML.
11Artikel
1Ujian
120 menit
Pengantar Pengenalan CSS
5 Menit
Keuntungan dan Cara CSS Bekerja
5 Menit
Memberi Markup pada Dokumen HTML
5 Menit
Menulis Aturan Styling
10 Menit
Melampirkan Styling pada Dokumen HTML
10 Menit
Pengantar Latihan: Menerapkan Styling Dasar pada Halaman Profil
5 Menit
Latihan: Styling untuk Halaman Profil
10 Menit
Latihan: Menulis Rules pada Berkas CSS
10 Menit
Latihan: Menghubungkan Berkas CSS dengan Halaman Profil
10 Menit
CSS Conception
20 Menit
Rangkuman Pengenalan CSS
15 Menit
Kuis: Pengenalan CSS
15 Menit
Pendalaman CSS
Mendalami penerapan CSS dalam mempercantik tampilan halaman website secara lebih lanjut. Di antaranya seperti variatif selector, styling untuk font dan text, memahami tentang foreground color dan background color, box model, shadow, positioning, layouting menggunakan float, dan media query.
51Artikel
1Ujian
910 menit
Pengantar Pendalaman CSS
5 Menit
Selector Dasar: Type Selector, dan Class Selector
15 Menit
Selector Dasar: ID Selector, Attribute Selector, dan Universal Selector
20 Menit
Combinators: Adjacent SIbling Selector dan General Sibling Selector
25 Menit
Combinators: Child Selector dan Descendant Selector
25 Menit
Pseudo Selector
30 Menit
Formatting Text
5 Menit
Font Styling: Font Family dan Font Size
25 Menit
Font Styling: 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, Word-Letter Spacing, dan Text Shadow
20 Menit
Pengantar Latihan: Menerapkan Font Styling pada Halaman Profil
5 Menit
Latihan: Menggunakan Font dari Google Fonts
25 Menit
Latihan: Menetapkan Ukuran, Ketebalan, dan Alignment Teks di Halaman Profil
30 Menit
Pewarnaan
5 Menit
Menetapkan Nilai Warna
25 Menit
Warna untuk Teks dan Latar Belakang
20 Menit
Opacity
20 Menit
Box Model
5 Menit
Apa Itu Box Element
5 Menit
Box Model: Box Dimensions
25 Menit
Box Model: Border
20 Menit
Box Model: Padding
20 Menit
Box Model: Margin
20 Menit
Box Model: Centering Content
15 Menit
Display Roles
15 Menit
Box Shadow
15 Menit
Rounded Corner
15 Menit
Pengantar Latihan: Mengatur Box Model di Halaman Profil
5 Menit
Latihan: Menetapkan Ukuran pada Gambar
20 Menit
Latihan: Menerapkan Card Style pada Elemen Article
20 Menit
Latihan: Menerapkan Jumbotron dan Navigasi pada Elemen Header
20 Menit
Latihan: Menyesuaikan Padding dan Margin pada Elemen Body dan Main
15 Menit
Positioning
5 Menit
Positioning: Perbedaan Static Flow dan Non-Static Flow
15 Menit
Positioning: Normal Flow
15 Menit
Positioning: Relative Positioning
15 Menit
Positioning: Absolute Positioning
20 Menit
Positioning: Fixed Positioning
15 Menit
Floating
20 Menit
Permasalahan Penerapan Float
15 Menit
Clear Property
15 Menit
Teknik Overflow
15 Menit
Pengantar Latihan: Menerapkan Positioning dan Float pada Halaman Profil
5 Menit
Latihan: Menerapkan Float pada Elemen Content dan Aside
30 Menit
Konfigurasi Meta Tag Viewport untuk Responsibilitas Layout
20 Menit
Specific Style dengan Media Query
20 Menit
Latihan: Membuat Mobile Version untuk Halaman Profil
25 Menit
Latihan: Menerapkan Sticky Position pada Navigation List
25 Menit
Debugging dan Optimasi
15 Menit
Rangkuman Pendalaman CSS
35 Menit
Kuis: Pendalaman CSS
15 Menit
Layout Responsif dengan Flexbox
Memahami tentang penggunaan flexbox sebagai teknik baru dalam menyusun layout yang mudah dan responsif pada beragam perangkat.
10Artikel
1Ujian
230 menit
Pengantar 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
25 Menit
Latihan: Implementasi Flexbox pada Halaman Profil
40 Menit
Pengenalan Latihan: Landing Page Dicoding
10 Menit
Latihan: Membangun Landing Page Dicoding
40 Menit
Latihan: Meningkatkan Responsivitas pada Landing Page Dicoding
25 Menit
Rangkuman Layout Responsif dengan Flexbox
15 Menit
Kuis: Layout Responsif dengan Flexbox
15 Menit
Penutup
Mengingat kembali seluruh materi-materi yang dipelajari melalui rangkuman serta melakukan validasi kepemahaman dan ingatan melalui ujian akhir.
1Artikel
1Ujian
75 menit
Rangkuman Kelas
60 Menit
Ujian Akhir
15 Menit
Proyek Akhir
Membuat website sederhana dengan menerapkan semantic element dan layout flexbox.
