Hola…Halo… Selamat Datang Kembali!!
Misalkan Anda adalah pengunjung pertama kali. Selamat datang! 🤩 Pertama dan terpenting, mari kita mulai dengan perkenalan kecil pada artikel hari ini.👇
Seperti yang mungkin diketahui sebagian dari Anda, saya beralih ke pengembangan UI beberapa minggu yang lalu dan mulai melakukan tantangan menggunakan HTMLdanCSS. Kemudian saya telah menyelesaikan empat tantangan menggunakan Flexbox ( Tantangan 01, Tantangan 02, Tantangan 03 & Tantangan 04). Setelah itu, saya menyelesaikan tiga tantangan lainnya menggunakan CSS Grid( Challenge 05, Challenge 06 & Challenge 07 ). Yang terakhir, tantangan terakhir kami diselesaikan menggunakan Flexbox dan CSS (Challenge 08 ).
Meskipun kami telah menyelesaikan beberapa tantangan menggunakan CSS murni, saya berpikir mengapa kami berhenti di situ, sementara kami melanjutkan ke sesi berikutnya kami akan terus melakukan apa yang telah kami mulai. Bukankah lebih baik??
Bagi saya dan semoga Anda semua, saya telah memutuskan untuk melakukan beberapa Tantangan kecil dari Frontend Mentor menggunakan CSS. Saya sangat yakin bahwa setiap saat setidaknya ada satu hal yang perlu kita pelajari.
Dengan Thaaaat…..Mari kita ikuti Tantangan Hari Ini.
Adapun tantangan hari ini, kami akan melakukan tantangan pemula dari Front End Mentor. 👉Tantangan 009– Komponen Kode QR.
Seperti biasa, mari kita mulai tantangan ini dengan kutipan motivasi.👇(Ini adalah salah satu kutipan yang membantu saya untuk terus bergerak, saya membagikan ini kepada Anda dengan harapan dapat membantu Anda semua untuk terus maju. untuk bergerak maju)
“bukanlah tindakan besar yang mengubah segalanya — namun tindakan terkecil dalam kehidupan sehari-hari Andalah yang mengubah segalanya.”
~Mel Robbins~
Sebelum memulai, izinkan saya menyoroti catatan kecil (seperti biasa):-
Bagi sebagian dari Anda, ini mungkin merupakan tantangan yang dapat Anda lakukan dengan mata tertutup, bagi sebagian dari Anda ini mungkin merupakan tantangan bagi Anda untuk mempelajari hal baru dan bagi sebagian dari Anda ini mungkin merupakan langkah pemula untuk CSS Grid. Jadi artikel ini diperuntukkan bagi siapa saja, mulai dari pro hingga pemula yang suka belajar dan mengasah keterampilannya.🤓 Dengan itu…..
APAKAH ANDA SIAP UNTUK TANTANGAN??💣
🔸 Nama Tantangan: -
🔸 Deskripsi: -
Tantangan Anda adalah membuat halaman arahan ini dari desain yang disediakan di kode awal. Pengguna Anda harus dapat:
- Lihat tata letak halaman yang optimal bergantung pada ukuran layar perangkat mereka
🔸 Alat: -
HTML, CSS & Figma
LANGKAH 01 — Mulailah Dengan cetak biru (HTML)🚀
Pertama dan terpenting, kita akan membuat sketsa/blueprint komponen kartu menggunakan HTML. Setelahnya, kita akan membuat tampilan dan nuansa Komponen Kartu QR sesuai Desain.
🔴 LANGKAH 1.1 ➡ Struktur dasar HTML
<!DOCTYPE html>
<html lang="en">
<!-- Head Section-->
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title> QR Card Component</title>
</head>
<!-- Body Section-->
<body>
</body>
</html>
🔴 LANGKAH 1.2 ➡ Buat struktur utama untuk Komponen Kartu QR
<body>
<div class="main-container">
<!-- image section -->
<div class="image-container">
</div>
<!-- bottom content section -->
<div class="bottom-container">
</div>
</div>
</body>
🔴 LANGKAH 1.3 ➡ Buat struktur untuk setiap bagian
Sekarang kita sudah selesai dengan struktur dasarnya. Sudah waktunya bagi kita untuk menggali lebih dalam setiap wadah dan melakukan tata letak untuk setiap bagian untuk permulaan kita.
01) Tata Letak Bagian Gambar
<div class="image-container">
<img src="./images/qr-code-icon.png" alt="qr image">
</div>
02) Tata Letak Bagian Konten Bawah
<div class="bottom-container"> <h1> Improve your front-end skills by building projects </h1> <p> Scan the QR code to visit Frontend Mentor and take your coding skills to the next level </p> </div>
— — Dan dengan itu, kita telah selesai dengan cetak birunya. Saatnya kita memeriksa keluaran cetak biru kita.👀👇 — —
— — HMMM, saya bukan penggemar ini. Kelihatannya jelek.🤮 Tapi daripada membuang-buang waktu untuk mengeluh, sebaiknya kita mulai bekerja dan membuatnya lebih menarik — —
LANGKAH 02— Saatnya membuatnya lebih menarik (CSS)🚀
Di sini Kami memulai penataan gaya untuk tampilan seluler terlebih dahulu, lalu kami akan menyesuaikan gaya untuk layar yang lebih besar menggunakan kueri media.
🔴 Langkah 2.1 ➡ Pertama dan terpenting mari kita mulai dengan Menautkan Lembar Gaya Eksternal ke file HTML
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial scale=1.0"> <link rel="stylesheet" href="styles.css"> <title> QR Card Component </title> </head>
🔴Langkah 2.2 ➡ Impor font ke style sheet eksternal
Jadi seperti yang Anda lihat di Desain kami telah menggunakan font yang disebut 'Poppins'. Oleh karena itu, hal pertama yang dapat kita lakukan adalah, buka font Google, cari font 'Poppins', klik bobot font relevan yang kami perlukan, lalu dapatkan link impor.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
🔴Langkah 2.3 ➡ Gunakan root: untuk mendeklarasikan warna yang kita gunakan
:root {
--white: #ffffff;
--black: #000000;
--lightgrey: #B0B4B7;
--lightblue:#D5E1EF;
}
Untuk penjelasan menyeluruh tentang :root, lihatlah Tantangan No 002, di mana saya menjelaskan secara deskriptif mengapa dan apa yang kami gunakan :root.
🔴Langkah 2.4 ➡ Sertakan Styling untuk Universal Selector
Sekarang izinkan saya memulai dengan catatan kecil🔊:- Karena saya telah memandu Anda secara deskriptif melalui pemilih universal dalam tantangan sebelumnya (001>, <002>, <003>, 004,> 005.006) serta di Artikel CSS, saya tidak akan menjelaskan pemilih universal, dan mengapa kami menggunakannya lagi.
* {
color:var(--black);
cursor: pointer;
font-family: 'Poppins', sans-serif;
font-size: 20px;
font-weight: 600;
margin: 0px;
margin-left: auto;
margin-right: auto;
}
🔴Langkah 2.5 ➡ Sertakan warna latar belakang untuk satu halaman penuh
Seperti yang Anda lihat, ada efek latar belakang warna biru muda untuk satu halaman penuh
body {
background-color: #D5E1EF;
}
🔴Langkah 2.6 ➡ Mari kita mulai menata seluruh halaman
.main-container {
background-color: var(--white);
border-radius: 24px;
box-shadow: 0px 10px 22px rgba(0, 0, 0, 0.25);
width:320px;
padding: 16px 16px 40px 16px;
margin-top: 100px;
}
.image-container img {
border-radius: 24px;
width:100%;
height:auto;
}
.bottom-container {
text-align: center;
}
.bottom-container h1 {
font-size: 21px;
width:260px;
padding-top: 20px;
padding-bottom: 16px;
}
.bottom-container p {
color: var(--lightgrey);
font-size: 12px;
font-weight: 500;
line-height: 18px;
padding-left: 60px;
padding-right: 60px;
}
Catatan:- Kami tidak akan menggunakan kueri media karena tidak ada perbedaan saat Anda menyesuaikan ukuran lebar layar.➡ Lebar kartu sama di semua ukuran layar
— — MARI LIHAT HASILNYA DI TAMPILAN MOBILE & DESKTOP💣. TADAAA..🤩 — —
Pemikiran Terakhir
Seperti yang telah kita selesaikan dengan tantangan ini, saya akan mengakhiri artikel ini dengan harapan Anda telah memperoleh dan mempelajari sesuatu. Terima kasih telah memeriksanya.
Sekarang waktu Anda telah tiba untuk mencoba tantangan ini. Percayalah, Anda akan menyukai prosesnya.
Jika Anda tertarik untuk menambah pengetahuan, mengasah keahlian, atau membutuhkan sedikit pengingat, lihat artikel berikut.👇🧠
Bejana Pengetahuan dalam CSShttps://medium.com/@nknuranathunga/vessel-of-knowledge-in-grid-1272764725a2
Memahami flexbox untuk mempermudah:- https://levelup.gitconnected.com/understanding-flexbox-to-make-things-easy-adf90891ff25
Pelajari dasar-dasar CSS dalam beberapa menit:- https://bootcamp.uxdesign.cc/beginners-guide-to-css-9bc8298985c0
Panduan pemula tentang HTML:-https://uxplanet.org/beginners-guide-to-html-and-css-letss-start-off-with-html-3d7ffd035182
Jika Anda menyukai ini, berikan satu atau lebih tepuk tangan dan jangan ragu untuk meninggalkan pemikiran dan masukan Anda di bagian komentar.
Terima kasih telah membaca ini dan jangan ragu untuk membaca artikel saya yang lain dengan mengeklik tautan berikut 👇
🔸Ikuti saya di Twitter👀: @NathashaR97🔸
Lihat tautan berikut untuk Repositori Kode dan File Figma🧠👇
01) Repositori Kode:-https://github.com/NathashaR97/QR-card-Component.git
02) Tautan Hosting:-https://qr-card-component-snowy.vercel.app/
03) Tautan Tantangan:-https://www.frontendmentor.io/challenges/qr-code-component-iux_sIO_H
Jangan ragu untuk memeriksa Tantangan sebelumnya di grid dan flexbox juga👇
Grid & Flexbox Keduanya ➡
Tantangan 008
Kotak ➡
Tantangan 005
Tantangan 006
Tantangan 007
Klik tantangan untuk memeriksa Tantangan 01-04, yang diselesaikan menggunakan flexbox
"Tantangan 01" | Tantangan 02 | Tantangan 03 |Tantangan 04
