Pertemuan #3 – Front-End Sintech 2025

🎨 Recap Pertemuan Ke-3 SINTECH – Role Front-End

📅 Kamis, 1 Mei 2025
🕒 15:30 – 17:00 WIB (100 menit)
🏫 Lokasi: Ruangan ISDB 4.4

Halo Front-End Warriors!
Setelah sebelumnya kita belajar HTML, akhirnya hari yang ditunggu-tunggu datang juga—yaitu pertemuan perdana kita membahas CSS (Cascading Style Sheets). Karena, apa artinya struktur kalau tampilannya belum cantik? 😄

Pada pertemuan ke-3 ini, peserta belajar bagaimana cara mempercantik tampilan halaman web mereka melalui berbagai teknik dasar CSS. Dan seperti biasa, bukan hanya teori—kita langsung praktik bareng!

🧠 Materi Pertemuan 3: Dasar CSS

Topik Utama: Styling & Layouting Web Page
Berikut adalah poin-poin yang dipelajari:

🔹 Selector & Styling:
Mulai dari selector dasar seperti class dan id, hingga penggunaan kombinasi selector.

🔹 Formatting & Typography:
Mengatur ukuran, jenis font, line height, letter spacing, dan text alignment.

🔹 Pewarnaan & Opacity:
Mengatur warna teks, latar belakang, serta efek transparansi untuk elemen.

🔹 Box Model & Layouting:
Memahami padding, border, margin, dan bagaimana mereka bekerja dalam sebuah layout.

🔹 Positioning & Floating:
Menempatkan elemen di posisi tertentu secara presisi menggunakan relative, absolute, fixed, hingga float.

🔹 Responsive Design & Media Queries:
Dasar responsivitas agar halaman tetap nyaman dibuka di berbagai ukuran layar.

Materi dijelaskan secara step-by-step dengan contoh real-time, dan peserta langsung mengikuti di laptop masing-masing.

💻 Latihan: Styling Halaman Profil

Setelah pembahasan materi, peserta langsung diberi latihan:
Menambahkan CSS pada halaman profil HTML yang dibuat di pertemuan sebelumnya.

Targetnya:
✅ Mengatur warna dan font agar lebih konsisten
✅ Membuat layout yang rapi dan proporsional
✅ Menambahkan elemen desain agar lebih menarik dilihat

Banyak peserta langsung eksplor dan mulai menambahkan animasi kecil-kecilan juga. Kreatif banget!

📝 Tugas: Buat Halaman Landing Page

Setelah latihan, peserta diberi tantangan baru:

📌 Tugas: Membuat halaman landing page

• Menggunakan kombinasi HTML & CSS

• Wajib menerapkan konsep box model dan responsive layout

• Desain bebas, bisa bertema produk, portfolio, atau brand fiktif

📤 Deadline: Disampaikan di grup masing-masing
📁 Pengumpulan: File project HTML & CSS dalam folder yang ditentukan

🔥 Suasana Kelas

Ruangan ISDB 4.4 hari itu penuh semangat. Beberapa peserta awalnya bingung dengan box model, tapi setelah mentor kasih analogi "bungkus kado," langsung pada paham! Ada juga yang share hasil desainnya di layar untuk didiskusikan bareng. Seru dan saling support banget.

💬 Catatan Mentor

"Ingat, desain bukan soal ramai warna, tapi bagaimana setiap elemen punya fungsi dan saling mendukung."
"Latihan bikin landing page bukan buat ‘keren-kerenan’, tapi biar kamu siap bangun project nyata nanti."

🎯 Apa yang Dipelajari?

✅ Cara mendesain halaman web agar menarik dan enak dilihat
✅ Memahami struktur box model dan layout CSS
✅ Memulai desain responsif agar tampilan tetap rapi di semua layar
✅ Menyusun style yang bersih dan reusable

Sampai jumpa di pertemuan selanjutnya, kita bakal bahas Flexbox & Grid Layout — dua tools powerful untuk layout modern di dunia Front-End Development!

📷 Jangan lupa upload tugas landing page kamu ya, dan cek IG kita untuk dokumentasi keseruan kelas hari ini!
👉 @sintech_uinws

#Sintech2025 #CSSDasar #FrontEndSquad #BelajarStyling #HMJTIUINWS #WebDesign