PERTEMUAN 2 (5/09/2023)
Nama : Nadya Zuhria Amana
NRP : 5025211058
Kelas : PWEB A
Membuat CV (Curriculum Vitae) dengan HTML dan CSS adalah cara yang baik untuk menampilkan informasi pribadi dan pengalaman kerja Anda secara kreatif dan profesional. Berikut adalah langkah-langkah umum untuk membuat CV menggunakan HTML dan CSS:
1. Persiapan Awal:
- Pastikan sudah memiliki teks CV yang telah disusun sebelumnya.
2. Buat Dokumen HTML:
- Mulailah dengan membuat dokumen HTML dasar. Anda dapat menggunakan teks editor seperti Notepad, Visual Studio Code, atau lainnya.
- Struktur dasar HTML biasanya terdiri dari elemen-elemen seperti `<html>`, `<head>`, dan `<body>`.
- Buat sebuah `<div>` sebagai wadah utama untuk CVnya.
Untuk code HTML nya bisa dilihat di link berikut:
3. Menggunakan CSS:
- Buat file terpisah untuk gaya CSSnya, misalnya "style.css". File ini akan digunakan untuk mengatur tampilan CV.
Untuk code CSS nya bisa dilihat di link berikut:
4. Tambahkan Konten CV:
- Sekarang, Anda dapat menambahkan konten CV Anda ke dalam wadah utama HTML. Gunakan elemen-elemen HTML seperti `<h1>`, `<p>`, dan `<ul>` untuk menampilkan informasi Anda.
```html
<div class="cv-section">
<h1>Informasi Pribadi</h1>
<p>Nama: Nadya Zuhria</p>
<p>Alamat: Jalan Contoh No. 123</p>
<!-- Tambahkan informasi pribadi Anda yang lain di sini -->
</div>
<div class="cv-section">
<h1>Pengalaman Kerja</h1>
<p>Perusahaan A - UI/UX Designer (2018-2020)</p>
<ul>
<li>Proyek A</li>
<li>Proyek B</li>
</ul>
<!-- Tambahkan pengalaman kerja Anda yang lain di sini -->
</div>
```
5. Tinjau dan Uji:
- Buka file HTML di browser untuk melihat tampilan CVnya. Jika perlu, dapat disesuaikan gaya CSS untuk mencapai tampilan yang diinginkan.
6. Publikasikan CV:
- Setelah selesai, Anda dapat mengunggah CV Anda ke situs web.
MANFAAT MEMILIKI CV ONLINE
1. Dapat Diakses Secara Online
2. Tampilan yang Menarik
3. Kreativitas
4. Kemampuan untuk Menampilkan Portofolio
5. Kemampuan Berbagi Lebih Banyak Informasi
6. Interaktivitas
7. Peningkatan Visibilitas Online
8. Profesionalitas
9. Kemudahan Pembaruan
10. Pengukuran Kinerja
11. Mudah untuk Dibagikan
Untuk hasil dari HTML saya sebagai berikut :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css"> <!-- Menghubungkan file CSS -->
<title>Nadya Zuhria's Portfolio</title>
</head>
<body>
<!-- Header Section -->
<header>
<h1>Nadya Zuhria</h1>
<p>UI/UX Designer</p>
</header>
<!-- Profile Summary Section -->
<section class="profile-summary">
<h2>Profile Summary</h2>
<p>
I am Nadya Zuhria, a Sepuluh Nopember Institute of Technology student from the Department of Informatics Engineering in 2021. I am a person who has high leadership, easy to adapt, and likes to learn new things. Now, I am interested in technology and currently studying UI/UX design. I also stand out in creativity and can provide unique ideas in my designs.
</p>
</section>
<!-- Skills Section -->
<section class="skills">
<h2>Skill Set</h2>
<ul>
<li>Honesty and Responsibility</li>
<li>Leadership and Team Work</li>
<li>Public Speaking and Organization</li>
<li>Critical Thinker</li>
<li>Problem Solving</li>
</ul>
</section>
<!-- Education Section -->
<section class="education">
<h2>Education</h2>
<div class="education-item">
<h3>Sepuluh Nopember Institute of Technology</h3>
<p>Surabaya city, East Java</p>
<p>Informatics Engineering</p>
<p>2021 - present</p>
</div>
<!-- Tambahkan pendidikan lainnya jika diperlukan -->
</section>
<!-- Experience Section -->
<section class="experience">
<h2>Experience</h2>
<div class="experience-item">
<h3>UI/UX Design Intern - ITS Website Team</h3>
<p>Collecting and evaluating user needs</p>
<p>Illustrate product design ideas through process flow</p>
<p>Designing user interface elements such as graphics</p>
<p>Jan, 2023 - present</p>
</div>
<div class="experience-item">
<h3>Expert Staff of Design - Schematics ITS</h3>
<p>Convey information about a product in an interesting way</p>
<p>Make designs that are communicative and easy to understand</p>
<p>Create illustrations, drawings and designs to reflect the theme</p>
<p>Dec 2022 - present</p>
</div>
<!-- Tambahkan pengalaman kerja lainnya jika diperlukan -->
</section>
<!-- Mindset Section -->
<section class="mindset">
<h2>Mindset</h2>
<ul>
<li>Problem Solver: I approach challenges with a problem-solving mindset, seeking creative solutions.</li>
<li>Adaptability: I thrive in dynamic environments and am quick to adapt to new technologies and trends.</li>
<li>Continuous Learner: I have a strong desire for continuous learning, keeping up with industry developments.</li>
<li>Team Player: I believe in collaboration and excel in team settings, valuing diverse perspectives.</li>
</ul>
</section>
<!-- Toolset Section -->
<section class="toolset">
<h2>Toolset</h2>
<ul>
<li>Operational Microsoft Office</li>
<li>Editing videos and pictures</li>
<li>Photography</li>
<li>Basic Programming (C, C++, HTML, CSS, and Python)</li>
<li>Figma</li>
<li>Wordpress</li>
<li>Adobe Illustrator</li>
</ul>
</section>
</body>
</html>
Untuk hasil dari CSS saya sebagai berikut :
/* Reset CSS */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Styling header */
header {
text-align: center;
background-color: #333;
color: #fff;
padding: 20px;
}
header h1 {
font-size: 24px;
}
/* Styling sections */
section {
margin: 20px;
padding: 10px;
border: 1px solid #ccc;
}
h2 {
font-size: 20px;
}
ul {
list-style-type: none;
margin-left: 20px;
}
li {
margin-bottom: 10px;
}
