Feat: materi 3 chapter 2 (css grid layout)

CONTRIBUTING.md

@@ -0,0 +1,62 @@
+# Contributing Guide
+
+Thank you for your interest in contributing to this repository for Hacktoberfest 2024! We appreciate all contributions, whether you're fixing bugs, adding features, or improving documentation. Please follow the guidelines below to ensure a smooth contribution process.
+
+## Setup Guide / Getting Started
+
+To get started with contributing:
+
+1. **Pick an Issue**: Browse through the [issues section](https://github.com/surabayadev/tutorial-css-lengkap/issues) and pick an issue you'd like to work on.
+2. Comment on the Issue: Let us know you're working on the issue by commenting on it. This helps avoid duplicate work and lets us know the issue is being addressed.
+3. Admin will assign the issue to you.
+4. **Fork the Repository**: Click on the fork button to create a copy of this repository in your GitHub account.
+5. **Clone Your Fork**: Clone your forked repository to your local machine:
+   ```bash
+   git clone https://github.com/your-username/your-repository.git
+   ```
+6. Install Dependencies: Install any necessary dependencies by running the following command:
+    ```bash
+    pnpm install
+    ```
+7. Create a Branch: When you're ready to start working, create a new branch based on main.
+
+
+## Branch Naming
+
+When creating a new branch for your work, follow this naming convention:
+
+```bash
+git checkout -b feat/materi1-chapter1
+```
+
+Where `feat/materi1-chapter1` indicates the feature you're working on. Replace with the specific task or issue you're addressing.
+
+## Commit Style
+
+All commits must follow the [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) format. This ensures a consistent commit history and makes it easier to track changes. The format is:
+
+```bash
+<type>(optional scope): <description>
+```
+
+Some common commit types:
+
+- `feat`: A new feature
+- `fix`: A bug fix
+- `docs`: Documentation changes
+- `style`: Code style changes (formatting, no code changes)
+- `refactor`: Refactoring code (neither fixes a bug nor adds a feature)
+
+## Submitting Pull Requests
+
+1. Once you have completed your changes, push your branch to your forked repository:
+   ```bash
+    git push origin your-branch-name
+    ```
+2. **Create a Pull Request**: Navigate to the original repository and create a pull request from your branch. Make sure to:
+   - Provide a clear description of the changes.
+   - Tag `@iniakunhuda` in the pull request for review.
+3. **Review Process**: Your pull request will be reviewed by `@iniakunhuda`. Once approved (LGTM), it will be merged into the main branch.
+
+
+Happy coding, and thank you for contributing!

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 SurabayaDev
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,6 +1,30 @@
-# TutorialKit Starter
+# Tutorial CSS Lengkap
 
-👋 Welcome to TutorialKit!
+SurabayaDev membuat kelas tutorial lengkap CSS untuk pemula hingga mahir dalam bahasa Indonesia. Tutorial ini akan membahas dasar-dasar CSS, layout dan positioning, responsivitas, animasi, hingga tips dan trik lanjutan dalam pengembangan web.
+
+![image.png](image.png)
+
+## Daftar Materi
+
+Daftar materi CSS selengkapnya dapat dilihat di [daftar materi](https://github.com/surabayadev/tutorial-css-lengkap/issues/1).
+
+Apabila ada materi yang ingin ditambahkan, silakan untuk membuat komentar di issue tersebut.
+
+## Kontribusi
+
+Kami mengundang siapa saja untuk berkontribusi dalam pengembangan tutorial ini. Silakan ikuti panduan kontribusi di [CONTRIBUTING.md](CONTRIBUTING.md).
+
+Repository ini juga terbuka untuk event Hacktoberfest 2024.
+
+## Lisensi
+
+Tutorial ini dilisensikan di bawah [Lisensi MIT](LICENSE).
+
+<br><br>
+
+# TutorialKit 
+
+We are using TutorialKit to create this tutorial.
 
 This README includes everything you need to start writing your tutorial content quickly.
 

package.json

@@ -13,7 +13,8 @@
   "dependencies": {
     "@tutorialkit/react": "1.1.0",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "sharp": "^0.33.5"
   },
   "devDependencies": {
     "@astrojs/check": "^0.7.0",

src/content/tutorial/3-layout-dan-transisi/2-css-grid-layout/1-pengantar/_files/assets/css/style.css

@@ -0,0 +1,14 @@
+.grid-container {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 10px;
+  padding: 10px;
+  background-color: #f0f0f0;
+}
+
+.grid-item {
+  background-color: #4caf50;
+  color: white;
+  padding: 20px;
+  text-align: center;
+}

src/content/tutorial/3-layout-dan-transisi/2-css-grid-layout/1-pengantar/_files/index.html

@@ -0,0 +1,24 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Tutorial Grid Layout</title>
+    <link rel="stylesheet" href="assets/css/style.css" />
+  </head>
+  <body>
+    <h1>Contoh penggunaan Grid Layout</h1>
+    <p>
+      Grid akan secara otomatis membagi layout menjadi beberapa kolom dan baris.
+      Apabila terdapat elemen yang tidak cukup untuk mengisi sebuah baris, maka
+      elemen tersebut akan berpindah ke baris selanjutnya secara otomatis.
+    </p>
+
+    <div class="grid-container">
+      <div class="grid-item">1</div>
+      <div class="grid-item">2</div>
+      <div class="grid-item">3</div>
+      <div class="grid-item">4</div>
+    </div>
+  </body>
+</html>

src/content/tutorial/3-layout-dan-transisi/2-css-grid-layout/1-pengantar/_solution/assets/css/style.css

@@ -0,0 +1,14 @@
+.grid-container {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 10px;
+  padding: 10px;
+  background-color: #f0f0f0;
+}
+
+.grid-item {
+  background-color: #4caf50;
+  color: white;
+  padding: 20px;
+  text-align: center;
+}

src/content/tutorial/3-layout-dan-transisi/2-css-grid-layout/1-pengantar/_solution/index.html

@@ -0,0 +1,27 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Tutorial Grid Layout</title>
+    <link rel="stylesheet" href="assets/css/style.css" />
+  </head>
+  <body>
+    <h1>Contoh penggunaan Grid Layout</h1>
+    <p>
+      Grid akan secara otomatis membagi layout menjadi beberapa kolom dan baris.
+      Apabila terdapat elemen yang tidak cukup untuk mengisi sebuah baris, maka
+      elemen tersebut akan berpindah ke baris selanjutnya secara otomatis.
+    </p>
+
+    <div class="grid-container">
+      <div class="grid-item">1</div>
+      <div class="grid-item">2</div>
+      <div class="grid-item">3</div>
+      <div class="grid-item">4</div>
+      <div class="grid-item">5</div>
+      <div class="grid-item">6</div>
+      <div class="grid-item">7</div>
+    </div>
+  </body>
+</html>

src/content/tutorial/3-layout-dan-transisi/2-css-grid-layout/1-pengantar/content.md

@@ -0,0 +1,42 @@
+---
+type: lesson
+title: Pengantar CSS Grid
+focus: /index.html
+---
+
+## Apa itu CSS Grid?
+
+CSS Grid adalah sistem layout dua dimensi yang didesain untuk memungkinkan kita membuat layout kompleks dengan lebih mudah dan konsisten. Dengan Grid, kita dapat mengatur elemen dalam baris (row) dan kolom (column) sekaligus. Grid biasanya memiliki kolom, baris, dan gap di antara setiap baris dan kolom. Gap tersebut umumnya disebut juga sebagai gutters.
+
+## Perbedaan Grid dengan Flexbox
+
+#### CSS Grid
+
+- Layout dua dimensi (baris dan kolom)
+- Cocok untuk layout skala besar
+- Mengatur layout dari container ke item
+- Lebih baik untuk layout keseluruhan halaman
+
+#### Flexbox
+
+- Layout satu dimensi (baris ATAU kolom)
+- Cocok untuk komponen kecil
+- Mengatur layout dari item ke container
+- Lebih baik untuk pengaturan konten dalam komponen
+
+#### Kapan Menggunakan Masing-masing?
+
+**Gunakan Grid ketika:**
+
+- Membuat layout halaman utama
+- Memerlukan kontrol presisi dalam dua dimensi
+- Membuat sistem grid kompleks
+
+**Gunakan Flexbox ketika:**
+
+- Mengatur elemen dalam satu baris/kolom
+- Mengatur spacing konten dalam komponen
+
+## Tantangan
+
+1. Tambahkan 3 grid item ke dalam container untuk melihat bagaimana Grid bekerja.

src/content/tutorial/3-layout-dan-transisi/2-css-grid-layout/2-properti-dasar-grid/_files/assets/css/style.css

@@ -0,0 +1,42 @@
+.sidebar {
+  grid-area: sidebar;
+  background-color: #3498db;
+}
+
+.header {
+  grid-area: header;
+  background-color: #f1c40f;
+}
+
+.sidebar {
+  grid-area: sidebar;
+  background-color: #3498db;
+}
+
+.main {
+  grid-area: main;
+  background-color: #2ecc71;
+}
+
+.footer {
+  grid-area: footer;
+  background-color: #e74c3c;
+}
+
+.grid-container {
+  display: grid;
+  height: 250px;
+  grid-template-areas:
+    "header header header"
+    "sidebar main main"
+    "footer footer .";
+  padding: 10px;
+  background-color: #f0f0f0;
+}
+
+.grid-item {
+  background-color: #4caf50;
+  color: white;
+  padding: 20px;
+  text-align: center;
+}

src/content/tutorial/3-layout-dan-transisi/2-css-grid-layout/2-properti-dasar-grid/_files/index.html

@@ -0,0 +1,21 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Tutorial Grid Layout</title>
+    <link rel="stylesheet" href="assets/css/style.css" />
+  </head>
+  <body>
+    <h1>Properti Dasar Grid</h1>
+    <p>
+      Grid Layout memiliki beberapa properti yang bisa digunakan untuk mengatur
+      tata letak elemen-elemen di dalam grid. Baca dan pahami properti-properti
+      ini di bagian kiri.
+    </p>
+
+    <div class="grid-container">
+      <div class="header">header</div>
+    </div>
+  </body>
+</html>