โฮลา…โฮลา… ยินดีต้อนรับกลับมา!!
สมมติว่าคุณเป็นผู้เยี่ยมชมครั้งแรก ยินดีต้อนรับ! 🤩 ก่อนอื่นมาเริ่มกันด้วยการแนะนำบทความของวันนี้กันก่อน👇
ดังที่บางท่านอาจทราบ ฉันมุ่งเน้นไปที่การพัฒนา UI เมื่อสองสามสัปดาห์ก่อน และเริ่มทำสิ่งที่ท้าทายโดยใช้ HTMLและCSS จากนั้น ฉันได้ทำการท้าทายสี่ครั้ง โดยใช้ Flexbox ( Challenge 01, Challenge 02, Challenge 03 & Challenge 04) หลังจากนั้น ฉันได้ทำอีกสามความท้าทาย โดยใช้ CSS Grid( Challenge 05, Challenge 06 & Challenge 07 ) สุดท้ายแต่ไม่ท้ายสุด ความท้าทายสุดท้ายของเราเสร็จสิ้นโดยใช้ Flexbox และ CSS (Challenge 08 )
แม้ว่าเราจะผ่านความท้าทายหลายประการโดยใช้ CSS เพียงอย่างเดียว ฉันคิดว่าทำไมเราถึงหยุดอยู่แค่นั้น ในขณะที่เรากำลังเข้าสู่เซสชั่นถัดไป เราจะทำสิ่งที่เราเริ่มต้นต่อไปต่อไป ไม่ดีกว่าเหรอ??
สำหรับฉันและหวังว่าพวกคุณทุกคน ฉันได้ตัดสินใจที่จะทำความท้าทายเล็กๆ น้อยๆ หลายอย่างจาก Frontend Mentor โดยใช้ CSS ฉันเชื่ออย่างถ่องแท้ว่าทุกครั้งที่มีอย่างน้อยสิ่งหนึ่งที่เราต้องเรียนรู้
ด้วย Thaaaat…..มาเข้าสู่ Today’s Challenge ของเรากันดีกว่า
สำหรับการท้าทายในวันนี้ เราจะทำการท้าทายระดับเริ่มต้นจาก Front End Mentor 👉ความท้าทาย 009– องค์ประกอบรหัส QR.
เช่นเคย มาเริ่มต้นความท้าทายด้วยคำพูดสร้างแรงบันดาลใจ👇(นี่คือหนึ่งในคำพูดที่ช่วยให้ฉันก้าวต่อไป ฉันแบ่งปันสิ่งนี้กับคุณด้วยความหวังว่ามันจะช่วยคุณทุกคนเช่นกัน ในการก้าวไปข้างหน้า)
“ไม่ใช่การเคลื่อนไหวครั้งใหญ่ที่เปลี่ยนแปลงทุกสิ่ง แต่การเคลื่อนไหวที่เล็กที่สุดในชีวิตประจำวันของคุณต่างหากที่เปลี่ยนแปลง”
~เมล ร็อบบินส์~
ก่อนเริ่มต้น ฉันขอเน้นข้อความเล็กๆ น้อยๆ (เช่นเคย):-
สำหรับบางคน นี่อาจเป็นความท้าทายที่คุณสามารถทำได้โดยหลับตา สำหรับบางคน อาจเป็นความท้าทายที่คุณได้เรียนรู้สิ่งใหม่ๆ และสำหรับบางคน นี่อาจเป็นก้าวเริ่มต้นสำหรับ CSS Grid บทความนี้จึงเหมาะสำหรับทุกคนตั้งแต่มืออาชีพไปจนถึงมือใหม่ที่รักการเรียนรู้และฝึกฝนทักษะ🤓 ด้วยเหตุนี้…..
คุณพร้อมสำหรับความท้าทายแล้วหรือยัง? 💣
🔸 ชื่อภารกิจ:-
🔸 คำอธิบาย:-
ความท้าทายของคุณคือการสร้างแลนดิ้งเพจนี้จากการออกแบบที่ให้ไว้ในโค้ดเริ่มต้น ผู้ใช้ของคุณควรสามารถ:
- ดูเค้าโครงที่เหมาะสมที่สุดสำหรับเพจโดยขึ้นอยู่กับขนาดหน้าจอของอุปกรณ์
🔸 เครื่องมือ:-
HTML, CSS และฟิกม่า
ขั้นตอนที่ 01 — เริ่มต้นด้วยพิมพ์เขียว (HTML)🚀
ก่อนอื่น เราจะร่าง/พิมพ์เขียวของส่วนประกอบการ์ดโดยใช้ HTML หลังจากนั้น เราจะสร้างรูปลักษณ์และความรู้สึกของส่วนประกอบการ์ด QR ตามการออกแบบ
🔴 STEP 1.1 ➡ โครงสร้างพื้นฐานของ 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>
🔴 ขั้นตอนที่ 1.2 ➡ สร้างโครงสร้างหลักสำหรับส่วนประกอบการ์ด QR
<body>
<div class="main-container">
<!-- image section -->
<div class="image-container">
</div>
<!-- bottom content section -->
<div class="bottom-container">
</div>
</div>
</body>
🔴 STEP 1.3 ➡ สร้างโครงสร้างสำหรับแต่ละส่วน
ตอนนี้เราเสร็จสิ้นโครงสร้างพื้นฐานแล้ว ถึงเวลาที่เราจะเจาะลึกเข้าไปในแต่ละคอนเทนเนอร์และจัดวางเลย์เอาต์สำหรับแต่ละส่วนเพื่อการเริ่มต้นของเรา
01) จัดวางส่วนรูปภาพ
<div class="image-container">
<img src="./images/qr-code-icon.png" alt="qr image">
</div>
02) เค้าโครงส่วนเนื้อหาด้านล่าง
<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>
— — และด้วยเหตุนี้ เราก็ได้ทำพิมพ์เขียวเสร็จแล้ว ถึงเวลาที่เราจะตรวจสอบผลลัพธ์ของพิมพ์เขียวของเราแล้ว 👀👇 — —
— — อืม ฉันไม่ได้เป็นแฟนของสิ่งนี้ มันดูน่าเกลียด🤮 แต่แทนที่จะเสียเวลาไปกับการบ่น เรามาทำงานให้มันน่าสนใจกว่านี้กันดีกว่า — —
ขั้นตอนที่ 02— ถึงเวลาทำให้น่าสนใจยิ่งขึ้น (CSS)🚀
ที่นี่เราเริ่มสไตล์สำหรับมุมมองมือถือก่อน จากนั้นเราจะปรับสไตล์สำหรับหน้าจอที่ใหญ่ขึ้นโดยใช้คำสั่งสื่อ
🔴 ขั้นตอนที่ 2.1 ➡ ก่อนอื่นให้เราเริ่มต้นด้วยการเชื่อมโยงสไตล์ชีตภายนอกกับไฟล์ 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>
🔴ขั้นตอนที่ 2.2 ➡ นำเข้าแบบอักษรไปยังสไตล์ชีตภายนอก
อย่างที่คุณเห็นในการออกแบบ เราได้ใช้แบบอักษรที่เรียกว่า 'Poppins' ดังนั้นสิ่งที่เราทำได้ก่อนอื่นคือไปที่แบบอักษรของ Google ค้นหาแบบอักษร 'Poppins' คลิกที่น้ำหนักแบบอักษรที่เกี่ยวข้องที่เราต้องการ จากนั้นรับลิงก์นำเข้า
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
🔴ขั้นตอนที่ 2.3 ➡ ใช้ root: เพื่อประกาศสีที่เราใช้
:root {
--white: #ffffff;
--black: #000000;
--lightgrey: #B0B4B7;
--lightblue:#D5E1EF;
}
หากต้องการคำอธิบายโดยละเอียดเกี่ยวกับ :root โปรดดูที่ "Challenge No 002" ซึ่งฉันจะอธิบายให้คุณทราบถึงสาเหตุและสิ่งที่เราใช้ :root
🔴ขั้นตอนที่ 2.4 ➡ รวมสไตล์สำหรับตัวเลือกสากล
ตอนนี้ให้ฉันเริ่มด้วยบันทึกเล็กๆ น้อยๆ:- เนื่องจากฉันได้อธิบายให้คุณทราบโดยใช้ ตัวเลือกสากลในการท้าทายครั้งก่อนๆ (001, 002, 003, 004, 005,006) รวมทั้งใน บทความ CSS ฉันจะไม่อธิบายตัวเลือกสากล และเหตุผลที่เราใช้มันอีกครั้ง
* {
color:var(--black);
cursor: pointer;
font-family: 'Poppins', sans-serif;
font-size: 20px;
font-weight: 600;
margin: 0px;
margin-left: auto;
margin-right: auto;
}
🔴ขั้นตอนที่ 2.5 ➡ รวมสีพื้นหลังให้เต็มหน้า
อย่างที่คุณเห็นมีเอฟเฟกต์พื้นหลังสีฟ้าอ่อนสำหรับทั้งหน้า
body {
background-color: #D5E1EF;
}
🔴ขั้นตอนที่ 2.6 ➡ เรามาเข้าเรื่องการจัดสไตล์ทั้งหน้ากันดีกว่า
.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;
}
หมายเหตุ:- เราจะไม่ใช้การสืบค้นสื่อเนื่องจากไม่มีความแตกต่างเมื่อคุณปรับขนาดความกว้างของหน้าจอ➡ ความกว้างของการ์ดจะเท่ากันตลอดขนาดหน้าจอทั้งหมด
— — มาดูผลลัพธ์กันในมุมมองมือถือและเดสก์ท็อป💣 ทาดาเอ้า..🤩 — —
ความคิดสุดท้าย
เมื่อเราทำภารกิจท้าทายนี้เสร็จแล้ว ฉันจะจบบทความนี้ด้วยความหวังว่าคุณจะได้รับและเรียนรู้อะไรบางอย่าง ขอขอบคุณที่ตรวจสอบเรื่องนี้
ตอนนี้ถึงเวลาของคุณแล้วที่จะลองท้าทายนี้ เชื่อฉันเถอะว่าคุณจะต้องชอบกระบวนการนี้
หากคุณสนใจที่จะรับความรู้เพิ่มเติม ฝึกฝนทักษะของคุณ หรือต้องการสิ่งเตือนใจเล็กๆ น้อยๆ โปรดดูบทความต่อไปนี้👇🧠
ภาชนะแห่งความรู้ใน CSShttps://medium.com/@nknuranathunga/vessel-of-knowledge-in-grid-1272764725a2
การทำความเข้าใจ flexbox เพื่อทำให้ทุกอย่างเป็นเรื่องง่าย:- https://levelup.gitconnected.com/understand-flexbox-to-make-things-easy-adf90891ff25
เรียนรู้พื้นฐานของ CSS ภายในไม่กี่นาที:- https://bootcamp.uxdesign.cc/beginners-guide-to-css-9bc8298985c0
คู่มือ HTML สำหรับผู้เริ่มต้น:-https://uxplanet.org/beginners-guide-to-html-and-css-letss-start-off-with-html-3d7ffd035182
หากคุณชอบสิ่งนี้ ให้ปรบมือหนึ่งครั้งหรือมากกว่านั้น และอย่าลังเลที่จะแสดงความคิดเห็นและข้อเสนอแนะของคุณในส่วนความคิดเห็น
ขอขอบคุณที่เข้ามาดูเรื่องนี้ และอย่าลังเลที่จะเข้าไปดูบทความอื่นๆ ของฉันโดยคลิกลิงก์ต่อไปนี้ 👇
🔸ติดตามฉันบน Twitter 👀: @NathashaR97🔸
อ้างถึงลิงค์ต่อไปนี้สำหรับ Code Repository และ Figma File🧠👇
01) ที่เก็บโค้ด:-https://github.com/NathashaR97/QR-card-Component.git
02) ลิงค์โฮสติ้ง:-https://qr-card-component-snowy.vercel.app/
03) ลิงก์การท้าทาย:-https://www.frontendmentor.io/challenges/qr-code-component-iux_sIO_H
อย่าลังเลที่จะตรวจสอบความท้าทายก่อนหน้าในกริดและเฟล็กซ์บ็อกซ์ด้วย👇
กริดและเฟล็กซ์บ็อกซ์ ทั้งคู่ ➡
ความท้าทาย 008
ตาราง ➡
ความท้าทาย 005
ความท้าทาย 006
ความท้าทาย 007
คลิกที่การท้าทายเพื่อตรวจสอบการท้าทาย 01-04 ซึ่งเสร็จสิ้นโดยใช้ flexbox
ความท้าทาย 01 | ความท้าทาย 02 | ความท้าทาย 03 |ความท้าทาย 04
