https://github.com/al-kawsar/slicing-web-skaven
Proyek ini bertujuan untuk mereplikasi desain dari Figma ke dalam sebuah situs web fungsional menggunakan teknologi web dasar seperti HTML dan CSS. Desain 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: 3 months ago
JSON representation
Proyek ini bertujuan untuk mereplikasi desain dari Figma ke dalam sebuah situs web fungsional menggunakan teknologi web dasar seperti HTML dan CSS. Desain 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 2 years ago)
- Default Branch: main
- Last Pushed: 2024-12-16T07:17:31.000Z (6 months ago)
- Last Synced: 2025-01-05T11:46:06.340Z (5 months 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/web-skaven.git
```
2. **Masuk ke direktori proyek:**
```bash
cd 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
```
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/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! 😊