Nama : Nadya Zuhria Amana
.png)
1. `<title>`: Ini adalah elemen yang mendefinisikan judul halaman web yang akan ditampilkan di tab peramban.
2. `<meta name="viewport">`: Elemen ini mengatur tampilan responsif halaman web pada perangkat dengan berbagai lebar layar.
3. `<style>`: Elemen ini adalah bagian dari HTML yang memuat kode CSS yang digunakan untuk mengatur tampilan halaman web.
4. `<div class="container">`: Ini adalah kontainer utama yang mengelilingi konten halaman web. Max-width ditetapkan ke 1200px, dan konten akan berada di tengah halaman karena `margin: auto`.
5. `<h1>` dan `<h3>`: Ini adalah elemen heading untuk judul dan deskripsi halaman.
6. `<hr>`: Ini adalah elemen horizontal line yang digunakan untuk memisahkan judul dari konten portofolio.
7. `<h2>`: Ini adalah elemen heading yang digunakan untuk judul bagian "Portfolio".
8. `<div class="row">`: Ini adalah div yang digunakan untuk mengelompokkan konten portofolio dalam baris.
9. `<div class="column">`: Ini adalah div yang digunakan untuk mengelompokkan setiap item portofolio.
10. `<div class="content">`: Ini adalah div yang mengelilingi konten setiap item portofolio, termasuk gambar dan deskripsi.
11. `<img>`: Ini adalah elemen gambar yang menampilkan gambar tutorial.
12. `<h3>`: Ini adalah elemen heading yang menampilkan judul tutorial.
13. `<a>`: Ini adalah elemen anchor (tautan) yang mengarahkan ke tutorial terkait.
14. `<p>`: Ini adalah elemen paragraf yang digunakan untuk menampilkan deskripsi tutorial.
1. Kode CSS mulai dengan mereset tampilan elemen-elemen HTML dengan `*` dan mendefinisikan padding untuk seluruh body.
2. CSS kemudian mendefinisikan gaya untuk elemen-elemen seperti `.container`, `h1`, `a`, `p`, `.row`, `.column`, `.content`, dll.
3. Terdapat juga aturan media query yang mengubah lebar kolom `.column` ketika lebar layar mencapai 850px dan 400px.
4. CSS ini mengatur gaya tampilan elemen-elemen tersebut seperti warna teks, gaya font, tata letak, dan responsifitasnya.
NRP : 5025211058
kELAS: PWEB A
LATIHAN 3 (Membuat Portofolio Gallerry using HTML and CSS)
.png)
Video Tutorial :
Bagian HTML:
2. `<meta name="viewport">`: Elemen ini mengatur tampilan responsif halaman web pada perangkat dengan berbagai lebar layar.
3. `<style>`: Elemen ini adalah bagian dari HTML yang memuat kode CSS yang digunakan untuk mengatur tampilan halaman web.
4. `<div class="container">`: Ini adalah kontainer utama yang mengelilingi konten halaman web. Max-width ditetapkan ke 1200px, dan konten akan berada di tengah halaman karena `margin: auto`.
5. `<h1>` dan `<h3>`: Ini adalah elemen heading untuk judul dan deskripsi halaman.
6. `<hr>`: Ini adalah elemen horizontal line yang digunakan untuk memisahkan judul dari konten portofolio.
7. `<h2>`: Ini adalah elemen heading yang digunakan untuk judul bagian "Portfolio".
8. `<div class="row">`: Ini adalah div yang digunakan untuk mengelompokkan konten portofolio dalam baris.
9. `<div class="column">`: Ini adalah div yang digunakan untuk mengelompokkan setiap item portofolio.
10. `<div class="content">`: Ini adalah div yang mengelilingi konten setiap item portofolio, termasuk gambar dan deskripsi.
11. `<img>`: Ini adalah elemen gambar yang menampilkan gambar tutorial.
12. `<h3>`: Ini adalah elemen heading yang menampilkan judul tutorial.
13. `<a>`: Ini adalah elemen anchor (tautan) yang mengarahkan ke tutorial terkait.
14. `<p>`: Ini adalah elemen paragraf yang digunakan untuk menampilkan deskripsi tutorial.
Bagian CSS:
2. CSS kemudian mendefinisikan gaya untuk elemen-elemen seperti `.container`, `h1`, `a`, `p`, `.row`, `.column`, `.content`, dll.
3. Terdapat juga aturan media query yang mengubah lebar kolom `.column` ketika lebar layar mencapai 850px dan 400px.
4. CSS ini mengatur gaya tampilan elemen-elemen tersebut seperti warna teks, gaya font, tata letak, dan responsifitasnya.