Pembuatan Website ORICORE Menggunakan HTML & CSS Dasar

Sebagai bagian dari tugas akhir Bootcamp Web Development Dasar, para peserta diminta membangun sebuah website statis sederhana menggunakan HTML dasar dan CSS dasar. Studi kasus yang digunakan adalah ORICORE, sebuah konsep perusahaan teknologi fiktif yang memiliki berbagai layanan cloud, keamanan digital, hingga platform hiburan daring.

Tugas ini bertujuan melatih peserta untuk memahami pondasi pembuatan website—bagaimana menyusun struktur halaman dengan HTML serta memperindah tampilan menggunakan CSS.

1. Navigasi & Struktur Dasar (HTML Dasar)

Peserta membangun struktur utama website dengan komponen fundamental HTML, seperti:

• Menu Navigasi:

  • HOME
  • TENTANG KAMI
  • LAYANAN
  • KONTAK

• Hero Section / Halaman Utama:

  Menampilkan tulisan:

  “Selamat Datang di — Empowering the Digital World”

Dengan memanfaatkan elemen seperti <h1>, <p>peserta mempelajari bagaimana membentuk kerangka halaman yang terorganisir dan responsif secara sederhana.

2. Desain Tampilan (CSS Dasar)

Setelah struktur terbentuk, peserta menerapkan CSS dasar untuk:

• Mengatur layout dan posisi elemen
• Memberi warna identitas ORICORE
• Mengatur tipografi (heading, paragraf, spacing)
• Membuat tampilan navigasi yang rapi
• Memberikan sentuhan modern menggunakan flexbox dasar

Dengan CSS dasar, peserta berhasil menciptakan tampilan bersih, minimalis, dan profesional yang mencerminkan karakter perusahaan teknologi.

3. Halaman “Tentang Kami”

Pada section ini, peserta menuliskan penjelasan tentang Apa Itu ORICORE?, dengan konsep sebagai berikut:

Oricore hadir sebagai inti dari inovasi digital, berfokus pada pengembangan software dan layanan digital terpadu seperti antivirus, cloud storage, cloud server, media sosial, cloud gaming, hingga platform edukasi digital.

Dengan moto “Innovation Begins at the Core”, peserta menampilkan paragraf yang menggambarkan filosofi, misi perusahaan, serta bagaimana Oricore membangun ekosistem digital yang aman, terhubung, dan bermanfaat bagi manusia.

Halaman ini melatih peserta membuat layout paragraf panjang dengan HTML dasar dan mengatur keterbacaan menggunakan CSS.

4. Halaman “Layanan Kami”

Peserta membuat daftar layanan Oricore dalam bentuk card sederhana, meliputi:

• CLAIRCLOUD – Penyimpanan Cloud
• SILKSERVER – Cloud Server
• ANGELANTIVIRUS – Antivirus
• CROSSCONNECT – Media Sosial
• PORTALPLAY – Cloud Gaming

Setiap layanan ditampilkan menggunakan elemen HTML seperti <div> lalu dihias menggunakan CSS dasar agar tampil rapi, simetris, dan konsisten.

5. Halaman “Kontak”

Pada halaman kontak, peserta menampilkan struktur informasi yang memuat daftar tim eksekutif ORICORE:

Peserta mempraktikkan pembuatan layout grid sederhana menggunakan flexbox, styling foto profil, serta penyusunan teks secara proporsional.

6. Hasil yang Dicapai Peserta

Melalui tugas ini, peserta berhasil:

• Membangun website lengkap dari nol
• Menggunakan HTML dasar untuk struktur
• Menggunakan CSS dasar untuk estetika
• Membuat 4 halaman utama: Home, Tentang Kami, Layanan, Kontak
• Menghasilkan website statis yang menyerupai profil perusahaan teknologi profesional

Walaupun masih tahap dasar, karya ini menjadi pondasi penting sebelum peserta melanjutkan ke materi lanjutan seperti JavaScript, responsive design, dan framework CSS modern.

Tugas ini menunjukkan bahwa dengan pemahaman HTML dasar dan CSS dasar, peserta sudah mampu membangun website company profile sederhana namun memiliki struktur profesional. ORICORE menjadi contoh ideal untuk melatih kemampuan peserta dalam menyusun konten, mengatur tampilan, dan memahami alur pembuatan web dari awal.