สวัสดีครับทุกคนนะครับ ยินดีต้อนรับเข้าสู่ปฏิพันธ์ channel นะครับ ก็วันนี้นะครับ เป็นวีดีโอที่ผมจะมาพาแฟนผมเนี่ยนะครับ ฝึกเขียนโค้ดนะครับผม ซึ่งก็เคยทํามาวีดีโอที่แล้วนะ เออนะครับ ถ้าใครได้ดูวีดีโอเนี้ยก็จะมาฝึกกันอีกนะครับ เพราะว่าการฝึกเขียนโค้ดเนี่ยเป็นอะไรที่ต้องใช้เวลาแล้วผมรู้ดีนะครับ ผมก็เลย อ่า จริงจริงอ่ะ เป้าหมายของผมก็คือยากจะฝึกให้แฟนของผมเนี่ย อ่า เขียนโค้ดเป็นนะ ทําเว็บไซต์เป็นนะครับผม อ่ะ ก็มาดูกันนะครับ ในวีดีโอนี้ ซึ่งผมก็จะพามาฝึกการทําเลเยาะเหมือนเดิมเลยนะครับ เหมือนกับวีดีโอที่แล้ว เอ่อ ที่ทําไปเมื่อวันไหนก็ไม่รู้ จําไม่ได้แล้วนะครับ อ่ะ ใครที่อยากจะทําตามนะ เป็นมือใหม่ก็สามารถทําได้ ชิวๆ นะครับ เพราะว่าผมจะค่อยๆ ไปเลยนะ เออนะครับ อ่ะ เดี๋ยวสลับซีนก่อนนะครับ นี่มาดูตัวอย่างเลเยาะกันก่อนนะครับ เลเยาะก็จะประมาณนี้นะ นี่นะฮะ ซึ่งอ่า วีดีโอที่แล้วที่ผมทําเนี้ยก็มันจะไม่ค่อยซับซ้อนเหมือน เหมือน ตัวนี้นะครับ แต่วันนี้จะพามาทํากันนะฮะ อ่ะ อันดับแรกเลยก็คือให้ทุกคนเนี้ยไปสร้าง นะครับ สร้าง อ่า โฟลเดอร์ ขึ้นมาตามนี้เลยก็ได้นะครับ โอเค ให้เรียบร้อยนะ ทีนี้เดี๋ยวเอาเรามา อ่า เขียนนะครับ เปลี่ยน ตรงนี้นิดนึงว่าเป็น อ่า my website แล้วกัน นะครับ โอเคนะครับทีนี้เราก็มาเริ่มจากส่วนแรกก็คือจะเป็น Nav Board หรือว่า Navigation Board ก็คือจะเป็นตรงนี้ จำได้ไหมที่วีดีโอที่เดียวลืมไปยังว่ามันมองยังไง ทบ...ลืมแล้ว โอเคนะครับ มา เรามาทบทวนกันใหม่ ซึ่งที่โอ้มบอกก็คือ เราจะมองแน่เว็บเนี่ย เป็นในรูปแบบกล่อง อย่างเช่นเราเริ่มจากส่วนแรกก่อน ก็คือมันจะมีกล่องใหญ่ๆ กล่องนี้ 1 กล่อง ที่มันจะหอหุ้มตัวกล่องโลโก้ไว้ แล้วก็กล่องเมนู ซึ่งเราก็จะมาสร้างกล่องคอนเทนเนอร์ใหญ่ๆ นี้ก่อน ที่เขาเรียกว่าเป็น Parent Element หรือว่าเป็น Element แม่ ตามนี้เลยก็เราจะใช้เป็น TagNav เลย แล้วก็ข้างในนี้เราจะมีเป็น def class logo นะครับ แล้วก็จะมี ul class menu สร้างตามนี้ก่อน อ่า อ่า อ่า อ่า อ่า อ่า อ่า อ่า อ่า อ่า อ่า อ่า อ่า อ่า อ่า อ่า อ่า อ่า ทีนี้เรามาเปรียบเทียบโค้ดนิดนึงเพื่อความเข้าใจ ตัวนี้จะเห็นว่า NAP มันก็คืออะไร มันก็คือกล่องนี้เลยนะ กล่องใหญ่ๆ Logo คืออะไร Logo ตัวนี้ ก็คือจะเป็นกล่องตัวนี้ Menu ก็จะเป็นกล่องตัวนี้ ทีนี้มันจะมีข้อมูลข้างใน ก็คือเดี๋ยวข้างใน Logo อบจะมีเป็น Tag A แล้วกัน แล้วก็จะเขียนว่า ตามเขาเลยนะ Bloom นะครับ แล้วก็ใน URL เดี๋ยวทำโลโก้ก่อน ข้างในครับ ข้างใน diff ไม่ใช่ครับ ตรงนี้ ตรงนี้ สร้างแถว A ขึ้นมา เดี๋ยวปัง แล้วเขียนว่า bloom จากนั้นใน ul ก็คือเราจะสร้างเมนูขึ้นมามันก็จะมี li แล้วก็มีแท็ก a เดี๋ยวมาดูว่าเขามีเมนูอะไรบ้าง มี home about us services portfolio contact us ก็สร้างมา 5 ตัว มี home about us Services แล้วก็อะไร Portfolio แล้วก็ Contact Plus ตามนี้ครับ แล้วก็สร้างแท็ก A ขึ้นมา แท็ป ใส่ Sharp ไว้ เพราะว่าเรายังไม่ได้ลิงค์ไปที่ไหน ใส่ Sharp ไว้ก่อน ทีนี้ก็เขียนเลยครับ หรือจะก็ก็อปปี้มาก่อนก็ได้นะ ก็อปปี้มาอีก 5 ตัว ใช้วิธีนี้ก็ได้ โอเค แล้วก็เขียนเลยตามนี้ Home About Us Services Portfolio Contact Us นะครับ แล้วก็เดี๋ยวเขียนเสร็จเนี่ย เราจะมาเขียน css กันเลยคือไปไปทีละส่วนนะฮะ เพราะว่ามันผมคิดว่ามันน่าจะเข้าใจได้ง่ายกว่า แต่ถ้าเป็นผมทำนะผมก็จะเขียน โค้งสร้าง html ก่อนนะครับแต่ไม่เป็นไรมันก็ได้เหมือนกัน ขอกินน้ำแปปนึง บอกเลยว่า คอนเทนต์นี้นะครับ เหมาะสําหรับคนที่แบบ เพิ่งเริ่มต้นเลยนะครับ ใครที่เป็นแล้วก็ มาดูทบทวนก็ได้นะครับ เพราะผมเนี่ยมีความตั้งใจ มากมากเลย นอกจากสอน สอนแฟนผมแล้วเนี่ย ผมก็อยากสอนคนอื่นด้วยนะ ให้แบบทํา ทําเป็นกันนะครับ เพราะมันคือทักษะที่สําคัญมาก ผมนั่งฝึกอะไรแบบเนี้ยเป็น 10-10 ร้อยๆ ครั้งแล้วนะครับ ทีนี้กด Save ดูนะครับ มาดูที่หน้าเว็บ เดี๋ยวผมเปิดขึ้นมา ด้วย File Server หลังจากเราเขียน เราก็จะได้เป็นหน้าตาอย่างนี้ มันยังไม่สวย เราก็มาเขียน.cs ก็มาที่ file style.cs นะครับ อันดับแรกเรามา reset ค่า default ของพวก margin เป็น 0 padding เป็น 0 แล้วก็กําหนด box sizing เป็น border box นะครับ อ่า ตามนี้เลย Box Sizing เริ่ม เริ่ม พิมพ์เร็วนะ Box Sizing ฝึกไปเรื่อย ตัวเองพิมพ์เร็วเลย บอกเลย ตอนแรก อมก็พิมพ์ไม่เร็วเลย เป็น Body Box ครับ โอ้ โหงไทย โอเค ทีนี้เราก็จะมาเข้าถึง Packnav นะครับ แล้วเราก็จะกำหนด ผมจะมี Padding สัก 1 รม รอบด้าน จำได้ป่ะ แล้วก็จะมี Background Color เป็น 333 สี Font ข้างในเป็นสีขาว เขียนตามนี้ก่อน เดี๋ยวๆๆ สี Font ไม่ต้องมีก็ได้ เราไปกำหนดใน Tag A เองนะครับ เขียนตามนี้เลย ดินวันร่ำ แบคกราวด์คอลอร์ ทีนี้นะครับเมนูเนี่ยจะเห็นได้ว่ามันยังมันยังเรียงกันลงมาแบบนี้ใช่ป่ะ เราต้องการให้มันอะไรโลโก้อยู่ด้านซ้ายเมนูตรงนี้อยู่ด้านขวาเราก็จะใช้กําลังดิสเพลย์ก่อนเป็น อันนี้เราจะใช้การจัดในรูปแบบจําไว้ด้วยนะเพราะว่าต้องได้ใช้ ดิสเพลย์เป็น แล้วก็เราจะกำหนดนะครับ อ่า ในส่วนของ อ่า เราจะใช้ คอนเทนต์นะ เป็น space bettowin เพื่อจัดตําแหน่งของกล่องที่อยู่ข้างในนะครับนะครับ ก็คือกล่องโลโก้กับ กล่องเมนูเนี่ย ให้มันชิดซ้าย แล้วก็โลโก้ชิดซ้าย เมนูชิดขวา อ่า ลอง save ดู อ่า เห็นไหม นะครับ ก็มาดูตัวอย่าง เห็นปะว่า โลโก้ก็จะอยู่ด้านซ้ายนะครับ เมนูอยู่ด้านขวา ทีนี้ ต่อไปเราจะมาทําให้โลโก้มีขนาดใหญ่นิดหนึ่ง ผมก็จะเข้าถึง class logo แล้วก็ ข้างใน โลโก้มันจะมีอะไร มันจะมีแท็กเอ ใช่ป่ะ อ่า ในโลโก้มันจะมีแท็กเอ แล้วก็เข้าถึง class logo go txt a ปุ๊บ มันจะกำหนด font size ให้มันสัก สัก 2 เรม แล้วก็ สี font เป็นสีขาว เดี๋ยวลองมาดูก่อน แล้วก็ ลบ text decoration มันออกนะครับ เส้นตาย อ่ะ เขียนตามเลยครับ ถ้าเผื่อมีคนสงสัยนะนะครับก็คือ ผมก็คิดว่าจะฝึกแบบเนี้ย ให้ให้ให้แฟนผมคล่องก่อน นะครับ แล้วก็เดี๋ยวว่าจะเสริมเจ้าว่าสคริปต์อะไรไปนิดหนึ่ง ผมก็มีแพลนในหัวว่าผมจะฝึกอะไร นะครับ คือในความคิดผมเนี้ยอยากให้เขาเป็นร่างโครนของผมน่ะ มันก็ต้องใช้เวลานิดหนึ่งอยู่ แต่เชื่อว่าถ้าฝึกสม่ำเสมอแบบอาทิตย์นึงฝึกสัก 3-4 วัน เออ ภายในแบบไม่ถึงปี 3-6 เดือนคือเป็นอยู่แล้วนะครับ เพราะอยู่กับจานโอม ยังไงก็เขาเรียกว่าเด็กปั้น อ่ะนะครับ เห็นป่ะ มันก็จะเป็น นี่โลโก้ก็จะแบบมีขนาดใหญ่ขึ้นมา ทีนี้เราจะมาทำเมนู เพราะว่าเมนูเนี่ย เห็นไหม เมนูมันเรียงกันลงมาแบบนี้ เราก็จะเข้าถึง Class Menu เลย มาเข้าถึง Class Menu อันนี้ก็เหมือนกัน เราจะกำหนด Display เป็น Flex เพื่อให้มันขึ้นมาต่อกัน แบบนี้นะครับ กำหนด Display เป็น Flex Display Display ยูสเอส Flex ทีนี้ต้องกด Save ดูนะ ดูผลลัพธ์ จะเห็นว่า อ่า จากเดิมที่มันต่อกันมาใช่ไหม มันก็จะปรับให้มัน อ่า เรียงไปในแนวนอนนะครับ ทีนี้เนี่ย เราก็จะเข้าถึง เดี๋ยวเราเข้าถึงเป็น Pattern ตามนี้เลย ในเมนูเนี่ย มันจะมี หาว หาวจังเลยนะครับ เรียงเขียนโค้ดทีไร หาวตลอดนะครับ ทุกคนแหละผมก็เป็นนะ อ่า เราเขียนเป็น Pattern อย่างงี้เลย เพราะว่าข้างในเมนูก็จะมี Li ข้างใน อ่า เอ้าไอ ก็จะมี ใช่ป่ะ ทีเนี้ย อมจะปรับขนาด ระยะห่างมันส่วนนิดนึง ก็คือซ้ายขวาใช่ป่ะ ก็จะสักหนึ่ง สําหรับ เอ้าไอ นะฮะ จำได้ไหมเนี่ย ใช้ 2 ค่าคืออะไร ค่าแรกคือบนล่าง ค่าที่ 2 ซ้ายขวา ที่เคยให้ทำอันนี้ไป ก็ 0 ไง มาร์จิ้น 0 แล้วก็ซ้ายขวา 1 เร็ม ไม่ต้องมี Space ครับ ไม่ใช่ ดูโฟโตรม ลองกด Save ดู เพื่อเห็นว่ามันจะมี Space ของเมนู ทีนี้มาที่ Tag A เราก็จะกำหนด เดี๋ยวใส่สี ฟ้อนต์ให้เป็นสีขาวก่อน พิมพ์เสร็จคำสั่งหนึ่งก็ลองกด Save ดูก็ได้ครับ มันจะเห็นผลลัพธ์ไง Color ลองกด Save เป็นสีขาวแล้วทีนี้เราลบเส้นใต้มันก็คือ text decoration เป็นนั้น เย้ๆๆ คอปปี้เลยเว้ย โอเคมั้ย แต่จริงๆอยากให้พิมพ์นะครับจะได้คล่อง อ่ะทีนี้เดี๋ยวเรามาที่ จะเห็นได้ว่ามันจะมีจุดไข่ปลาสีดำใช่ป่ะ ที่เมนูอ่ะ เดี๋ยวถ้าเรามาดู เห็นมั้ย เรามาที่เมนูครับ เพราะว่าเมนูมันคือ ul ใช่ป่ะ เราจะต้องมากำหนด list style non ให้มัน เพื่อเราไปลบจุดไข่ปลาออก ลบออกแล้ว อ่าออกแล้วทีนี้มันยังเหมือนจะไม่ไม่กึ่งกลางแนวตั้งใช่ป่ะเราก็จริงๆเราก็มาที่เมนูนี่แหละแล้วก็กำหนดเราจะใช้เป็นอะไรไอเทมเซนเนอร์อ่ากลางละ คือความแตกต่างของ justify justify มันเป็นการจัดในแกนแนวนอน ก็คือแกน x แต่ถ้าเป็น align items คือแกน y หรือแกนแนวตั้ง ก็ตามนี้ เห็นป่ะ เสร็จแล้ว เราได้เมนูแล้ว ทีนี้ส่วนออกไปคืออะไร อันนี้เขาจะเรียกว่าเป็น Hero หรือว่า Banner ของเว็บไซต์ คำสาปก็ให้รู้ไว้นะครับ ก็กลับมาที่ HTML ครับ ทีนี้เดี๋ยวเรามาสร้างเลยก็คือ ผมจะใช้เป็น section ที่มีคลาสเป็น Hero แล้วกัน เขียนเหมือนโอ้มเลยก็ได้ แล้วก็จุด Hero แล้วที่นี้กดแท็บได้มันก็จะเป็น อาจจะไม่เป็นไร สร้างแล้วก็ค่อยไปเพิ่มคลาสไปแล้ว มี Class เป็น Hero นะครับ โอเค ทีนี้ข้างในมันจะมี container นะ จริงๆ อมเพิ่งสังเกตเห็นว่า จะเห็นได้ว่ามันจะอยู่ใน container มันเห็นป่ะ มันจะอยู่ตรงกลางแบบนี้เลย ซึ่งเราอาจจะต้องมีอันนี้ เดี๋ยวกลับมาที่ nav ก่อน อันนี้อมลืมไป สร้างคลาสที่ชื่อว่า container ขึ้นมา นั่นแหละ คลอดลงมาเลย แล้วสร้างคลาสที่ชื่อว่า container เดี๋ยวจะมาสอนวิธีการแก้นะครับ แล้วก็มีคลาส container เขียนเลยครับ เขียนเลย นั่นแหละ คลาส container concernr A I N E R I I ก่อน N E R ทีนี้เราตัด def มานะ สังเกตนะ เดี๋ยวอมคล้อให้เหมือนของตัวเองจะได้ไม่งง ตัด def ตรงนี้มานะ แล้วเอามาวางด้านล่าง U L ตรงนี้นะ ใช่ เพราะเราต้องการเอามันครอบ element ทุกตัว -มีนะ? ใช่ อ่า ทีนี้จัดระเบียบหน่อยครับ เดี๋ยวจะได้ไม่งงเนี่ย จัดระเบียบให้มัน ให้โค้ดมัน อืม เดี๋ยว ทำไมตัวนี้มันไม่ออกไป อันนี้ตัด ตัดไปเลย เนี่ยมันก็จะเป็นอย่างงี้ เนี่ย ทีนี้เนี่ยพอมันมี container เนี่ย แต่มันจะมีปัญหาอย่างหนึ่งคือ เราจะต้องมีการสร้างตัวนี้ขึ้นมานะครับ ก็คือเป็น Diff ที่มี Class ชื่อว่า NavCon ทีนี้เราตัดดิฟท์ของมัน ตัดแท็กปิดดิฟท์เนี่ย เอามาไว้ด้านล่างยูเอลอีกครั้งหนึ่ง เหมือนเมื่อกี้เลย โอเค ถ้าเรากด Save เนี่ย มันจะเพียนละ เพียนเพราะอะไร ก็เพราะมันไม่ถูกต้องนั่นเองนะครับ มันงงว่าเราเปลี่ยนหรอ เราต้องเขียนให้มันถูกด้วย ซึ่งวิธีการแก้เนี่ยจริงๆก็ไม่มีอะไรครับ ก็คือ เดี๋ยวมาที่ CSS นะ เราก็แค่มาเข้าถึง Class NavCon นะครับ แล้วตัดตัวนี้ออกมา Display Flex เนี่ย เอามาใส่ที่นี่ เดี๋ยวเราจะไปสร้างคอเลนเนอร์ อ่ะ ทําอันนี้ก่อน เราถึง navcon อ่า แล้วตัด นั่นแหละ ตัดสองอันนั้นมา โอเค มาวาง ตัดมาเลยครับ เดี๋ยวค่อยไปลบก็ได้ อ่ะ ลบทิ้งไป คอนโทน x คอนโทน x ก็ได้ตัดอ่ะ อ่า แล้วก็คอนโทน v คอนโทน v อ่า โอเค ทีนี้ถ้าเรากด Save เนี่ย มันก็จะเป็นเหมือนเดิม เห็นไหม แต่ว่าเดี๋ยวเราจะมี Container มาสร้างตรงนี้เลย Container ก็คือเป็นกล่องที่เราจะเอาไว้ให้มันอยู่กลางๆ ก็คือผมจะกำหนดความกว้าง Max Width นะ สัก 1,100 40 แล้วก็จัดกลางด้วย margin 0 auto มันก็จะมี container ของมันล่ะ ก็จะสวยขึ้นกว่าเดิม สร้าง container ขึ้นมาครับ ไม่ใช่สร้าง เข้าถึง class container ที่เรา crop ไอ้ตัวนี้เห็นป่ะ อันนี้คือวิธีแก้นะครับ เพราะว่า website to website มันก็จะมี container ของมันอยู่ล่ะ มันก็จะใช้วิธีนี้ 5 MW 1140px Margin 0 Auto 0 ก็คือบนล่าง 0 นะครับ ส่วน Auto ก็คือมันจะจัดตำแหน่งซ้ายขวาให้เรา หรือว่าพูดง่ายๆคือมันจะดันซ้ายกับดันด้านขวาให้มันอยู่กึ่งกลางนั่นเองนะครับ มาก็เลยลองกด Save ดู ปึ๊บนะฮะ อันนี้ไม่เห็นผลลัพธ์เพราะว่าอะไร เพราะว่า อ่า นะครับ เดี๋ยวลองขยายมาซิ ขยายมาแบบเต็มๆเลย อ่า เห็นป่ะ มันก็จะมี container เห็นป่ะ ของมัน เห็นไหม เออ นี่นะ โอเค ประมาณนี้ เพราะว่าหน้าจอตัวเองมันน่าจะพันเก้าไง มันก็เลยแบบ เออ ไม่เป็นไร อ่ะ ทีนี้ก็ออกมาครับ เห็นป่ะ อันนี้คือวิธีแก้นะนะครับ จากนั้นมาทำในส่วนของ Hero ต่อ ก็คือตัวนี้ เนี่ย ก็เหมือนกันเลย เดี๋ยวเรามี container ก่อน กลับมาที่ html พิมพ์เหมือนอมเลยนะ พิมพ์จุดแล้วก็ตามด้วยชื่อคลาสอ่ะ มันจะสร้างเป็น diff ที่มีคลาสมาเลย มันจะเร็วกว่า จุด พิมพ์จุดเลยครับ พิมพ์จุด จุด อ่า จุดตรงนี้ก็ได้ อ่า แล้วพิมพ์ container ไม่ไม่ต้องพิมพ์ diff ก็ได้ พิมพ์ container เลย เออ ใช่ แล้วกด กด ปุ๊บ มันจะสร้างออกมาแบบนี้ให้เลย มันจะเร็ว อ่า เห็นปะ ก็ Enter ลงมานะครับ ที่นี้ก็เหมือนกัน ตัวเองมาดูนะ กล่องใหญ่ เรามีกล่องใหญ่แล้วใช่ไหม กล่องใหญ่ก็คือ เป็น Section Hero ใช่ปะ มันก็จะมีกล่องเล็ก 2 กล่องนะ อันนี้ไม่ต้องมองรวมนะ หลายคนที่มาฝึกเขียนเว็บใหม่เนี่ย เขาจะมองรวมไปเลย แต่มันไม่ใช่ มันจะมีกล่องนี้ก่อน กล่องหนึ่ง กล่องด้านซ้าย แล้วก็มีกล่องนี้เป็นรูปภาพด้านขวา อ่าเนี่ย แล้วเราก็มาสร้างกันนะฮะ เราก็จะมีกล่องข้อมูลก็คือเป็น dev อาจจะเป็น hero info ก็แหละ อ่า แบบนี้เลย จุด hero-info อ่า เอา กดแท็บไป ทีนี้มันจะมีข้อมูลอะไรข้างใน มันจะมี Title มี Description แล้วก็มีปุ่ม ก็มาใช้ Edge 3 แล้วกัน เขียนว่า This is Hero แล้วก็มีแท็ก P รอรึ้มสัก 50 คำ ก็มี Type A นะครับ อันนี้มี Class เป็น Hero VTN แล้วเขียนว่าอะไร Learn More อ่า รอเริ่ม 50 รบๆ ใหม่ ตัวเองพิมพ์แบบนี้เลย Rollin'50 แล้วกด Tab ได้เลย มันจะสร้างข้อความ 50 คำขึ้นมาให้เรา เอาไว้ test หน้าเว็บนะครับ ทีนี้ก็จะมี Tag A สร้าง Tag A ขึ้นมาก่อน เดี๋ยวโอ้มลืมไป 1 จุด ตรงนี้ คลอสตรงนี้เลยครับ ไม่ๆๆ คลอสตรงนี้ก็ได้ เราก็มาคลอสตรงนี้ด้วย แล้ว แท็กเอครับ มีคลาสด้วยนะสังเกตโค้ดดีๆ ถ้าใครเพิ่งฝึกเขียนเว็บเนี่ย ผมอยากจะเน้นย้ำเลยว่า ให้ใจเย็นนะครับ แล้วก็อย่าพยายามแบบ คิดเองเออเอง อันนี้อาจจะฟังดูอันนี้นะฮะ แต่มันเป็นจริงๆคือมือใหม่เขาจะชอบบางคนอ่ะ คือยังไม่ได้รู้เรื่องหรือข้องอะไร เขาจะคิดเองเออเองแบบเขียนอย่างนี้ได้ไหมอะไรอย่างนี้ พอไปลองแล้วมันผิดก็ไม่รู้จะแก้ยังไง แนะนำให้ทำตามก่อนนะครับ แล้วก็มี Learn more ข้อความข้างใน โอเค แต่ทีนี้สังเกตดูนะ อมมีกล่องด้านซ้ายแล้วคือตัวนี้ใช่ปะ เนี่ยกล่องเนี่ย แต่ทีนี้เดี๋ยวมันยังไม่มีเป็น container ของมัน เดี๋ยวเราสร้าง hero-con ขึ้นมา แล้วตัดตัวนี้มาแปะด้านล่างตัวนี้ จัด นั่นแหละ คลอคลงมาครับ สร้างคลาสขึ้นมาชื่อว่า HeroCon จุด HeroCon เลย HeroCon แล้วตัด Diff มา ตัด Tab ปิด Diff มา ข้อลงมา นั่นแหละ กด Tab ด้วย จัด Space มาหน่อย โอเค ทีนี้ก็มาสร้างกล่องด้านขวากัน ก็ต่อจากตรงนี้เลยนี่ เห็นป่ะ ดริฟต์ตรงนี้นะ อะ ขอมาแบบนี้ ไม่ ดริฟต์ตรงนี้ครับ อะ ขอลงมาให้มันมี Space นั่นแหละ แล้วก็สร้าง Class Hero IMG ข้างในเราก็จะมีใช้แท็ก IMG แล้วก็รูปภาพ เดี๋ยวไปเอารูปภาพมา เดี๋ยวอันนี้ไม่ต้องจุดเฉยๆ แล้วก็ชื่อค้าได้เลย แต่เข้าใจอยู่เพราะว่าแรกๆมันจะสับสนนิดนึงนะครับ แต่พิมพ์ไปเรื่อยๆเดี๋ยวมันจะเข้าใจแล้ว จะเริ่มคล่อง แล้วข้างในมีแท็ก IMG นะครับ แท็ก IMG เอาไว้ใส่รูปภาพ พิมพ์ img ได้เลยครับ img กดแท็บ อ่าทีนี้ไปเอารูปภาพมาก็ เสิร์ชอ่า food img ก็ได้ food img เอารูปไหน โย้เห็นแล้วเย็นหิวข้าวเลย เพิ่งกินข้าวมา มานะครับ ใส่ใน hrc ไปน่ะ ปึ๊บทีนี้มาดู อ่าเราก็จะได้มาเป็นแบบนี้ เอารูปเหมือนกันเลย นี่นี่อ่ะ อมอร์รูปที่สองน่ะ เออนั่นแหละ พลิกขวา คลอดลอกที่อยู่รูปภาพมา เอามาใส่ใน LRC ใส่ไป โอเค ทีนี้นะครับ ใส่เสร็จมาดูหน้าเว็บนะ หน้าเว็บก็ยังไม่ค่อยสวยงาม เพราะว่ามันยังไม่ได้จัด layout เลย ก็มาที่เซลต์เลยนะครับ เดี๋ยวเราจะเข้าถึง Class HeroCon นะ มาที่เซลต์ด้านล่างสุดเลย เข้าถึง HeroCon กำหนด Display เป็น Flex เลยนะครับ เห็นป่ะ HeroCon คือตัวไหน ผมอยากรู้ Class HeroCon คือตัวไหน มันเป็นตัวอะไร มันเป็นตัวที่หอหุ้มกล่อง 2 กล่องนี้ ใช่ไหม เออ นะครับ แล้วทีนี้ก็คือพอเรากำหนดเป็น flex ปุ๊บเนี่ย เราจะเห็นได้ว่า อ่า รูปภาพมันยังใหญ่อยู่นะครับ จริงๆ อ่า ก็เขียนเลย ไม่อมอธิบายไง เอาตัวเองเขียนเลย ก็ อ่า เดี๋ยวๆ อ่ะ เขียนให้เสร็จก่อน โอเคนะครับ ทีนี้กล่องเนี่ยนะครับ ถ้าเกิดว่าเรามาสังเกตเห็นป่ะ มันมันเหมือนแบบ มันไม่โอเคใช่ไหม เพราะว่ารูปภาพมันใหญ่จริงจริงเดี๋ยว เราไปเข้าถึงคลาส Hero IMG นะ Hero, IMG แล้วก็ Tag IMG นะ กำหนด Width เป็น 100% เห็นป่ะนะครับ รูปผ้ามันก็จะได้ประมาณนี้ แล้วก็เดี๋ยวผมจะเข้าถึง Hero, Info กำหนด Width เดี๋ยวลอง 100% ดิ เห็นมั้ย มันก็จะได้ประมาณนี้นะครับ ซึ่งมันก็โอเค ก็เขียนตามเลยนะครับ เพราะว่ามันก็จะเหมือนกันว่าแบบคนละครึ่งนะครับ แบบแบ่งกันคนละครึ่งอะไรอย่างงี้ แต่จริงจริงมันใช้เป็นกรีดก็ได้นะ กรีดมันก็จะจัดได้ โอเค เดี๋ยวจะพาใช้กรีดอยู่นะครับ เดี๋ยวเขียนไปก่อน อันนี้ผมขอพูดหน่อยนะครับ ระหว่างเขียนเนี่ย คือถ้าใครเป็นมือใหม่มากๆแล้วมาดู แล้วยังไม่เข้าใจตรงไหนอะ อย่าพึ่งใจร้อนนะครับ ผมบอกเลย เพราะมันเป็นกับทุกคนนะ แล้วอย่าพึ่งไปแบบคิดว่า อุ้ยทำไมมันงงจังมาก คือมันงง มันเป็นเรื่องปกติ เวลาเรามาเรียนรู้อะไรใหม่ๆ หรือเป็นเรื่องที่เราไม่เคยทำ มันไม่แปลกที่เราจะงง ผมก็งงเหมือนกัน กว่าผมจะ เข้าใจอะไรอย่างนี้ อ่ะ กินน้ำเหรอ เดี๋ยวหยดลงนั้น ครับ โอเค อ่ะ ไม่เป็นไร ทีนี้นะครับ หลังจากเราได้แบบนี้มาแล้ว เดี๋ยวผมจะมี อ่ะ เดี๋ยวผมจะมีอันนี้หน่อยก็คือ Padding Padding สัก 2 เร็มแล้วกัน ข้างใน Hero Info เห็นป่ะ แล้วก็จริงๆใน IMG ด้วยก็ได้ มันก็จะมี Space ประมาณนี้นะ เห็นไหม แล้วก็เดี๋ยวผมจะเข้าถึง Hero Info H3 นะครับ กำหนด Front Side สัก 2 เรม อ่า แล้วก็ต่อไปก็คือเดี๋ยวผมเขียนให้ยาวเลยนะ Hero Info Tab P มี Margin บนล่าง 1 เรม ซ้ายขวา 0 แล้วก็สุดท้ายคือจะเป็นปุ่มใช่ปะ ปุ่มก็คือเข้าถึง Hero info แล้วก็ Hero btn นะครับ Background color เป็นสีส้ม สี font เป็นสีขาวนะฮะ แล้วก็จะมี padding ประมาณ 1 rem เดี๋ยวผมจะต้องกำหนดอันนี้ด้วย display ให้มันเป็น inline block เพราะว่าค่า default ของมันมันเป็น inline เห็นป่ะ พอเรากำหนดนะครับ ทีนี้เดี๋ยวผมจะมี border radius 5 pixels นะ แล้วก็ check decoration เป็นนั้น ก็จะได้ประมาณนี้เห็นป่ะ คล้ายๆ กัน ทีนี้เขียนตามเลยครับ ก็คือเริ่มจากตรงนี้ก่อนเลย Hero... เมื่อกี้ เดี๋ยวๆ นี่เหรอ ตรงนี้เหรอ ใช่ๆ Hero Info ก็คือเพิ่ม Padding ไป 2 Rem ไม่ใช่ครับ ในนี้เลย ในนี้เลย นี่เหรอ ใช่ ก็คือเพิ่ม Padding ไป นี่ นี่ ตรงนี้ PADDING 2 RAM PADDING 2 RAM ทีนี้ใน IMG ก็เหมือนกัน เพิ่ม PADDING ไป 2 เร็มครับ อ่า ทีนี้เนี่ย เราก็มาเข้าถึง อ่า พวก ข้างใน Hero Info มันก็จะมี Edge มันจะมี Edge 3 มี แล้วก็มีปุ่ม 3 ตัวนี้แล้วก็เขียนต่อเลย เขียนต่อจาก Hero Info อ่ะ เขียนต่อจากตรงเนี้ย อ่า ถูก ก็เริ่มจากตัวนี้ก่อนเนี่ย ก็คือเข้าถึง อ่า Edge 3 ฟอนต์ซ้ายเป็น 2 rem ต่อไปก็คือเข้าถึงทักพีครับ Margin บน ล่าง 1 rem เขียน Margin ผิดครับ เป็นตัว N โอเค มีล้วนนิดนึงแหละ แล้วก็สุดท้ายก็คือปุ่ม Hero BTN ทีนี้ก็กำหนด Display ของปุ่มให้เป็น Inline Block เพราะว่าค่า Default ของปุ่มก็คือ ไม่ใช่ปุ่ม Tag A มันจะเป็น Inline นะครับ ถ้าเป็น Inline ก็จะหมายถึงว่ามันจะไม่สามารถใช้พวก Margin อะไรได้ แต่ว่า Padding ใช้ได้อยู่ Background เป็นสีส้มครับ Orange Orange สี Font ข้างในเป็นสีขาว มี Padding จริงๆ Padding เดี๋ยวผมเอา ผมเอาอย่างนี้ดีกว่า บนแรง 0.5 ซ้ายขวา 1 เริ่ม Border radius ไม่พิมพ์เลย 5 Pixel ก็ต้องพิมพ์สิครับผม ไม่เป็นไรทำงานจริงก็ไม่ต้องพิมพ์เยอะขนาดนั้น อันนั้นถูก อันนั้นพูดถูก แต่ว่าเรายังพิมพ์ไม่ค่อยเลย ไม่เป็นไร Text decoration เทคสุดก็พิมพ์วะ ที่มันเร็วสำหรับเราก็ต้องทำ เข้าใจ แต่ว่ามือใหม่ควรพิมพ์เอง เชื่อผมเถอะ กล้องเห็นปะเนี่ยครับ กล้องเห็นคนดิ้นปะ ฮ่าๆๆๆๆ โอเค เห็นป่ะ เราจะได้หน้าเว็บอย่างนี้ มาดูที่หน้าเว็บ เป็นไง สวย ทีนี้มาดูส่วนออกไปก็คือ จะเป็นในส่วนของ Block จริงๆมันมีพื้นหลังด้วยนะ เห็นป่ะ พื้นหลังมันเป็นเทาๆนะ เดี๋ยว เรามาที่ headercon headercon แล้วกำหนด background color เป็น 1e1e1e นะ เฮ้ย เดี๋ยวก่อน 1C ปะวะ อ้าวไม่ใช่เว้ยเฮ้ย งั้นเดี๋ยวเราเอา ประมาณน่าจะ E5 ปะ E5 มั้ง เออ นี่ครับ E5 แต่เดี๋ยวก่อนนะ ไม่ใช่ดิ ผมน่าจะต้องเข้าถึง Hero วะ อะ เดี๋ยวเราสร้าง อ่า เข้าถึง Class Hero นะครับ กำหนด Background เป็น อ่า เห็นป่ะ เดี๋ยว เอา ให้มันจาง กว่านี้นิดนึง F0 นะ เออ F0 นะครับ อะ ประมาณนี้ แบ็คกราวน์คอลเลอร์นะครับ ไม่ใช่คอลเลอร์ เพราะเราต้องการใส่สีพื้นหลัง นึกว่าเป็นวันดาตา นั่นอะไร? F0 F0 F0 F0 f0 f0 f0 f0 f0 อีกตัวหนึ่ง อ่า โอเคเราก็จะได้แบบนี้มา อ่า ทีนี้เรามาทำส่วนต่อไปคือส่วนของ Block ใกล้เสร็จแล้ว อีกแค่สองส่วนเอง โอเค มาต่อไปครับ สร้าง Section ที่ เอ้ย เออ โอเค ถูกแล้ว ที่มี Class ชื่อว่า Block นะฮะ อ่า ข้างในนี้ก็จะมี Container มี BlockCon อ่า สร้างเป็น Pattern ตามนี้เลย โอเค Enter ลงมาอีกครับ Session แต่จริงๆมันมีอันนี้ด้วยนี่หว่า มันจะต้องมี Block Title ด้วย แล้วก็มี Edge 3 เขียนว่า Our Block นะฮะ อะ นี่ ตามนี้เลย อ้าว ผิด ตัวเองตาลาย ตัวเองตาลาย ตัวเองไม่เขียนในแท็กปิดไง ตัวเองอยู่ข้างล่าง เขาก็ว่าอยู่ ทำไมไม่ไป มันคันหูจริงวะเนี่ย ไม่รู้เป็นอะไร อ่า คลาสนะครับ ผมบอกเลยใครที่ฝึกตามนะ ยังไงก็เข้าใจอ่ะ ต้องเข้าใจวัน 80% อ่ะ ผมการันตีเลย แบบโดยที่ถ้าทุกคนไม่เคยเขียนมา แต่ทุกคนก็อยากเรียนรู้อะไรอย่างเงี้ย ทุกคนเรียน เรียนจบอ่ะ เนี่ย เรียนตามวีดีโอนที่จบ คือทุกคนเข้าใจ อาจจะมีบางจุด แต่ผมเชื่อว่า ก็เข้าใจเยอะขึ้นแน่นอนนะครับ เพราะผมพาแก้พาอะไรเลย ที่ที่พาทํามา แต่ใครไม่เข้าใจนะครับ ก็ไม่เป็นไร นึกได้มั้ย ช่วยไม่ได้ ไม่คือ มันก็ธรรมดาเป็นเรื่องปกตินะ ก็ต้องไปฝึกนะครับ ต้องทำความเข้าใจอยู่ดี อ่ะ ทีนี้ก็ แป๊บนี้ยังไม่เสร็จครับ ครับ อันนี้รออยู่เนี่ย ระหว่างรอผมก็จะ เขาเรียกว่าเทศนานะครับ คนที่เป็นผู้เริ่มต้นฟังนะครับ มันต้องใช้เวลาฝึกเยอะมากครับทุกคน เนี้ยแหละ มันเลยเป็นเหตุผลว่าทําไมผมถึง ผมถึงแบบว่า เห็นความสําคัญแล้ว คือผมอยากมาฝึกแฟนผม เพราะว่าเดี๋ยวเราจะไปรับงานรับอะไรกันเนี้ย มันจะได้แบบ ผมก็อยากมีคนช่วยไงนะฮะ เหมือนมานั่งเรียนด้วยกันนะครับ Block title มี H3 มี H3 ข้างในครับ นั่นแหละ ดูอยู่ ตารายอยู่ เดี๋ยวโอ้มเคาะให้ คือข้างในมันจะมี Block title กับ Block con นะ เดี๋ยวโอ้มเคาะให้แบบนี้ นี่เห็นป่ะ เดี๋ยวจะได้ดูง่ายขึ้น H3 ไม่ต้องเอาลงก็ได้ ทีนี้ก็ต่อจากตัว Diff ตัวนี้ อ่าใช่ เราก็สร้างเป็นอีกตัวหนึ่งขึ้นมา นี่เหรอ ใช่ สร้างเป็น Block container นั่นแหละ อืม โอเค อ่า ทีนี้กดเซฟก่อนนะครับ ผมพามาดูนิดหนึ่งเนี้ย ที่ผมพาทํานะ อ่า ไอตัว นะครับ ตัว นี่ก็คือ ดูตามด้วย ตัว นี่ก็คือ จะเป็นกล่องใหญ่เลยนะครับ ทีนี้ ของมันเนี้ย ก็จะเป็นตัวนี้นะ เห็นป่ะ Block Title ก็จะหมายถึงตัวนี้ นี่ กล่องตัวนี้ ทีนี้ตัว Block Con ก็คือจะเป็น container ที่มันหอหุ้ม element 3 ตัวนี้ไว้ กล่อง 3 ตัวนี้ไว้นะครับ ทีนี้เรามาใน BlockCon ซึ่ง BlockCon เนี่ย ผมจะมี Class BlockItem นะครับ ข้างใน BlockItem เนี่ย ก็จะมีอะไร มีรูปภาพใช่ไหม มี Edge อันนี้เอาเป็น Edge 4 แล้วกัน My Block เอา My Block นี่แหละ เขียนง่ายๆ ดี มี TagP สัก 20 คำนะครับ เราเริ่ม 20 คำ แล้วก็จะมีปุ่มนะครับ มีปุ่มที่เป็น Class Block Btn นะครับ แล้วก็เขียนว่า Learn More เจ้าเองให้โทรมา โทรค่ะ อย่าเอาดูว่า คุยได้ โอเคนะครับ เดี๋ยวเราค่อยลงไปเอาของมาแล้ว เสร็จอันนี้ก่อน ก็ทำตามอมเลย เห็นมั้ย ในบล็อกคอนเนี่ย ก็จะมีบล็อกไอเทม สร้างมาตัวหนึ่งก่อน ตามนี้เลย สร้างคลาสบล็อกไอเทมขึ้นมา ตารายจริง อันนี้อมเข้าใจ เพราะว่าขนาดทุกวันเนี่ย ผมยังเป็นเลย แล้วนับภาษาอะไรกับคนที่เพิ่งเขียน ไม่แปลก แต่ว่า คือตอนแรกที่เรามาฝึกเขียน มันจะมอง มันยังแบบว่ามองไม่ค่อยออกไง ว่า Block ไหน เป็น Block ไหน อะไรอย่างนี้ แต่ถ้าเขียนไปเรื่อยๆ แล้ว มันก็จะคมขึ้นนะครับ เขาเรียกว่าอะไร ทักษะการมองโค้ด มันก็จะคมขึ้น ซึ่งมันก็ต้องฝึกบ่อยๆนะครับ ในบล็อกไอเทมก็จะมี เดี๋ยวเราค่อยหามาใส่ ก็จะมี H4 ขีดว่า My Block เปิดไม่ป่ะเนี่ย เอ้ย เปิดไม่ได้ ถ้าไม่ได้เปิดนะ จบเลย อัดมาตั้งนาน รอเริ่มสัก 20 Enter ก็ แท็ก A ครับ ปุ้ม มีคลาส Block BTN คลาสเขียนผิด Block BTN Block BTN Learn More Learn More Learn More Oh โอเค ไม่เห็นตัวเองเขียนตัวใหญ่ ต้องเขียนตาม ตามนี้ครับ ทีนี้เราก็ ก็อปปี้ เอ้ยเดี๋ยว เอาหารูปก่อน เอารูปอาหารนี้เลยมาใส่ ครับ ไปที่นี้ เอารูปไหน เอารูปแรกนะ อืม อยู่นี้ รูปไหน เอารูปนี้นะ เอามาใส่ แล้วก็ เอามาใส่ในอีกราศีครับ นั่นแหละ ทีนี้เราก็ Copy ตัวนี้เลย Block Item ที่อมครอบมันอยู่ ครอบมันเลย นั่นแหละ ถึงอ้าว ไม่ๆ ถึงดิบ นั่นแหละ แล้วก็ใส่อีก 2 อัน 2 ตัว เพราะว่ามันมี 3 กล่อง ใช่ มันมี 3 กล่องไง Enter อีก 2 ครั้ง แล้วก็วาง แล้วกด Save ดูครับ มาดูที่หน้าเว็บ หลังจากเรามา เรามาเห็นป่ะ เดี๋ยวเรามาดูที่หน้าเว็บก่อน มันจะเป็นอย่างนี้ ซึ่งเราไม่ต้องการ เราต้องให้มันเรียงอย่างนี้ใช่ไหม เราทำยังไง เราใช้ Grid ได้ครับตรงนี้ ก็เดี๋ยวมาที่ CSS เลย มาด้านล่างสุด เราจะเข้าถึง BlockCon ใช่ป่ะ ตำรวจ Display เป็น Grid Grid ก็ ตรงตามชื่อมัน คือ อย่าง Instagram อย่างนี้ ที่เขาเห็นรูปภาพโพสต์ของเราปะ มันก็จะเรียงเป็น Grid อะไรอย่างนั้น แต่จริงๆมันมากกว่า 3 ก็ได้ จะเป็น 4 เป็น 5 Column ก็ได้ เขาจะเรียกว่า Column ใช่ปะ อย่างเช่นตรงนี้มันก็มี 3 Column ทีนี้กำหนด Display เป็น Grid แล้วก็ Grid Template Column นะครับ 1 FR 1 FR 1 FR ก็คือ 3 Column นะ น่าจะพอรู้ฟื้นได้จากวีดีโอที่แล้วที่เราได้ทำกันไป ใช่ไหม นี่ครับเห็นป่ะทุกคน ลืมใหม่ได้ ไม่ใช่ จะบอกว่าคือเราต้องฝึกสม่ำเสมอ ไม่งั้นมันก็คือลืมก็ได้คือผมจำได้เลยเหมือนกัน ตอนผมฝึกแรกๆ แล้วผมไม่ได้ฝึกบ่อยๆ คือลืม ซึ่งลืมมันไม่ได้เป็นเรื่องแย่ครับนะ แต่ถ้าใครอยากจะจำให้มันได้มันต้องฝึกบ่อยจริงๆ ผมได้ฝึกบ่อยเห็นไหม อ่า จะเอาลืมเซฟ ทีนี้อ่ะเห็นป่ะ เห็นป่ะ พอเราปรับขนาดแบบนี้มันก็จะได้แบบนี้ ปรับกวิทย์แล้วคอลัมป์ก็คือมี 3 คอลัมป์ ทีนี้มันเหลืออะไร จริงๆมันก็คือรูปภาพนะ เดี๋ยวเราเข้าถึง block item แท็ก img กำหนด width เป็น 100% นะครับ ให้รูปภาพมันกว้างเต็มไปเลย นี่เมื่อกี้รูปภาพมันกว้างไม่เต็มใช่ป่าละ ให้มันกว้างเต็ม เพราะในบล็อกไอเทมคืออะไร มันมีแท็ก img อยู่เห็นไหม นี่เราก็เข้าถึงบล็อกไอเทมก่อน แล้วก็เข้าถึงแท็ก img นะครับ บล็อกไอเทม บล็อกไอเทม ถ้าตัวเองเดี๋ยวฝึกไปเรื่อยๆก็จะเริ่มเข้าใจว่า เออมันก็ มันเป็นขั้นเป็นตอนของมันอ่ะ เวลาที่เราจะเข้าถึง element ตัวไหน นะครับ ไม่ถึงสัก 5 อันขึ้นนี้ก็เริ่มคล่องแล้ว จริง ถ้ามันได้ฝึก แต่ก็ถ้าจะคล่องก็ประมาณสักสิบ สิบ สิบโปรเจกขึ้นไป ร้อยอันเก่งเลยหรอ ร้อยอันเก่ง โห เก่งแน่นอน ร้อยอันเนี่ย นะครับ อ่า เห็นป่ะ กว้าง อ่า รูปภาพมันจะกว้างเต็ม แต่ทีเนี้ยมันชิดเกินเกิน เห็นไหม ค่ะ เราทําไง เรามาที่ บล็อกคอนเหมือนเดิมครับ นี่ บล็อกคอนตรงนี้เราจะใช้ grid gap นะ แก๊ป grid gap ก็คือช่องว่างใช่ป่ะ สักสองเวล เขียนผิดแล้วนะ มันต้องมีตัว OR grid แต่ grid-gap เหมือนเขาจะไม่ support ไม่รู้เหมือนกันนะ เห็นปะ มันขีดค่า แต่มันก็ใช้ได้นะ ผมก็ยังใช้อยู่นะครับ grid-gap เป็น 2 rem มันจะมี space แบบนี้ขึ้นมา grid-gap เห็นปะ มันขีด แต่เราใช้ได้นะ เดี๋ยวเขาบอกว่า property is obsolete เดี๋ยวนะ เขียนไปเลยเดี๋ยว โอ้ม ขออ่านหน่อย แก๊ป มาชี้ดิ ทำไมไม่ขึ้นบนของตัวเองวะ อ่านี่ไง เขาบอกว่า Property is obsolete ก็คือ คุณสมบัตินี้มันล้าหลัง หรือว่ามันเก่าไปแล้วนะ Avoid using it เขาบอกว่าอะไร Short hand that's all อธิบายนะครับ เขาบอกว่าให้ใช้เป็นอะไร ให้ใช้เป็น grid column gap หรอ อ๋อหรอ กด Column Gap อ้าว ก็อันนี้เหมือนกัน หรือว่า ใช้ Column Gap อ่ะ Column...
Column... เดี๋ยวนะ Column...อ้อ นี่เหรอ Column Gap นะครับ สัก...อ่ะลองๆ ใช้ได้ป่ะ อ้าว ใช้ได้เหมือนกัน งั้นใช้เป็นอันนี้ก็ได้ครับ ผมสงสัยมานานว่า...เอ๊ะ แต่มันก็ยังใช้ได้อยู่นะ เออ แต่ไม่รู้ว่ามีปัญหาอะไรหรือเปล่า อ่ะ Column Gap 2 Rem เห็นป่ะ มันก็จะมี Space อ่ะลองดูของตัวเอง ใช้ได้กัน 2 แบบ เออ ใช้ได้กัน 2 แบบ แต่ใช้อันนี้ดีกว่า เพราะว่า... อันนี้ก็ยังให้ใช้ Column Gap ใช่ถูก ตอนนี้มาที่ Title มันชื่อคลาสว่าอะไร Block Title เรามาเพิ่ม Margin ให้มันนิดนึง ด้านล่าง Block Con นะครับ Block Title Margin บนล่าง 2 เบิร์มซ้ายขวา 0 ให้มันมี Space นะครับ เดี๋ยว ผิดป่ะ ล่างเลยครับ ล่างๆเลย ต่อจาก BlockCon เนี่ย นี่ เออ นั่นแหละ เพราะมันอยู่ข้างใน BlockCon เอ้ย เออ ไม่เป็นไร จริงๆ มันจะเขียนตรงไหนก็ได้ แต่ว่าทำเรียงมามันก็จะดี ให้มันดูง่ายเนอะ เออ ให้มันแบบเป็นลำดับ แต่นี่ก็ได้ Block Title โอเค ลองกด save ดูมันก็จะมี space ของ title อ่ะขึ้นมา อ่า เห็นปะ แต่ทีนี้นะครับ มีจุดไหนที่เราควรแก้ก็คือ จริงจริงมันก็เป็นอะไรเล็กเล็กน้อยน้อย แต่ก็ควรทํานะ ก็อย่างเช่น ไอ ใน นะครับ เดี๋ยวเรามาเข้าถึง อีเทม เอส ฟอร์ ผมจะมีบนล่างให้มันสัก เอา margin-top 1 rem นะครับ แล้วก็ block-item แท็ก p มี margin บน ล่าง 1 rem ซ้ายขวา 0 จากนั้น block-item แท็ก a นะครับ กำหนด display เป็น inline block color เป็นสีขาว background color เป็นสีส้ม แล้วก็จะมี padding 0.5 ซ้ายขวา 1 ก็เขียนเรียงตามนี้เลยครับ h4 ก่อน ลองกด save นะ เห็นป่ะ เดี๋ยวเราเอาอันนี้ออก check decoration on border radius 5 นี่ครับ ก็เขียนตามมาได้เลย มีแถบพีด้วยนะ นี่แถบพีด้วยตรงกลาง เดี๋ยวเข้าเขียนค่ะ กินน้ำเปล่า แท้เอ่ย ดีสเปรก มันเหมือน Text Decoration นั่น ก็มี border radius 5 pixels อ่า ทีนี้ก็มาดูครับที่หน้าเว็บนะ มันก็จะได้หน้าตาเป็นแบบนี้ สวยแล้วนะ ใช่สวยแล้ว ทีนี้ก็มาทำส่วนต่อไปเลย ก็คือเป็น เป็น folder folder นี้มันจะมีด้านบนกับด้านล่าง อันนี้คือด้านบน อันนี้ด้านล่าง ก็มาเลยนะครับ เดี๋ยวเรามา สร้าง ใช้ tab folder เลย แล้วผมจะมี ผมจะมี container แล้วก็เราจะมีฟูลเดอร์ top กับฟูลเดอร์ bottom แบ่งอย่างนี้เลยนะครับ เราจะมีกล่องใหญ่ๆก่อน หอมมัน 2 ตัวนี้ ก็จะมีกล่องข้างในก็คือ จะเป็นตัวนี้ เอ้ย เดี๋ยว จริงๆอ่ะ เดี๋ยวๆๆๆ อย่างนี้ดีกว่า เพราะว่ามันจะต้องมี container ใช่ป่ะ เราใช้เป็น class นะครับ ฟูลเดอร์ top ก็ได้ แล้วก็ ฟูลเดอร์ bottom ก็คือ อันเนี้ยด้านบนใช่ปะ ไอ้สีดําเนี้ยด้านบนอันนี้ด้านด้านล่าง นะครับ จริงจริงถามว่ามันก็ใช้ ฟูลเตอร์ก็ได้นะ แต่ว่าเอาเป็นอย่างงี้ก็ได้ ด้านบนเนี่ย เดี๋ยวทำด้านบนก่อนนะ ด้านบนมันก็จะมีอะไร มันจะมี container ข้างใน container ก็จะมี footer-top-con นะครับ แล้วมันก็จะมี 3 คอลัม เห็นป่ะ มันก็จะอารมณ์คล้ายๆกับตัวนี้เลย มันมี 3 คอลัมเนี่ย เราก็สร้างขึ้นมา footer-top-item อย่างเนี่ย อ่ะ เดี๋ยว เขียนตามนี้ก่อน เดี๋ยวข้อมูลเข้าไปใส่ วางโครงสร้างมันมาก่อน ชมของอีก��ล้วเหรอ ไม่โทรสับค้าบ่อยจังวันนี้ ไม่เป็นไร รับได้ เบอร์ใคร ไม่รู้ เบอร์แปลก Course Center หรือเปล่า Course Center Course Center ห้า ต่อไปอะไร Fooder Top Con คอนที่ผมใช้เนี่ยก็คือมันยอมมาจากคอนเทนเนอร์แหละนะฮะ แต่เขียนสัดสั้น ชื่อคล้ามันจะตั้งยังไงก็ได้ เอาให้มันสื่อความหมายเรา นะครับ เหมือนกับการตั้งชื่อต่อไป หลายคนก็จะมีปัญหาเรื่องการตั้งชื่อคลาสต์ ตั้งชื่อต่อแปลอะไรพรุ่งนี้ Food the Top Item โอเค ทีนี้เราก็มาไอเทมตัวแรกมันมีอะไร Ladies Post นะครับ ซึ่งตรงนี้จะเป็นส่วนที่เยอะที่สุดแล้ว มากกว่าแต่ละส่วนเพราะดูข้อมูลข้างในมันมันจะมีหลายตัว ก็มาทำกัน Fooder Shop Item ตัวแรกนะ ตัวแรกตรงนี้ก็คือมันจะมีอะไร จริงๆมันก็มีกล่องข้างในมันนะ สังเกตป่ะ แต่ว่าเดี๋ยวเรามา เรามาใช้ Edge 4 แล้วกัน เขียนว่า Latest Post นะครับ ทีนี้ข้างในเนี่ย มันก็จะต้องมี Container อีกนะ มันก็จะเป็น Footer Top Item Con โอ้โห นะฮะ ค่อนข้างจะซับซ้อนแต่ เดี๋ยวจะพาทำให้ดู อ่า เขียนตามมาผมเลยนะครับ ก็มันจะมีเป็น Date กับ ตัดจาก Edge 4 ลงมาครับ ต่อจาก Edge 4 ใช่ มันมีอันนี้ก่อนนะ ฟูเดอร์ท็อปไอเทมคอนนะ ฟูเดอร์ท็อปไอเทมคอน แล้วย้ายเดทไปข้างในครับ เห็นป่ะ Date มันอยู่ข้างในนะ สังเกตดู ตัดอันนั้นมาคอบมันก็ได้ นี่ทำอย่างนี้ก็ได้ มันจะอยู่อย่างนี้ แล้วก็สร้างอินโฟล์มาอีกตัวหนึ่ง ต่อจาก Date ข้างใน date มันจะมีอะไร มันจะมีเขียนว่า July July 27 แล้วก็มันจะมีข้อความตรงนี้ ผมจะใช้เป็น span แล้วกัน สแปนเป็น Class Info Title เขียนว่ารอเริ่มสัก 5 คำนะครับ แล้วก็มีสแปนอีกตัวนึง เห็นป่ะ ตรงนี้มันจะซับซ้อนกว่าเพื่อนเลย Info Desk เดี๋ยวนะ ก็มีรอเริ่มสัก 6 คำ ประมาณนี้ เดี๋ยวไฮไลท์ให้ก็คือจะเป็นตัวนี้ ข้างใน อันนี้ข้างใน เดทมั้ย เออ ข้างในเดท ข้างในเดทก็คือตามนี้ BR คือเป็นการตับบันทัศน์ข้อความ แล้วก็ข้างใน info มี span ครับ มี span class info title span แล้วจุด จุด อินโฟล์ไทดล์ -ไทดล์ แล้วก็แท็บ อ่า แล้วก็รอลืม 5 คำ 5 เลข 5 Enter อ่ะ อีกตัวนึง Span อันนี้ Roll'em 6 คำ Roll'em ทีนี้เราก็ Copy ตัวนี้เลย ไอตัว Folder Top Item Con Copy มา เพราะว่ามันมี 3 ตัวใช่ป่ะ เราก็ Copy มา นั่นแหละอีก Diff อีกตัวนึง Copy มา วางต่อเลยอีก 2 ตัว โอเค เราวาง อ่า นะครับ ทีนี้มาดู เห็นบ้านเราก็จะได้แบบนี้มา โอเค ซึ่งถ้าเราวางโค้งอิชทีแมลถูก มันจะเขียนซีเอสไม่ยากนะครับ ก็อันนี้แหละ ถูกต้อง ทีนี้ต่อไป อ่า อ่า นี่ไม่มีอะไร ก็คือมาที่ ตัวที่สอง เดินลงมาครับ อ่า ตัวที่สอง อันนี้มันจะมี H4 เราก็จะเขียนว่า About แล้วก็จะมี Tab P เลยสัก 50 คำพอแค่นี้เอง อันนี้ตัวที่ 2 มันไม่มีอะไรมาก ก็พี่พี่ครับรอลล์ลึมสัก 50 10 คำ 50 คำ 50 เค แล้วก็สุดท้ายครับ ตัวที่ 3 ตัวที่ 3 เนี่ย ใช่ ตัวที่ 3 นี้มันก็จะมีอ่านมีเอชโฟแล้ว stay connect ใช่ป่ะ connect แล้วก็มันจะมีอะไร มันจะมีเป็นไอคอนใช่ไหมฮะ เออเป็นไอคอน จริงๆตรงเนี้ยถ้าจะทำให้ง่ายเลยนะ มันก็มีวิธีทำให้ง่ายอยู่ก็คือเราอาจจะใช้เป็นแท็กพีก็ได้ 4 ตัวนะ แล้วก็เขียนว่า facebook นะครับ เขียน facebook เขียนว่า twitter เดี๋ยวไอคอนเราค่อยไปใส่เขียนอันนี้ก่อน rss แล้วก็ Google Plus นะครับ อันนี้คือแบบวิธีที่ง่ายที่สุดล่ะ นะ จริงจริงถามว่ามันมันก็ทําได้หมด แต่อันนี้แบบส่วนผมเสนอวิธีที่ง่ายในการทํา ก็ Google Plus ก็ผิด Google Good ตัวดีไม่มีครับ Google Plus โอเค เสร็จแล้วด้านบน ทีนี้เราก็มาเขียน css กันครับ ความมันจะบังเกิด เราก็มาที่ตัว folder top เลย เข้าถึง class folder top folder top กำหนดนะฮะ อันนี้มันจะมี ผมเดาๆว่า padding น่าจะ 3 rem นะ แล้วก็ background color เป็น 333 สี font ข้างในเป็นสีขาวนะครับ นี่ครับ ก็ประมาณนี้เห็นป่ะ แต่ทีนี้เดี๋ยวมันมีมาร์จินด้านบนด้วย มีระยะหาวนิดหนึ่ง นี่ครับ เอาถึง ClassFooder Top Colour เอฟ เอฟ เอฟ เอฟ เอฟ เอฟ เอฟ เอฟ เอฟ เอฟ เอฟ เอฟ เอฟ เอฟ เอฟ เอฟ เอฟ เอฟ เอฟ เอฟ เอฟ เอฟ เอฟ เอฟ เอฟ เอฟ เอฟ เอฟ เอฟ เอฟ เอฟ เอฟ เอฟ เอฟ เอฟ เอฟ เอฟ เอฟ เอฟ เอฟ เอฟ เอฟ เอฟ เอฟ เอฟ เอฟ เอฟ เอฟ เอฟ เอฟ เอฟ เอฟ เอฟ เอฟ เอฟ เอฟ มี 3 Column นะครับ แล้วก็มี Column Gap ประมาณ 2 Rem คิดว่าน่าจะได้อยู่ นี่ โอเค อะ มีอะไรหรอ?
ไม่มีอะไรครับ มองหน้าเฉยครับ ยิ้มทำไม? ยิ้มใกล้เสร็จแล้วไง เพราะว่าเราถือว่า Upgrade นะครับ Upgrade Skill โอ้ว อันนี้บอกเลยว่าได้เยอะเลย เริ่มเข้าใจมากขึ้นไหม เออ ใส่หน้า มันต้องลองให้ทำเอง ต้องลองให้แบบ แก้ปัญหาเอง มีคนพาฝึกบางทีมันมันก็เข้าใจแต่มันยังไม่ลึกไม่ลึกซึ้ง เดี๋ยวเขียนผิดครับ เขียนผิด เพราะเออผมแนะนํานะ อันนี้เผื่อใครดูวีดีโอนี้นะครับ ใครอยากจะแบบเขียนหน้าเว็บเก่งเก่งไปรับงานไปหาเงินชิวชิวแบบเป็นยอดฝีมืออ่ะ ทุกคนจะทําตามผม คือทําตามได้แหละในช่วงแรกอ่ะ ฝึกพื้นฐานอะไรอย่างเงี้ย แต่ถ้าถ้าเกิดอยากจะทําอะไรที่มันซับซ้อนหรือเข้าใจอะไรก็ต่างให้มันมากขึ้นอ่ะ ทุกคนต้องลองไปฝึกเอง แล้วก็หาโปรเจคอะไรทําเองนะครับ ฝึกแก้ปัญหา มันถึงจะเก่งขึ้นได้ อ่ะ ทีนี้ อ่า เราได้ เห็นไหม สาม ข้อ ล่าม และ เห็นป่ะ ที เนี้ย เราก็ มา ทํา เลย อันนี้ ครับ มา ทํา อันนี้ ก่อน เลย เนี้ย มันเป็น ส่วน ที่ ถามว่า มัน ซับซ้อน ไหม มัน มัน ก็ ไม่ ซับซ้อน แต่ สําหรับ มือ ใหม่ มันจะ งง มัน งง เพราะ อะไร มัน งง เพราะ อัน ยัง มอง มัน ยัง มอง โค ร ง สร้าง หรือ รูป แบบ ไม่ ออก นะครับ แต่ ตรงนี้ ง่าย เลย นะครับ ก็คือ เดี๋ยว มันจะ มี อะไร มันจะ มี ใช่ป่ะ ซึ่ง ก็คือ จะเป็น แต่ละ ตัว มัน ใช่ไหมฮะ ก็คือ เป็น ของ พวก พวก element พวกเนี้ย แต่ทีเนี้ยผมจะเข้าถึงตัวนี้เลย Fooder Top Item Con แล้วก็บนดดิสเพลย์เป็น Grid นะครับ Fooder Top Item Con บนดดิสเพลย์เป็น เอ้ย เป็น FLEG เออ เป็น FLEG นะ เห็นป่ะ มันจะขึ้นมาต่อกัน อ่า มันจะได้ลักษณะแบบนี้ อ่ะ เขียนตามเลยครับ ทีนี้มีอะไร Date ใช่ป่ะ อ่ะ เขียนตามก่อน ไปที่ CSS อย่างที่ผมบอกนะครับว่าถ้าเราวางโครงสร้าง html ถูกต้องเนี่ย สิดอัดจะไม่มีปัญหาเลยนะครับ หน้าเว็บคือมันจะเป็นไปตามที่เราสั่ง เห็นผิดลืมไอเทมอ่ะ ไอเทม โอเคกำลังดิสเพลย์เป็น flex นะครับ ดิสเพลย์เป็น flex Display Flex ทีนี้นะครับ เราจะเห็นว่ามันจะมี Date คือมันเป็นพื้นหลังสีขาว ตัวอักษรสีดำ เราก็เข้าถึงเลย ก็คือจะเป็นตัวนี้ ผมก็จะเข้าถึงผ่านทางตัวนี้ก่อน ก็คือ ฟูลเดอร์ top item คอน แล้วก็ date กำหนด background color นะครับ น่าจะเป็น f0 f0 f0 ใช่ปะ ที่เราใช้กับ background แล้วก็ color นะครับ สีฟ้อนต์ 33 มี padding สัก 1 rem ลองมาดู เอาสัก 0.5 ดีกว่า จะเยอะไป มี border radius สัก 5 พิกซิลนะคิดว่า ประมาณนี้ครับแล้วก็มีเช็ค align center เห็นป่ะก็จะได้ประมาณนี้ แล้วเราก็อาจจะมีแบบเป็นอะไรอ่ะ เดี๋ยวนะ อ่ะเขียนตามก่อนนะครับ Border radius 5px Text line center ถูกแล้ว Center Margin right 10px อ่า โอเคทีนี้ลองมาดูหน้าเว็บ เห็นป่ะ กดเซฟยัง เขียนผิดเห็นมั้ย อ่า ดู อ่าแฟนผมเขียนเป็นคอมนะครับทุกคนตรงเนี้ย เขาเขียนเป็นคอมแต่จริงๆมันเป็นคอนนะ เห็นป่ะ ตาเหยียว ตาเหยียว ตาไว เพราะว่า อ่าเห็นมั้ยมันก็จะได้แบบนี้ เห็นป่ะ ทีนี้มันก็ เดี๋ยวมันจะต้องมี space ด้านบนนิดนึง เดี๋ยวเรามาที่ อ่า ฟูลเดอร์ top itemcon นะครับ กําหนด margin top หรือจริงจริง bottom ก็ได้ เฮ้ย ให้ผมดูก่อน เอาทั้งบนล่างเลยดีกว่า margin อ่า บนล่างสักหนึ่ง rem ซ้ายขวาศูนย์นะครับ นี่มันก็จะมี space เห็นไหม อ่า มันก็จะเหมือนตัวอย่างเลยเว้ย นี่ประมาณนี้นะครับ นี่ค่ะ ที่ ฟูเดอร์ top itemcon มาจิ้นบนล่าง 1 เริม ซ้ายขวา 0 โอเค อ่ะ ทีนี้ต่อไปก็คือมาถึงในส่วนของ About นะครับ About ก็ไม่มีอะไรมาก เ���าจะเข้าถึง เอ่อ เดี๋ยวนะ ซึ่งไอเนี้ย มันมันชื่อคลาสเหมือนกันเลย เห็นไหม มันมีสาม มันมีสามตัวใช่ปะ เราจะเข้าถึง ที่เป็นตัวที่สองได้ยังไง ก็มาดูกัน ก็คือทำอย่างนี้เลย เดี๋ยวเราจะเข้าถึง Fooder Top Item แล้วก็จะใช้ตัวนี้ครับ ก็คือจะเป็น EnthShout ตัวที่ 2 มันก็จะไปเลือกตัวที่ 2 ตัวนี้ ทำไมต้องทำอย่างนี้ ก็เพราะว่าชื่อคลาสมันเหมือนกันไง เพราะ อ้าว ถ้ามันเหมือนกันแล้วเราจะเข้าถึงตัวนี้ได้ไง อีกวิธีหนึ่งที่ทำได้ก็คือ จริงๆเราอาจจะกำหนดชื่อคลาสมันก็ได้ อันนี้ก็ได้เหมือนกันนะ แต่ว่าอมสอนวิธีนี้ก็ได้เหมือนกัน ก็คือเลือกตัวที่ 2 แล้วก็อมจะเข้าถึง H4 ของมัน ก็คือเป็น H4 ของตัวเนี้ย อ่า แล้วก็กําหนด Margin Bottom สัก 2 Rem นะครับ เห็นปะ มันก็จะเข้าถึงตัวที่ 2 อ่า H4 ของมันเนี้ย เดี๋ยวเอาสัก 1 Rem ก็ได้ เห็นไหม ก็จะได้แบบนี้นะครับ อ่ะ เขียนตามเลย อันนี้มันจะเรียกว่าเป็น Pseudo Class นะครับผม เฮ้ย ใช่ป่ะวะ น่าจะใช่แหละ ถ้าจำไม่ผิดผมก็ลงๆลืมๆไปบ้าง แต่คิดว่าน่าจะใช่เดี๋ยวมาชี้ก็ได้ มาชี้ดูนะครับ Selector Specificity จริงๆก็ไปถามอันนี้ก็ได้ครับ ChatGPT หรือไปถาม Document ก็ได้ เดี๋ยวผมเสิร์ชให้ดูเลย เดี๋ยวให้เขียนเซ็ตก่อนนะครับ Enth Shell ตัวที่ 2 แล้วก็ไปเข้าถึง H4 ของมันนะครับ แล้วก็ Margin Bottom 1 Gram Margin อะไรนะ Bottom ก็คือด้านล่าง โอเค มันก็จะได้แบบนี้ ทีนี้ก็คือต่อไปนะครับ เป็นสุดท้าย ตัวสุดท้ายก็คือเป็น Fooder Top Item ตัวที่สุดท้าย เดี๋ยวอันนี้ Copy ตรงนี้มาเลย ก็จริงๆเหมือนกันเลยฮะ ไม่ได้มีอะไรเลย แค่นี้ หรือเราจะเขียน เขียนแบบนี้ก็ได้ ห้ะ กด Z ย้อนคืนได้ อีกวิธีนึงคือ มันสามารถทำอย่างนี้ได้นะครับ ใส่คอมมาแล้วก็ เอาตัวนี้มา มันก็จะมี Space แต่ทีนี้จะเอา Icon ด้วยป่ะ เอา Icon ด้วยก็คือ เดี๋ยวไปที่ตัวนี้เลยครับ Flaticon เว็บไซต์นี้นะฮะ เอ้ยใช่ป่ะวะ หรือว่า Icon 8 วะ เพราะว่ามันจะมีให้เราเนี่ยสามารถเดี๋ยวดูตัวนี้ก่อนลองพิมพ์ Facebook Facebook ลองเป็นตัวนี้มันก็ปี้เป็นอันนี้มาได้ไหมไม่น่าจะใช่ตัวนี้น่าจะเป็นตัวนี้มา อันนี้นะครับ ก็ปี้ svg code link เดี๋ยวเราเอามาใช้ให้ดูก่อน อ้าว มีราคาด้วยหรอ free icons for website มันใช้เป็นเว็บอะไรวะ ก็นี่ไง flaticon นะครับ เดี๋ยวลองมาที่ icon see popular icon เดี๋ยวผม ผมจำได้ว่ามันเป็นตัวนี้แหละ ลองตัวนี้นะฮะ แล้วก็ อ้าว บวกปะวะ ไม่ใช่ อ้อนี่ไง ไม่ใช่ svg อันนี้เสียตังค์ add to collection หรือเราจะใช้เป็นในนี้ก็ได้นะ ผมรู้แหละ free html icon ลองเสิร์ชดูก่อน font awesome นี่ก็ใช้ได้เหมือนกัน Font Awesome Web Application Icon เนี่ย นี่ครับ เดี๋ยวมาดูว่ามันมี Facebook เปล่า มีป่ะว่ะ Web Application Spinner เดี๋ยวเรามาใช้ดูก็คือให้เรามา Copy ตัวนี้เลยนะ คิดว่าน่าจะเป็นตัวนี้ ก็ก็ปรีมมาครับมาใช้ที่ Index เดี๋ยวผมลองลองเทสให้ดูก่อนทีนี้ก็ลองมาใช้เป็น Icon Web Application ช่วยอ่อนี่มันมีตัวนี้อยู่นี่ว่ะ น่าจะเป็นตัวนี้ โอเค อันนี้ไม่ต้องงงนะครับ ผมลองดูเฉยๆ เดี๋ยวตัวไหนได้ก็จะบอกว่าตัวไหน เดี๋ยวผมแปะลิงค์ไว้ให้ แล้วก็เป็นตัวนี้ ลองมาใช้ดู ใช้ที่ Facebook แบบนี้นะครับ ใช้งานได้ บาร์ไอคอนนะครับ ทีนี้เดี๋ยวให้ทุกคนมาใช้ด้วยนะครับ เดี๋ยวอมส่งลิงค์ตัวนี้ให้ ทีนี้ก็มาต่อนะครับ เราจะใช้ font awesome นะ แล้วก็เราจะไปหา icon facebook มา นี่เห็นปะมันจะมีตัวนี้ เดี๋ยวเอาเป็นตัวนี้แล้วกัน facebook square เดี๋ยวให้ตัวเองเขียนตามเลยก็ได้ เดี๋ยวเราจะเอามาใส่ที่ตัวนี้นะครับ ก็คือพูดง่ายๆว่าให้ทุกคนเนี่ยไปเอาเดี๋ยวผมแปลลิงค์ไว้ให้นะลิงค์ตัวเนี่ยก็คือเอาลิงค์ตัวเนี่ยมาใส่ด้านล่างของ css ที่เราลิงค์มานะครับแล้วก็สามารถใช้งานไอคอนได้เลยซึ่งไอคอนมันก็ใช้เป็นแท็กไอ ลองมาดูหน้าเว็บเห็นป่ะก็จะมีไอคอน facebook ปรากฏออกมานะครับลองพิมพ์ตามเล็กก็ได้เนี่ยสร้างแท็กไอขึ้นมา หรือจริงๆเดี๋ยวผมพาไปที่เว็บนี้ดีกว่าจะได้ง่าย มันก็คือ เดี๋ยวผมเข้าให้ เป็น fontawesome.com slash v4 slash icons นี่ครับ เราก็สามารถเสิร์ชได้เลยอย่างเช่นเสิร์ชไอคอน facebook อ่า มันก็จะมีเดี๋ยวคลิกเปิดแท็บไมค์ แล้วก็กรอบตัวนี้มาเลย กรอบมาแล้วก็มาใส่หน้าตรงนี้ นี่ อ่า โอเค ทีนี้ต่อไปคือไลน์ icon twitter นะครับ แล้วก็เข้ามา นี่ทุกคนเข้ามาเว็บตามผมก็ได้นะ ถ้าใครอยากเสิร์ชไลน์ icon นะครับ twitter twitter อ่า นี่เอาเป็นตัวนี้ ปีมา ตัวนี้ คลิกขวาเปิดแท็ปใหม่นะ แล้วก็ RSS วางข้างหน้าเลยครับ นี่ ไม่ใช่ ข้างในแท็ก P อยู่ข้างหน้าตัวอักษรน่ะ นี่ อ่า ถูก แล้วก็ต่อไป Google Plus นี่เป็นตัวนี้ เอามาใส่เสร็จเห็นป่ะ ก็จะมีไอคอนมาทุกตัวเลย ทีนี้ก็เหลือ เอ้ะ ฟูตเตอร์ง่ายๆเลยนะครับ ซึ่งไอตัวไอคอนพวกเนี้ยมันจะไม่มีสีใช่ปะทุกคนสังเกตนะ มันไม่มีสี ถ้าเกิดอยากใส่สีจริงๆเราก็สามารถเขียน css เข้าไปเลย อย่างเช่น color blue อะไรเงี้ย เห็นปะมันก็จะเป็นสีอะไรเงี้ยนะครับ อันนี้ยกตัวอย่างให้ดูก็ไปลองหาสีเอาก็ได้ อ่า นั่นครับใช่ โอเค ก็ก็มีมา ใส่ไป อ่า เห็นไหม มันก็จะมี ไอคอนแล้วนะครับ ลองมาดูที่หน้าเว็บ อ่า เห็นป่ะ ทีนี้สุดท้ายแล้ว เสร็จ ง่ายง่ายเลย อ่า ด้านล่างตรงนี้ก็เดี๋ยวมาที่ นะครับ สร้าง ขึ้นมา เขียนว่าอะไร ก็ ปี ไวท์ อ่า 2022 แล้วก็ All right Reserved Bloom Web Design อะไรประมาณนี้ อ่ะเรียบร้อยแค่นี้ Folder Bottom แล้วก็เราไปเขียน Cs เราถึง Folder Bottom background ก็น่าจะเป็น F0 F0 F0 มี padding 1rem text-align with center ก็น่าจะเสร็จ นี่เห็นปะเรียบร้อย เขียนตามเลยครับ Fooder bottom สร้างขึ้นมาหรือยัง ก็สร้างต่อจาก TagLibs ตัวนี้เลย สร้างคลาชชื่อว่า Fooder bottom ขึ้นมา เขียนผิดนะ Bottom อะ Booton ตัว M ตัว M ครับ ข้างในก็จะมี Tag P เดี๋ยว ผิด ผิด หรือ คอตรงนั้น Copyright Copyring G.H.T. ครับ G.H.T. G.H.T. 212 จุด จุดอยู่นี่นะ ใกล้ๆเลยนะ ถ้าต้องรีบ เอา Write Ght Reserved ER VED Bloom Web Design เว็บนะไม่ใช่เว็บ D D คือ D E ครับ D ไซม์ โอเค แล้วก็มาที่ CS ก็เขียนแค่นี้ครับ สุดท้าย สุดล่างเลย Fooder bottom ไง background-color เอ่อ F0 แล้วก็ padding ถึงเวลา textalize center finished textalize center อ่า เรียบร้อยนะครับทุกคน โอ้โห ถือว่า นี้น่ะ ก็คิดว่าน่าจะใช้เวลาพอสมควร นะครับ นี่เห็นป่ะ เราก็ได้ทําการ หน้าเว็บนะครับ อาจจะไม่ได้เหมือนเป๊ะ แต่คือก็ประมาณแปดสิบ แปดสิบเก้าสิบเปอร์เซ็นต์ มันแค่มีรายละเอียดเล็กๆน้อยๆนะที่เราไม่ได้ทํา แต่ว่าเอาเป็นว่าก็ เสร็จเรียบร้อยนะครับทุกคน อ่ะ ก็นี่นะฮะ หวังว่า ทุกคนนะครับจะได้ความรู้ไปไม่มากก็น้อยนะครับ ไว้เดี๋ยวเจอกัน วีดีโอหน้านะครับ มาดูว่าเดี๋ยวผมจะสอนอะไรอีกนะ ซึ่งผมก็คิดว่าจะสอนไปเรื่อยนะครับ สําหรับวีดีโอนี้ครับ หากชอบก็อย่าลืมกดไลค์ กดซับบอคไครบ์นะครับ แล้วรอติดตามชมวีดีโอตอนต่อไปนะครับ นะฮะ แล้วเจอกันใหม่วีดีโอหน้านะครับผม ไปล่ะ บ๊ายบายนะครับผม