พิชิต Certificate x FreeCodeCamp EP.1
สวัสดีครับหลังจากที่บทความก่อนหน้านี้พาไปสมัครเว็บไซต์ FreeCodeCamp ในวันนี้จะมาเรียนกันต่อจากบทความที่แล้วนะครับ
ถ้าหากใครยังไม่เคยสมัครสามารถเข้าไปอ่านที่บทความนี้นะครับ https://www.blockdit.com/posts/6199ff3266462f0ca2c07ba5
วันนี้มาเริ่มกันต่อเลยนะครับ โดยการเข้าไปที่ https://www.freecodecamp.org/
จากนั้นเลือกไปที่หัวข้อ Responsive Web Design แล้วเลือกไปที่หัวข้อที่เราจะเรียนต่อคือ
ภาพจาก https://www.freecodecamp.org/
Headline with the h2 Element
ภาพจาก https://www.freecodecamp.org/
โดยระบบบอกเราว่า ในบทเรียนถัด ๆ ไป เราจะสร้างเว็บรูปภาพแมว โดยองค์ประกอบของเว็บจะมีแท็ก h2 ด้วย ซึ่งแท็ก h1 มักใช้สำหรับหัวข้อหลัก h2 สำหรับหัวข้อย่อย และมี h3,h4,h5,h6 เพื่อระบุระดับของหัวข้อย่อย แตกต่างกันไป
ระบบบอกว่าเพิ่ม h2 ที่ระบุ “CatPhotoApp” เพื่อสร้างองค์ประกอบที่ 2 ภายใต้ h1 ที่ระบุ “Hello world”
จากนั้นเลื่อนลงมาด้านล่างจะเป็นสิ่งที่เราต้องทำเพื่อผ่านการทดสอบ โดยมีดังนี้
ภาพจาก https://www.freecodecamp.org/
- สร้างองค์ประกอบ h2
- ควรมีแท็กปิดที่ h2
- ในองค์ประกอบ h2 ควรมีคำว่า CatPhotoApp
- ในองค์ประกอบ h1 ควรมีคำว่า Hello world
- องค์ประกอบ h1 ควรอยู่ก่อนองค์ประกอบ h2
ทีนี้เราลองมาแก้ไข Code กันนะครับ ซึ่งผมจะแก้ไขได้ดังนี้
ภาพจาก https://www.freecodecamp.org/
จากนั้นเลือกไปที่ Run The Tests กันเลย
ภาพจาก https://www.freecodecamp.org/
เท่านี้ก็ผ่านการทดสอบครับ ข้อนี้ชิว ๆ เลย เราไปข้อต่อไปกันดีกว่าครับ
2. Inform with the Paragraph Element
ภาพจาก https://www.freecodecamp.org/
หัวข้อนี้ระบบแนะนำเรื่องขององค์ประกอบ P ที่ใช้สำหรับย่อหน้าครับโดยการสร้างองค์ประกอบจะคล้าย ๆ กับ h โดยมีแท็กเปิดและแท็กปิด ซึ่งในหัวข้อนี้แบบทดสอบคือ
ภาพจาก https://www.freecodecamp.org/
- ในช่องที่เราเขียน Code ควรมีองค์ประกอบ P
- ในองค์ประกอบ P จะต้องมีคำว่า “Hello Paragraph”
- ในองค์ประกอบ P ควรมี แท็กปิด
หลังจากทราบแบบทดสอบแล้วเรามาแก้ไข Code กันเลย
ภาพจาก https://www.freecodecamp.org/
เมื่อเขียนเสร็จแล้วเลือกไปที่ Run The Tests
ภาพจาก https://www.freecodecamp.org/
ผ่านไปอีก 1 หัวข้อแล้วนะครับ ข้อต่อไปมีชื่อว่า
3. Fill in the Blank with Placeholder Text
ภาพจาก https://www.freecodecamp.org/
ข้อนี้เขาเล่าว่านักพัฒนามักนำ lorem ipsum มาใช้แทนข้อมูลที่จะแสดงผลจริง เพื่อมาดูเค้าโครงของเว็บไซต์โดยนิยมมาตั้งแต่ศตวรรษที่ 16 ซึ่งระบบบอกว่า 5 ศตวรรษก็นานพอแล้ว(ตอนนี้ ศตวรรษที่ 21) เนื่องจากเรากำลังสร้าง CatPhotoApp ลองใช้ข้อความที่เรียกว่า “kitty ipsum”
โดยแทนที่ข้อความภายในองค์ประกอบ p ด้วยคำแรกของ kitty ipsum คือ Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. (การแปลของผมแต่งเติมนิดหน่อยนะครับ พอดีไม่เก่งภาษาอังกฤษเลย)
แบบทดสอบในหัวข้อนี้ระบุว่า
ภาพจาก https://www.freecodecamp.org/
- องค์ประกอบ p ของคุณควรมีคำแรกของข้อความ “kitty ipsum” ที่ให้มา
จากนั้นผมเขียน Code โดยการไป Copy ทั้งประโยคที่เขาให้มา คือ
ภาพจาก https://www.freecodecamp.org/
ซึ่งถ้าลองกดไปที่ Run the Tests จะเห็นว่าระบบให้ผ่านการทดสอบ
ภาพจาก https://www.freecodecamp.org/
ทีนี้ลองเขียน Code ใหม่ โดยผมลองเขียนดังรูป
ภาพจาก https://www.freecodecamp.org/
และลอง Run the Tests จะเห็นว่าระบบก็ให้ผ่านการทดสอบเหมือนกัน 5555
ภาพจาก https://www.freecodecamp.org/
ทีนี้เราก็ผ่านแบบทดสอบมาแล้ว 4 หัวข้อ รวมของเดิมที่เราทำไว้แล้ว เดียวพรุ่งนี้เราจะมาลุยกันต่อกันสัก 5 หัวข้อกันเลยนะครับ หรือใครจะลองเขียนทำแบบทดสอบต่อก็ได้นะครับผม เดียวผมตามไป 555
ขอให้สนุกกับการเขียน Code ครับ
ดูเพิ่มเติมในซีรีส์
โฆษณา
- ดาวน์โหลดแอปพลิเคชัน
- © 2025 Blockdit
