Membuat Web Company Profile Menggunakan HTML dan CSS

Pendahuluan

• Assalamualaikum warahmatullahi wabarakatuh
• Selamat datang di channel Jurfika Nurfikri
• Materi: Membuat web company profile dengan HTML dan CSS

Struktur Web

• Tampilannya terdiri dari:
  • Header
  • Banner
  • About
  • Service
  • Footer
• Menu navigasi:
  • About
  • Service
  • Contact

Menyiapkan Proyek

1. Membuat Folder
   • Buat folder baru dengan nama company profile
2. Buat File HTML
   • Simpan file sebagai index.html
3. Struktur HTML
   • Awali dengan tag html, tambahkan head dan title
   • Tambahkan tag meta untuk responsive design
   • Hubungkan dengan file CSS menggunakan tag link

Membuat Header

• Struktur header:
  • Logo
  • Menu
  • Link media sosial

Media Sosial

• Gunakan huruf untuk sementara waktu (F untuk Facebook, Y untuk Youtube, T untuk Twitter)
• Ganti dengan icon setelahnya menggunakan Font Awesome

Menu Navigasi

• Arahkan setiap menu ke halaman yang sesuai (index.html, about.html, service.html, contact.html)

Modifikasi CSS

1. Membuat File CSS
   • Buat folder CSS dan file style.css
2. Reset CSS
   • Atur padding dan margin menjadi 0
   • Set font family ke sans-serif
3. Modifikasi Komponen
   • Set warna dan posisi untuk media sosial
   • Buat tampilan horizontal untuk link media sosial dengan display: inline-block

Membuat Banner

• Tambahkan gambar sebagai background
• Buat teks "Welcome to my website" dan posisikan di tengah

Membuat Bagian About

• Menggunakan elemen <section> dengan kelas about
• Tambahkan judul dan deskripsi menggunakan <h3> dan <p>

Membuat Bagian Service

• Buat bagian service menggunakan <section> dengan kelas service
• Tambahkan 4 kolom untuk masing-masing service

Membuat Footer

• Gunakan elemen <footer> dengan copyright
• Atur padding dan warna font

Menambahkan Preloader

• Tambahkan elemen preloader sebelum konten tampil
• Gunakan jQuery untuk menyembunyikan preloader setelah halaman dimuat

Membuat Halaman Tambahan

• Halaman About, Service, dan Contact dibuat dengan cara yang sama
• Tambahkan elemen navigasi dan konten yang sesuai

Responsif Design

• Menggunakan media queries untuk mengatur tampilan di perangkat mobile
• Ubah posisi dan ukuran elemen agar sesuai dengan layar yang lebih kecil

Penutup

• Proyek ini mengajarkan dasar-dasar HTML dan CSS untuk membuat website sederhana

• Saran untuk mengembangkan lebih lanjut di rumah

• Pertanyaan bisa ditanyakan di kolom komentar

• Wassalamualaikum warahmatullahi wabarakatuh.