Challenge 1: Single Grid Component

 


Demo: https://nadiajamhari.github.io/Grid-component/

Solusi untuk semua cabaran daripada frontend mentor io: Frontend Mentor | nadiajamhari's profile

Pengenalan

Inspirasi daripada menonton youtube seoarang developer luar negara menyatakan “sekiranya ingin jadi front - end developer, buat lah sekecil - kecil coding dari design yang kita nampak / atau meniru sahaja website yang sedia ada”. [Maafkan saya, saya tidak menyimpan link youtube tersebut]

Maka, hasil pencarian saya terjumpa satu posting: https://dev.to/frontendmentor/16-front-end-projects-with-designs-to-help-improve-your-coding-skills-5ajl yang memberi tahu apa project yang boleh bantu untuk improve coding skills.

Maka pada tarikh 29/07/2022 untuk membuat cabaran dalam website tersebut. Baik sekian mukadimah sebagai cabaran 1.

Apa yang saya gunakan dalam cabaran ini?

Saya hanya menggunakan HTML dan CSS sahaja untuk menghasilkan cabaran ini.

Platform untuk deploy adalah menggunakan github.io

Apa yang saya belajar dalam cabaran ini ?

Saya belajar mengenai “display:flex”;

Selama ini cabaran untuk center kan element pada tengah - tengah page adalah susah. Namun dengan pengatahuan “display:flex”. centerkan element bukan lah sesuatu yang susah. Kerja yang dahulu saya akan buat berjam - jam. Kini saya boleh buat selama 30 minit.

.container {
display: flex;
align-items: center;
justify-content:center;
}

//kita juga sebenarya ada beberapa flex-direction, untuk menentukan arah flex
flex-direction: row
flex-direction:row-reverse;
flex-direction: column;
flex-direction:column-reverse;

Untuk animasi dan kefahaman lebih mendalam boleh ke laman :

flex-direction - CSS: Cascading Style Sheets | MDN

Perkongisian

Sebelum saya memulakan cabaran ini, saya telah menonton youtube yang dibuat oleh Afrie Irham

Link: Jom belajar HTML & CSS | Survey Form #FreeCodeCamp - YouTube

melalui tontonan video ini, saya mulai sedar. Salah satu cara untuk kita tahu “element-element” dalam css adalah dengan menonton video seperti ini. Dari video ini saya belajar mengenai display:flex. Saya rasa sekiranya saya tidak menonton video ini, mungkin bukan hari tersebut saya mengetahui menegenai display:flex.


Catat Ulasan

4 Ulasan

  1. Terima kasih berkongsi. Secara tak lansung saya juga belajar tentang display : flex; selain guna html lama align center tu. Hanya letak display flex je dah boleh selesaikan masalah besar. Hebat hebat. Saya pun hampir lupa coding html ni.

    BalasPadam
  2. hebat hebat!!! sy tgk yg coding biasa2 tu je dah pening hehehe

    BalasPadam
  3. sy nak tanya sikit boleh? tentang widget top commentator. sy dah pasang tp tu laa... list tu tak keluar. apa silapnya ya? boleh bantu sy?

    BalasPadam
  4. lamanya tinggalkan dunia coding.. kalau dulu setiap sem kena hadap coding

    BalasPadam

Segala komen-komen yang telah disiarkan adalah tanggungjawab sepenuhnya ke atas penulis itu sendiri. Pemilik blog tidak akan bertanggungjawab jika berlaku sebarang permasalahan berkaitan dengan komen yang disiarkan. Mana-mana komen yang berbentuk iklan, mengandungi link/url, mengandungi kata-kata yang tidak menyenangkan tidak akan disiarkan. Harap Maklum.

Sekian Terima kasih.