
Belajar Membuat Website untuk Menjadi Desainer Website
Topik:
Full StackLevel: Dasar
Siswa Terdaftar
Topik:
Full StackLevel: Dasar
Siswa Terdaftar
Seorang desainer website sesuai standar klasifikasi okupasi KBJI itu dapat membuat rancangan website. Tugasnya meliputi: Membuat rancangan layout website, membuat bentuk visualnya; mengkonversi dari file Photoshop, Firework atau Gimp ke dalam bentuk HTML dan CSS agar bisa dijalankan dengan baik di web browser; mengatur tata letak elemen-elemen yang ada di sebuah website sesuai dengan bentuk visual yang sudah dibuat sebelumnya; memberi efek tambahan yang diperlukan untuk menunjang tampilan website; dan melakukan validasi terhadap kode-kode HTML, melakukan revisi atau update.
Okupasi ini termasuk salah satu dari 50 okupasi yang paling dibutuhkan dan dicari di Indonesia menurut laporan teknis dari Bank Dunia (World Bank).
Okupasi ini adalah okupasi dengan predikat high-skilled (berketerampilan tinggi) sehingga merupakan jalur karier yang sangat menguntungkan.
Menurut laporan teknis dari Bank Dunia (World Bank), 96% dari pemberi kerja merasa bahwa sertifikasi merupakan hal yang sangat berpengaruh dalam mencari karyawan untuk posisi okupasi berpredikat high-skilled (berketerampilan tinggi).
Kurikulum berbasis okupasi ini merupakan salah satu standar pelatihan yang menjadi fokus pemerintah sebagai pelatihan yang sertifikatnya diakui dan distandarkan ke tingkat global.
Pelatih berpengalaman dan bersertifikasi, cek informasi detail pelatih di sini.
Kelas ditujukan bagi pemula yang ingin mulai belajar bidang pemrograman agar dapat menjadi desainer website dengan mengacu pada standar okupasi Desainer Website (kode okupasi KBJI: 2166.10)
Kelas dapat diikuti oleh siswa yang melek IT sehingga wajib memiliki dan dapat mengoperasikan komputer dengan baik.
Syarat minimum pendidikan adalah SMA atau sederajat.
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 apapun materi kelas ini, tidak akan berguna tanpa keseriusan siswa untuk belajar, berlatih, dan mencoba.
Di akhir pelatihan, siswa mampu mendesain website menggunakan aplikasi Figma dan mengonversinya ke dalam bentuk file HTML menggunakan aplikasi Wordpress web page builder Elementor dan code editor secara tepat sesuai dengan desain yang telah dibuat.
Peserta mampu menganalisis kebutuhan bisnis untuk kemudian dituangkan ke dalam rancangan desain web menggunakan aplikasi Figma.
Peserta mampu mengonversi desain web yang telah dibuat di Figma ke dalam bentuk halaman web menggunakan aplikasi Wordpress web page builder Elementor.
Peserta mampu menambahkan efek animasi pada halaman website menggunakan fitur yang tersedia di Elementor.
Peserta mampu memvalidasi dan menambahkan kode HTML dan CSS yang dibutuhkan untuk menyempurnakan tampilan sesuai dengan desain yang telah dibuat.
Menganalisis kebutuhan bisnis : Belajar teori dan metodologi dalam menggali dan memahami kebutuhan bisnis serta menuangkan kebutuhan menjadi poin-poin antarmuka web. Implementasi keterampilan ke dalam studi kasus membuat menyusun daftar pertanyaan, wawancara dan mencatat kebutuhan bisnis. Belajar tips sikap kerja dalam menggali informasi seputar penawaran bisnis, layanan produk dan informasi yang harus ditampilkan untuk kebutuhan pembuatan website. (32 menit)
Menuangkan kebutuhan bisnis ke dalam rancangan desain web : Belajar teori antarmuka aplikasi Figma, teori komponen website, teori dasar user interface dan teori dasar user experience. Implementasi keterampilan ke dalam studi kasus membuat project baru di Figma, membuat komponen website di Figma dan manipulasi parameter komponen, membuat simulasi alur website di Figma dan menuangkan poin-poin spesifikasi bisnis hasil analisis ke dalam desain website. Belajar tips dan trik penggunaan shortcut di aplikasi Figma, mendapatkan gambar ilustrasi bagus dan legal untuk digunakan dan memainkan kombinasi warna dan spasi agar desain web nyaman dilihat. (277 menit)
Mengonversi desain web menjadi halaman web : Belajar teori antarmuka aplikasi Elementor. Implementasi keterampilan ke dalam studi kasus membuat halaman web berdasarkan desain yang telah dibuat pada aplikasi Figma. Belajar tips dan trik membangun halaman web lebih cepat dan tepat dengan desain. (152 menit)
Menambahkan efek animasi pada halaman web : Belajar teori animasi web dengan Javascript dan CSS. Implementasi keterampilan ke dalam menambahkan animasi pada komponen di halaman web.. Belajar tips dan sikap kerja dalam menambahkan animasi secukupnya yang cocok untuk memperindah tampilan web dan mempelajari contoh website dan template yang sudah memiliki animasi. (14 menit)
Menuliskan kode HTML dan CSS tambahan : Belajar teori dasar penggunaan code editor, teori dasar HTML dan teori dasar CSS. Implementasi keterampilan ke dalam studi kasus menambahkan kode HTML dan CSS pada bagian spesifik untuk tepat menyesuaikan halaman web dengan desain yang telah dibuat. Belajar tips sikap kerja dalam mempelajari HTML dan CSS yang mudah dan menyenangkan. (30 menit)
Peralatan Belajar
Spesifikasi minimal perangkat:
Prosesor
Intel Dual Core (Rekomendasi Core i3 ke atas)
Tools yang dibutuhkan untuk belajar:
Visual Studio Code
Cara instalasi dan menggunakan Visual Studio Code diajarkan di kelas ini
Lihat semua peralatan belajar
Lihat semua peralatan belajarKelas ini membutuhkan spesifikasi perangkat seperti berikut:
RAM
2GB (Rekomendasi 4GB)
Layar
1366 x 768 (Rekomendasi Full HD 1920 x 1080)
Sistem Operasi
Windows, Linux, MacOS
Prosesor
Intel Dual Core (Rekomendasi Core i3 ke atas)
Kelas ini membutuhkan beberapa tools berikut:
Visual Studio Code
Cara instalasi dan menggunakan Visual Studio Code diajarkan di kelas ini
Web Browser (Google Chrome atau Mozilla Firefox)
Laragon
Metode Ajar
Online - Self-paced Learning.
Total jam belajar : 08 jam 39 menit untuk materi. Total 10 jam 48Â menit jika termasuk persiapan belajar dan perkiraan waktu penyelesaian evaluasi pembelajaran.
Rekomendasi waktu belajar : 10 jam per minggu (selesai dalam 8 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.
Video : Setiap materi utama akan disajikan dalam bentuk video pengantar.
Sesi Konsultasi Online:Â Pada kelas ini disediakan sesi konsultasi online dengan instruktur agar siswa dapat tanya-jawab dan berkonsultasi mengenai ujian akhir yang wajib dikerjakan untuk lulus sepenuhnya dari kelas ini.
Forum diskusi : Setiap kelas memiliki sebuah forum diskusi yang dapat Anda gunakan untuk bertanya dan berdiskusi.
Pre-test : Tes yang diberikan sebelum pengajaran dimulai untuk mengetahui sampai dimana penguasaan siswa terhadap bahan pengajaran (pengetahuan dan keterampilan) yang akan diajarkan.
Evaluasi Pembelajaran :
Ujian Akhir Kelas
Sertifikat Kompetensi Kelulusan
Lihat semua metode ajar
Lihat semua metode ajarOnline - Self-paced Learning.
Total jam belajar : 08 jam 39 menit untuk materi. Total 10 jam 48Â menit jika termasuk persiapan belajar dan perkiraan waktu penyelesaian evaluasi pembelajaran.
Rekomendasi waktu belajar : 10 jam per minggu (selesai dalam 8 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.
Video : Setiap materi utama akan disajikan dalam bentuk video pengantar.
Sesi Konsultasi Online:Â Pada kelas ini disediakan sesi konsultasi online dengan instruktur agar siswa dapat tanya-jawab dan berkonsultasi mengenai ujian akhir yang wajib dikerjakan untuk lulus sepenuhnya dari kelas ini.
Forum diskusi : Setiap kelas memiliki sebuah forum diskusi yang dapat Anda gunakan untuk bertanya dan berdiskusi.
Pre-test : Tes yang diberikan sebelum pengajaran dimulai untuk mengetahui sampai dimana penguasaan siswa terhadap bahan pengajaran (pengetahuan dan keterampilan) yang akan diajarkan.
Evaluasi Pembelajaran :
Ujian Akhir Kelas
Sertifikat Kompetensi Kelulusan
Kontributor
1Curriculum Developer yang membangun kelas ini:
Yusuf Fazeri
Instructor at Codepolitan
Reviewer
1Code Reviewer yang akan me-review tugas dan kode Anda:
Yusuf Fazeri
Instructor at Codepolitan
Sering terlibat dalam pelatihan sebagai mentor untuk topik kelas pemrograman web di Codepolitan. Berdedikasi dalam membuat produk yang mudah untuk digunakan, cepat dikembangkan, mudah pemeliharaan dan menggunakan algoritma yang efektif.
Lihat semua kontributor dan reviewer
Lihat semua kontributor dan reviewerKontributor kelas
Curriculum Developer yang membangun kelas ini:
Yusuf Fazeri
Instructor at Codepolitan
Tim Reviewer
Code Reviewer yang akan me-review tugas dan kode Anda:
Yusuf Fazeri
Instructor at Codepolitan
Sering terlibat dalam pelatihan sebagai mentor untuk topik kelas pemrograman web di Codepolitan. Berdedikasi dalam membuat produk yang mudah untuk digunakan, cepat dikembangkan, mudah pemeliharaan dan menggunakan algoritma yang efektif.
Yusuf Fazeri
Instructor at Codepolitan
Sering terlibat dalam pelatihan sebagai mentor untuk topik kelas pemrograman web di Codepolitan. Berdedikasi dalam membuat produk yang mudah untuk digunakan, cepat dikembangkan, mudah pemeliharaan dan menggunakan algoritma yang efektif.
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.
5 Menit
1 Menit
3 Menit
10 Menit
Forum Diskusi
2 Menit
Sesi Konsultasi Online
3 Menit
Pre-test
30 Menit
Glosarium
10 Menit
Pengantar Mengidentifikasi Kebutuhan Website
2 Menit
Mengidentifikasi Kebutuhan Bisnis
6 Menit
Merancang Daftar Pertanyaan Wawancara untuk Menggali Kebutuhan Bisnis
10 Menit
Mengorganisasikan Kebutuhan Bisnis Menjadi Poin-Poin Spesifikasi Antarmuka Web
3 Menit
Melakukan Wawancara dan Merangkum ke dalam Bentuk Poin-Poin Spesifikasi Antarmuka Web
10 Menit
Mengenali Cara Menggali Informasi Bisnis untuk Kebutuhan Pembuatan Website
3 Menit
Rangkuman Mengidentifikasi Kebutuhan Website
2 Menit
Kuis Mengidentifikasi Kebutuhan Website
15 Menit
Pengantar Mengimplementasikan Kebutuhan Bisnis ke dalam Rancangan Desain Web
1 Menit
Mengenali Antarmuka Aplikasi Figma
6 Menit
Membuat Project Baru di Figma
4 Menit
Mempelajari Penggunaan Shortcut di Aplikasi Figma
6 Menit
Mempelajari Dasar-Dasar Website
5 Menit
Mempelajari Responsive Web Design
3 Menit
Mempelajari Komponen Website
4 Menit
Mempelajari Dasar User Interface
4 Menit
Membuat Komponen Website di Figma dan Manipulasi Parameter Komponen Part 1
10 Menit
Membuat Komponen Website di Figma dan Manipulasi Parameter Komponen Part 2
6 Menit
Mempelajari Cara Mendapatkan Gambar Ilustrasi yang Bagus dan Legal Digunakan
4 Menit
Mempelajari Kombinasi Warna dan Spasi Agar Desain Web Nyaman Dilihat
6 Menit
Mempelajari Dasar User Experience
4 Menit
Membuat Simulasi Alur Website di Figma
5 Menit
Mengimplementasikan Poin-Poin Spesifikasi Bisnis ke dalam Desain Web
1 Menit
Mempelajari Cara Instalasi Plugin Figma
6 Menit
Mengatur Grid Desain
7 Menit
Merancang Style Typography
10 Menit
Merancang Style Warna
8 Menit
Merancang Komponen Header & Footer Part 1
10 Menit
Merancang Komponen Header & Footer Part 2
5 Menit
Merancang Komponen Header & Footer Part 3
8 Menit
Merancang Komponen Jumbotron Part 1
8 Menit
Merancang Komponen Jumbotron Part 2
8 Menit
Merancang Komponen Segmen Title
6 Menit
Merancang Komponen Segmen Part 1
7 Menit
Merancang Komponen Segmen Part 2
7 Menit
Merancang Komponen Card Part 1
10 Menit
Merancang Komponen Card Part 2
6 Menit
Merancang Komponen Carousel
8 Menit
Merancang Komponen Button Slider
4 Menit
Merancang Komponen Testimoni
8 Menit
Merancang Page Home Part 1
7 Menit
Merancang Page Home Part 2
9 Menit
Merancang Page Home Part 3
9 Menit
Merancang Page Visi Misi
8 Menit
Merancang Page Galeri
6 Menit
Merancang Page Kerjasama
10 Menit
Merancang Page Program Studi
10 Menit
Merancang Page Lowongan Kerja
3 Menit
Merancang Page Lulusan Part 1
9 Menit
Merancang Page Lulusan Part 2
8 Menit
Merancang Page Blog
4 Menit
Merancang Prototype Design Part 1
10 Menit
Merancang Prototype Design Part 2
8 Menit
Mempelajari Cara Berpikir Kritis
0 Menit
Rangkuman Mengimplementasikan Kebutuhan Bisnis ke dalam Rancangan Desain Web
5 Menit
Kuis Mengimplementasikan Kebutuhan Bisnis ke dalam Rancangan Desain Web
15 Menit
Pengantar Membangun Desain Web Menjadi Halaman Web
4 Menit
Mempelajari Instalasi Laragon
8 Menit
Mempelajari Instalasi Wordpress
5 Menit
Mengenali Antarmuka Aplikasi Wordpress
6 Menit
Membuat Halaman Web Berdasarkan Desain yang Telah Dibuat
2 Menit
Mempelajari Instalasi Plugin Elementor
3 Menit
Mengatur Global Setting
9 Menit
Membuat Header Part 1
10 Menit
Membuat Header Part 2
5 Menit
Membuat Footer
10 Menit
Membuat Jumbotron dan Sambutan pada Page Home Part 1
6 Menit
Membuat Jumbotron dan Sambutan pada Page Home Part 2
7 Menit
Membuat Carousel pada Page Home Part 1
6 Menit
Membuat Carousel pada Page Home Part 2
10 Menit
Membuat Page Visi Misi
7 Menit
Membuat Page Galeri
5 Menit
Membuat Page Kerjasama Part 1
8 Menit
Membuat Page Kerjasama Part 2
5 Menit
Membuat Page Program Studi Part 1
9 Menit
Membuat Page Program Studi Part 2
6 Menit
Membuat Page Lowongan Kerja
4 Menit
Membuat Page Lulusan Part 1
8 Menit
Membuat Page Lulusan Part 2
5 Menit
Membuat Page Blog
4 Menit
Mempelajari Cara Memublikasi Website
9 Menit
Mempelajari Cara Membangun Halaman Web Lebih Cepat dan Tepat dengan Desain
4 Menit
Mengenali Kolaborasi dengan Tim
0 Menit
Rangkuman Membangun Desain Web Menjadi Halaman Web
3 Menit
Kuis Membangun Desain Web Menjadi Halaman Web
15 Menit
Pengantar Menambahkan Efek Animasi pada Halaman Web
2 Menit
Mempelajari Animasi Web dengan JS dan CSS
4 Menit
Menambahkan Animasi pada Komponen di Halaman Web
7 Menit
Mempelajari Cara Memilih Animasi yang Cocok untuk Memperindah Tampilan Halaman Web
3 Menit
Membuat Urutan Rencana Cadangan
0 Menit
Rangkuman Menambahkan Efek Animasi pada Halaman Web
2 Menit
Kuis Menambahkan Efek Animasi pada Halaman Web
15 Menit
Pengantar Menuliskan Kode HTML dan CSS Tambahan
3 Menit
Mempelajari Dasar-Dasar Penggunaan Code Editor
6 Menit
Mempelajari Dasar-Dasar HTML
3 Menit
Mempelajari Dasar-Dasar CSS
6 Menit
Menambahkan Kode HTML Dan CSS pada Bagian Spesifik untuk Tepat Menyesuaikan Halaman Web dengan Desain yang Telah Dibuat Part 1
8 Menit
Menambahkan Kode HTML Dan CSS pada Bagian Spesifik untuk Tepat Menyesuaikan Halaman Web dengan Desain yang Telah Dibuat Part 2
4 Menit
Mengenali Cara Mudah Belajar HTML Dan CSS
3 Menit
Rangkuman Menuliskan Kode HTML dan CSS Tambahan
2 Menit
Kuis Menuliskan Kode HTML dan CSS Tambahan
15 Menit
Rangkuman Kelas
25 Menit
Ujian Akhir
30 Menit