https://github.com/al-kawsar/slicing-web-skaven
Mereplikasi desain dari Figma ke web menggunakan HTML dan CSS. Ini dibuat untuk mengikuti lomba desain grafis yang diselenggarakan di SMKN 7 Makassar.
https://github.com/al-kawsar/slicing-web-skaven
css figma-to-code html learn-slicing slicing-design-to-code
Last synced: 11 months ago
JSON representation
Mereplikasi desain dari Figma ke web menggunakan HTML dan CSS. Ini dibuat untuk mengikuti lomba desain grafis yang diselenggarakan di SMKN 7 Makassar.
- Host: GitHub
- URL: https://github.com/al-kawsar/slicing-web-skaven
- Owner: al-kawsar
- Created: 2023-06-11T08:59:03.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2025-05-11T05:36:38.000Z (about 1 year ago)
- Last Synced: 2025-05-11T06:27:59.078Z (about 1 year ago)
- Topics: css, figma-to-code, html, learn-slicing, slicing-design-to-code
- Language: HTML
- Homepage:
- Size: 1.33 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Slicing Web SMKN 7 Makassar
Proyek ini merupakan implementasi slicing web dari desain Figma ke dalam bentuk situs web statis menggunakan teknologi web dasar. Desain awal dibuat untuk lomba desain grafis di **SMKN 7 Makassar**, yang diselenggarakan oleh **Pak Fajar Shiddiq**, guru desain grafis. Proyek ini bertujuan untuk mempraktikkan kemampuan mengonversi desain grafis menjadi kode web.
---
## 🎯 Deskripsi Proyek
Proyek ini mereplikasi desain grafis dari Figma ke dalam sebuah situs web yang fungsional. Dengan menggunakan **HTML** dan **CSS**, desain yang awalnya hanya visual kini diubah menjadi website nyata, menjaga konsistensi antara desain dan implementasi.
---
## 🛠️ Teknologi yang Digunakan
Proyek ini menggunakan teknologi berikut:
- **HTML**: Untuk struktur halaman.
- **CSS**: Untuk styling dan tata letak visual.
---
## 🚀 Cara Menjalankan Proyek
Ikuti langkah-langkah berikut untuk menjalankan proyek ini di komputer Anda:
1. **Clone repository ke perangkat lokal:**
```bash
git clone https://github.com/al-kawsar/slicing-web-skaven.git
```
2. **Masuk ke direktori proyek:**
```bash
cd slicing-web-skaven
```
3. **Buka file utama menggunakan browser favorit Anda:**
- Klik kanan pada file `index.html` dan pilih opsi "Open with browser".
- Alternatif: Gunakan ekstensi live server di Visual Studio Code untuk pengalaman pengembangan yang lebih cepat.
---
## 📂 Struktur Proyek
```
slicing-web-skaven/
├── index.html # Halaman utama
```
---
## 📸 Pratinjau
Berikut adalah tampilan desain Figma yang diimplementasikan:
**[Tambahkan tangkapan layar atau link ke desain Figma jika memungkinkan]**
---
## ✍️ Kontributor
Proyek ini dikembangkan oleh:
- **Andi Muh Raihan Alkawsar**
---
## 🌐 Tautan Terkait
- [Lihat Repository di GitHub](https://github.com/al-kawsar/slicing-web-skaven)
- [Pelajari lebih lanjut tentang SMKN 7 Makassar](https://smkn7makassar.sch.id)
---
## 📌 Catatan Tambahan
Proyek ini bersifat sederhana dan dirancang untuk keperluan pembelajaran serta pengembangan keterampilan slicing web. Jika Anda memiliki saran atau masukan, jangan ragu untuk menghubungi saya. 😊
---
README ini dirancang untuk meningkatkan profesionalisme dan daya tarik proyek Anda. Silakan modifikasi bagian **Pratinjau** jika ingin menambahkan tangkapan layar atau referensi lainnya! 😊