# Membuat Website Resume menggunakan vscode.dev _Betapa kerennya jika seorang perekrut meminta resume Anda dan Anda mengirimkan sebuah URL?_ 😎 ## Tujuan Setelah menyelesaikan tugas ini, Anda akan belajar bagaimana: - Membuat sebuah website untuk menampilkan resume Anda ### Prasyarat 1. Akun GitHub. Buka [GitHub](https://github.com/) dan buat akun jika Anda belum memilikinya. ## Langkah-langkah **Langkah 1:** Buat Repositori GitHub baru dan beri nama `my-resume` **Langkah 2:** Buat file `index.html` di repositori Anda. Kita akan menambahkan setidaknya satu file langsung di github.com karena Anda tidak dapat membuka repositori kosong di vscode.dev. Klik tautan `creating a new file`, ketik nama `index.html`, dan pilih tombol `Commit new file`. ![Membuat file baru di github.com](../../../../translated_images/new-file-github.com.c886796d800e8056561829a181be1382c5303da9d902d8b2dd82b68a4806e21f.id.png) **Langkah 3:** Buka [VSCode.dev](https://vscode.dev) dan pilih tombol `Open Remote Repository`. Salin URL repositori yang baru saja Anda buat untuk situs resume Anda dan tempelkan di kotak input: _Ganti `your-username` dengan nama pengguna GitHub Anda_ ``` https://github.com/your-username/my-resume ``` ✅ Jika berhasil, Anda akan melihat proyek Anda dan file index.html terbuka di editor teks di browser. ![Membuat file baru](../../../../translated_images/project-on-vscode.dev.e79815a9a95ee7feac72ebe5c941c91279716be37c575dbdbf2f43bea2c7d8b6.id.png) **Langkah 4:** Buka file `index.html`, tempelkan kode di bawah ini ke area kode Anda, dan simpan.
Kode HTML yang bertanggung jawab atas konten di situs resume Anda. Nama Anda di Sini!

TENTANG

Tulis deskripsi singkat tentang diri Anda!

PENGALAMAN KERJA

Judul Pekerjaan

Nama Organisasi | Bulan Mulai – Bulan Selesai

  • Tugas 1 - Tulis apa yang Anda lakukan!
  • Tugas 2 - Tulis apa yang Anda lakukan!
  • Tulis hasil/kontribusi dari pekerjaan Anda

Judul Pekerjaan 2

Nama Organisasi | Bulan Mulai – Bulan Selesai

  • Tugas 1 - Tulis apa yang Anda lakukan!
  • Tugas 2 - Tulis apa yang Anda lakukan!
  • Tulis hasil/kontribusi dari pekerjaan Anda
Ganti _teks placeholder_ pada kode HTML dengan detail resume Anda. **Langkah 5:** Arahkan kursor ke folder My-Resume, klik ikon `New File ...`, dan buat 2 file baru di proyek Anda: file `style.css` dan `codeswing.json`. **Langkah 6:** Buka file `style.css`, tempelkan kode di bawah ini, dan simpan.
Kode CSS untuk mengatur tata letak situs. body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 16px; max-width: 960px; margin: auto; } h1 { font-size: 3em; letter-spacing: .6em; padding-top: 1em; padding-bottom: 1em; } h2 { font-size: 1.5em; padding-bottom: 1em; } h3 { font-size: 1em; padding-bottom: 1em; } main { display: grid; grid-template-columns: 40% 60%; margin-top: 3em; } header { text-align: center; margin: auto 2em; } section { margin: auto 1em 4em 2em; } i { margin-right: .5em; } p { margin: .2em auto } hr { border: none; background-color: lightgray; height: 1px; } h1, h2, h3 { font-weight: 100; margin-bottom: 0; } #mainLeft { border-right: 1px solid lightgray; }
**Langkah 6:** Buka file `codeswing.json`, tempelkan kode di bawah ini, dan simpan. { "scripts": [], "styles": [] } **Langkah 7:** Instal ekstensi `Codeswing` untuk melihat pratinjau situs resume di area kode. Klik ikon _`Extensions`_ di bilah aktivitas dan ketik Codeswing. Klik tombol _install biru_ di bilah aktivitas yang diperluas untuk menginstal atau gunakan tombol install yang muncul di area kode setelah Anda memilih ekstensi untuk memuat informasi tambahan. Segera setelah menginstal ekstensi, perhatikan perubahan pada proyek Anda di area kode 😃. ![Instal ekstensi](../../../../8-code-editor/images/install-extension.gif) Inilah yang akan Anda lihat di layar setelah menginstal ekstensi. ![Ekstensi Codeswing dalam aksi](../../../../translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.id.png) Jika Anda puas dengan perubahan yang Anda buat, arahkan kursor ke folder `Changes` dan klik tombol `+` untuk menandai perubahan. Ketik pesan commit _(Deskripsi perubahan yang Anda buat pada proyek)_ dan commit perubahan Anda dengan mengklik `check`. Setelah selesai mengerjakan proyek Anda, pilih ikon menu hamburger di kiri atas untuk kembali ke repositori di GitHub. Selamat 🎉 Anda baru saja membuat situs resume menggunakan vscode.dev dalam beberapa langkah. ## 🚀 Tantangan Buka repositori jarak jauh yang Anda miliki izin untuk membuat perubahan dan perbarui beberapa file. Selanjutnya, coba buat cabang baru dengan perubahan Anda dan buat Pull Request. ## Tinjauan & Belajar Mandiri Baca lebih lanjut tentang [VSCode.dev](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) dan beberapa fitur lainnya. --- **Penafian**: Dokumen ini telah diterjemahkan menggunakan layanan penerjemahan AI [Co-op Translator](https://github.com/Azure/co-op-translator). Meskipun kami berusaha untuk memberikan hasil yang akurat, harap diingat bahwa terjemahan otomatis mungkin mengandung kesalahan atau ketidakakuratan. Dokumen asli dalam bahasa aslinya harus dianggap sebagai sumber yang otoritatif. Untuk informasi yang bersifat kritis, disarankan menggunakan jasa penerjemahan profesional oleh manusia. Kami tidak bertanggung jawab atas kesalahpahaman atau penafsiran yang keliru yang timbul dari penggunaan terjemahan ini.