Pada tutorial ini, kita akan mencoba membuat project web kecil-kecilan. Tujuannya untuk berlatih dan memahami bagaimana cara membuat web
Baik
Langsung saja kita mulai
Langkah 1 – Membuat Desain Web
Pembuatan web dimulai dengan desain. Kalau tidak ada desain, nanti kita akan kesulitan dan tidak tahu mau buat apa
Biasanya desain web dikerjakan oleh desainer, setelah diserahkan ke programmer untuk diubah menjadi HTML
Pada project ini, kita akan membuat tiga halaman web, yakni home, contact, dan about. Desain yang digunakan adalah desain dalam bentuk wireframe atau sketsa
Berikut ini desain untuk tiap-tiap halaman
1. Desain Halaman Rumah
Halaman home adalah halaman utama yang akan dibuka pertama kali saat pengunjung membuka website. Halaman ini berisi menu, foto, teks, dan tabel
2. Desain Halaman Kontak
Halaman contact adalah halaman yang berisi form untuk menghubungi pemilik website
3. Desain Halaman Tentang
Halaman about adalah halaman yang berisi informasi lengkap tentang website
Langkah 2 – Memulai Proyek Web
Silahkan buat folder baru dengan nama websiteku
Setelah itu buat folder image dan video di dalam folder websiteku. Folder ________23______ akan kita gunakan untuk menyimpan gambar dan video untuk menyimpan video
Sehingga nanti struktur folder kita akan menjadi seperti ini
- 📁
image- 🖼️
1Ahmad Muhardian Personal Website Home | Download CV | Contact | About me About Me Hi, saya adalah web developer yang berdomisisli di Jakarta. Saat ini sedang belajar HTML di Petnai Kode. Saya memang masih baru dalam web development, karena itu saya tidak akan pernah berhenti belajar. Saya ingin menguasai bahasa HTML, CSS, dan Javascript. Simak video lengkap tentang saya. Copyright © 2020 Ahmad Muhardian.
- 🖼️
- 📁
video- 🎞
3Ahmad Muhardian Personal Website Home | Download CV | Contact | About me About Me Hi, saya adalah web developer yang berdomisisli di Jakarta. Saat ini sedang belajar HTML di Petnai Kode. Saya memang masih baru dalam web development, karena itu saya tidak akan pernah berhenti belajar. Saya ingin menguasai bahasa HTML, CSS, dan Javascript. Simak video lengkap tentang saya. Copyright © 2020 Ahmad Muhardian.
- 🎞
- 📄
4Ahmad Muhardian Personal Website Home | Download CV | Contact | About me About Me Hi, saya adalah web developer yang berdomisisli di Jakarta. Saat ini sedang belajar HTML di Petnai Kode. Saya memang masih baru dalam web development, karena itu saya tidak akan pernah berhenti belajar. Saya ingin menguasai bahasa HTML, CSS, dan Javascript. Simak video lengkap tentang saya. Copyright © 2020 Ahmad Muhardian. - 📜
5Ahmad Muhardian Personal Website Home | Download CV | Contact | About me About Me Hi, saya adalah web developer yang berdomisisli di Jakarta. Saat ini sedang belajar HTML di Petnai Kode. Saya memang masih baru dalam web development, karena itu saya tidak akan pernah berhenti belajar. Saya ingin menguasai bahasa HTML, CSS, dan Javascript. Simak video lengkap tentang saya. Copyright © 2020 Ahmad Muhardian. - 📜
6Ahmad Muhardian Personal Website Home | Download CV | Contact | About me About Me Hi, saya adalah web developer yang berdomisisli di Jakarta. Saat ini sedang belajar HTML di Petnai Kode. Saya memang masih baru dalam web development, karena itu saya tidak akan pernah berhenti belajar. Saya ingin menguasai bahasa HTML, CSS, dan Javascript. Simak video lengkap tentang saya. Copyright © 2020 Ahmad Muhardian. - 📜
_7Ahmad Muhardian Personal Website Home | Download CV | Contact | About me About Me Hi, saya adalah web developer yang berdomisisli di Jakarta. Saat ini sedang belajar HTML di Petnai Kode. Saya memang masih baru dalam web development, karena itu saya tidak akan pernah berhenti belajar. Saya ingin menguasai bahasa HTML, CSS, dan Javascript. Simak video lengkap tentang saya. Copyright © 2020 Ahmad Muhardian. - 🖼️
8Ahmad Muhardian Personal Website Home | Download CV | Contact | About me About Me Hi, saya adalah web developer yang berdomisisli di Jakarta. Saat ini sedang belajar HTML di Petnai Kode. Saya memang masih baru dalam web development, karena itu saya tidak akan pernah berhenti belajar. Saya ingin menguasai bahasa HTML, CSS, dan Javascript. Simak video lengkap tentang saya. Copyright © 2020 Ahmad Muhardian.
File yang perlu kamu selesaikan dalam tahapan ini adalah
Ahmad Muhardian Personal Website
Home |
Download CV |
Contact |
About me
About Me
Hi, saya adalah web developer yang berdomisisli di Jakarta.
Saat ini sedang belajar HTML di Petnai Kode.
Saya memang masih baru dalam web development, karena itu
saya tidak akan pernah berhenti belajar.
Saya ingin menguasai bahasa HTML, CSS, dan Javascript.
Simak video lengkap tentang saya.
Copyright © 2020 Ahmad Muhardian.
Ahmad Muhardian Personal Website
Home |
Download CV |
Contact |
About me
About Me
Hi, saya adalah web developer yang berdomisisli di Jakarta.
Saat ini sedang belajar HTML di Petnai Kode.
Saya memang masih baru dalam web development, karena itu
saya tidak akan pernah berhenti belajar.
Saya ingin menguasai bahasa HTML, CSS, dan Javascript.
Simak video lengkap tentang saya.
Copyright © 2020 Ahmad Muhardian.
Selanjutnya, kita akan mulai menulis kode. Silahkan buka folder websiteku dengan Visual Studio Code
Caranya
Klik menu File, lalu pilih Open Folder dan carilah folder websiteku
Degan begini, kita sudah siap untuk menulis kode
Langkah 3 – Membuat Halaman Rumah
Silahkan buat file baru bernama
Ahmad Muhardian Personal Website
Home |
Download CV |
Contact |
About me
About Me
Hi, saya adalah web developer yang berdomisisli di Jakarta.
Saat ini sedang belajar HTML di Petnai Kode.
Saya memang masih baru dalam web development, karena itu
saya tidak akan pernah berhenti belajar.
Saya ingin menguasai bahasa HTML, CSS, dan Javascript.
Simak video lengkap tentang saya.
Copyright © 2020 Ahmad Muhardian.
Setelah itu, isi dengan kode berikut
Ahmad Muhardian Personal Website
Home |
Download CV |
Contact |
About me
Ahmad Muhardian
[Web Developer]
Overview
Hi, saya adalah web developer yang berdomisisli di Jakarta.
Saat ini sedang belajar HTML di Petnai Kode
Skill
Pengalaman
HTML [Expert]
CSS [Beginner]
Javascript [Beginner]
Freelancer di Internet
Leaeder Local Linux Community
Leaeder Local Linux Community
Copyright © 2020 Ahmad Muhardian.
Jangan lupa untuk mengubah nama
Ahmad Muhardian Personal Website
Home |
Download CV |
Contact |
About me
Contact Me
Email
Pesan
Copyright © 2020 Ahmad Muhardian.
Jika kita coba membuka file
Ahmad Muhardian Personal Website
Home |
Download CV |
Contact |
About me
About Me
Hi, saya adalah web developer yang berdomisisli di Jakarta.
Saat ini sedang belajar HTML di Petnai Kode.
Saya memang masih baru dalam web development, karena itu
saya tidak akan pernah berhenti belajar.
Saya ingin menguasai bahasa HTML, CSS, dan Javascript.
Simak video lengkap tentang saya.
Copyright © 2020 Ahmad Muhardian.
Gambarnya tidak bisa tampil karena kita belum menambahkan file gambar di dalam folder image
Silahkan tambahkan file gambar dengan nama
Ahmad Muhardian Personal Website
Home |
Download CV |
Contact |
About me
About Me
Hi, saya adalah web developer yang berdomisisli di Jakarta.
Saat ini sedang belajar HTML di Petnai Kode.
Saya memang masih baru dalam web development, karena itu
saya tidak akan pernah berhenti belajar.
Saya ingin menguasai bahasa HTML, CSS, dan Javascript.
Simak video lengkap tentang saya.
Copyright © 2020 Ahmad Muhardian.
Unduh file gambar. ⬇️ foto-profil. jpg
Setelah itu, coba refresh halaman home atau
Ahmad Muhardian Personal Website
Home |
Download CV |
Contact |
About me
About Me
Hi, saya adalah web developer yang berdomisisli di Jakarta.
Saat ini sedang belajar HTML di Petnai Kode.
Saya memang masih baru dalam web development, karena itu
saya tidak akan pernah berhenti belajar.
Saya ingin menguasai bahasa HTML, CSS, dan Javascript.
Simak video lengkap tentang saya.
Copyright © 2020 Ahmad Muhardian.
Maka hasilnya
Langkah 4 – Membuat Halaman Tentang Saya
Buatlah file HTML baru dengan nama
Ahmad Muhardian Personal Website
Home |
Download CV |
Contact |
About me
About Me
Hi, saya adalah web developer yang berdomisisli di Jakarta.
Saat ini sedang belajar HTML di Petnai Kode.
Saya memang masih baru dalam web development, karena itu
saya tidak akan pernah berhenti belajar.
Saya ingin menguasai bahasa HTML, CSS, dan Javascript.
Simak video lengkap tentang saya.
Copyright © 2020 Ahmad Muhardian.
Kemudian isi dengan kode berikut
Ahmad Muhardian Personal Website
Home |
Download CV |
Contact |
About me
About Me
Hi, saya adalah web developer yang berdomisisli di Jakarta.
Saat ini sedang belajar HTML di Petnai Kode.
Saya memang masih baru dalam web development, karena itu
saya tidak akan pernah berhenti belajar.
Saya ingin menguasai bahasa HTML, CSS, dan Javascript.
Simak video lengkap tentang saya.
Copyright © 2020 Ahmad Muhardian.
Sama seperti halaman home, halaman ini juga memiliki konten berupa video untuk ditampilkan. Tapi file videonya belum ada
Sudah pasti videonya tidak akan bisa ditampilkan
Karena itu, silahkan tambahkan file video-nya ke dalam folder video dengan nama
Jika kamu belum punya filenya, silahkan download di link ini
⬇️ video-tentang. webm
Setelah itu, coba buka dan segarkan halaman tentang
Maka hasilnya
Langkah 5 – Membuat Kontak Halaman
Buatlah file baru dengan nama
Ahmad Muhardian Personal Website
Home |
Download CV |
Contact |
About me
About Me
Hi, saya adalah web developer yang berdomisisli di Jakarta.
Saat ini sedang belajar HTML di Petnai Kode.
Saya memang masih baru dalam web development, karena itu
saya tidak akan pernah berhenti belajar.
Saya ingin menguasai bahasa HTML, CSS, dan Javascript.
Simak video lengkap tentang saya.
Copyright © 2020 Ahmad Muhardian.
Kemudian isi dengan kode berikut
Ahmad Muhardian Personal Website
Home |
Download CV |
Contact |
About me
Contact Me
Email
Pesan
Copyright © 2020 Ahmad Muhardian.
Hasilnya
Form contact ini belum bisa berfungsi, karena kita belum membuat kode untuk mengirim data
Langkah 6 – Membuat Fitur Download CV
Fitur ini sebenarnya paling mudah dibuat. Kita hanya perlu menambahkan file
Unduh berkas. ⬇️ cv-dian. pdf
Setelah itu, coba klik menu Download CV. Jika PDF-nya terbuka, maka link ini sudah benar
Langkah 7 – Membuat Ikon untuk Web
Agar websitenya terlihat menarik, kita akan membuat ikon atau favicon. Silahkan buka favicon-generator. orgkemudian pilih gambar yang akan dijadikan ikon
Setelah itu, kita akan mendapatkan link download dan juga kode HTML yang harus ditambahkan ke dalam tag