Karena saya ingin mengubah pola pikir Anda tentang CSS, saya akan memperkenalkan konsep yang dapat Anda terapkan untuk memudahkan desain antarmuka pengguna dan membuat halaman web Anda responsif, elegan, dan lebih menarik. Untuk mencapainya, kita akan mendesain halaman profil perusahaan yang responsif seperti yang ada di bawah ini. Anda juga dapat mengikuti tautan ini untuk melihat apa yang ingin kita capai.

Berikut adalah konsep/teknologi yang akan kita gunakan:

Flexbox

Flexbox adalah model tata letak CSS yang canggih untuk memudahkan pencapaian desain tata letak responsif dari elemen halaman yang akan ditampilkan pada berbagai ukuran layar

Google Fonts

Google Fonts adalah kumpulan font web desainer untuk membuat teks pada halaman web lebih mudah dibaca dan menarik bagi pembaca.

Ikon Font-awesome

Font-awesome adalah font web yang digunakan oleh desainer dan pengembang situs web untuk ikon. Font ini fleksibel, yaitu dapat diubah ukurannya dan warnanya dapat diubah

Memulai
Untuk memulai, Anda perlu memiliki pemahaman dasar tentang HTML dan CSS. Perhatikan bahwa untuk semua konsep di atas, tidak diperlukan pengunduhan atau penginstalan. Kita perlu membuat 2 file, yaitu file .html untuk konten halaman dan file .css untuk semua gaya kita.

Sangat penting untuk menguraikan struktur halaman dengan jelas sebelum masuk ke kode. Ini menghemat waktu Anda. Yang perlu diperhatikan pada tahap ini adalah halaman tersebut memiliki 5 bagian (header, tentang kami, nilai-nilai kami, misi, dan hubungi kami). 4 dari bagian ini memiliki lebar dan tinggi yang sama. Namun, warna latarnya berbeda.

Sebagai pengembang perangkat lunak berprinsip yang bersumpah untuk mematuhi standar kelas dunia, Anda perlu menjaga kode Anda tetap DRY. DRY adalah singkatan dari Do not Repeat Yourself (Jangan Ulangi Diri Anda Sendiri). 🚨🚨🚨🚨 Prinsip ini juga berlaku untuk penulisan CSS. 🤷‍ Hemat waktu dan sumber daya Anda 🤷‍♀
Menerapkan prinsip DRY

Tambahkan 5 bagian ke berkas HTML Anda. Berikut ini adalah beberapa cara berbeda untuk menerapkan prinsip DRY.

  • Tetapkan setiap div (bagian dalam kasus ini) kelas umum yang memiliki semua atribut umum
  • Tentukan atribut yang harus dimiliki setiap div/bagian anak dari badan.

https://medium.com/the-andela-way/a-responsive-webpage-using-flexbox-google-fonts-and-font-awesome-icons-dcaa1323bec2