เรียนรู้ CSS Flexbox บน Lynda.com

• อาจ 17, 2024

หลังจากสิบปีซึ่งเป็นอายุการใช้งานบนเว็บเราตัดสินใจที่จะให้รูปลักษณ์ใหม่ของเว็บไซต์ MUSED Literary Review แน่นอนเราต้องการใช้ HTML และ CSS ใหม่ล่าสุดและนั่นหมายถึงการใช้ Flexbox, CSS Grid และ Responsive Web Design

ขอบคุณ Lynda.com มันใช้เวลาไม่นานในการเร่งความเร็ว ด้านล่างนี้เป็นบทเรียนวิดีโอที่ดีที่สุดที่ช่วยให้ฉันออกแบบรูปลักษณ์ใหม่สำหรับ MUSED

เลย์เอาต์ตอบสนองขั้นสูงด้วย CSS Flexbox
Morten Rand-Hendriksen
ในหลักสูตรที่เน้นโครงงานนี้ผู้เขียนจะนำคุณไปทีละขั้นตอนในขณะที่เขาสร้างเมนู Flexbox, เลย์เอาต์การ์ดที่ตอบสนอง, เลย์เอาต์ Holy Grail และส่วนประกอบแบบอินเทอร์แอคทีฟ

CSS เลย์เอาต์ขั้นสูงพร้อมกริด
Morten Rand-Hendriksen
คุณจะได้เรียนรู้มากมายในหลักสูตรนี้ ผู้เขียนเริ่มต้นด้วยพื้นฐานของ CSS Grid และการวางแผนเค้าโครงตาราง จากนั้นคุณก็พร้อมที่จะสร้างเลย์เอาต์แบบหลายคอลัมน์และเลย์เอาต์แบบเต็มคอลัมน์เดียว ถัดไปคุณเรียนรู้วิธีออกแบบเลย์เอาต์การ์ดต่าง ๆ และแผงการนำทางนอกหน้าจอที่เลื่อนเข้ามาดูเมื่อจำเป็น

การฝึกอบรม CSS Essential 3
Christina Truong
ในหลักสูตรนี้คุณจะได้เรียนรู้การใช้ CSS Grid และ Flexbox เพื่อสร้างเค้าโครงตอบสนอง นอกจากนี้คุณยังจะได้เรียนรู้เกี่ยวกับวิธีการเตรียมภาพเว็บของคุณสำหรับจอแสดงผล Retina และภาพเวกเตอร์ SVG จากนั้นผู้เขียนจะย้ายไปที่ภาพเคลื่อนไหว CSS แบบง่ายการตอบสนองและการเข้าถึงที่ง่าย

CSS Flexbox ดูครั้งแรก
James Williamson
หลักสูตรนี้จะนำคุณไปทีละขั้นตอนในขณะที่คุณเรียนรู้ไวยากรณ์ทั้งหมดสำหรับ CSS Flexbox เค้าโครงโมดูล ผู้เขียนกล่าวถึงสิ่งที่ Flexbox สามารถทำได้และเบราว์เซอร์ปัจจุบันรองรับ จากนั้นเขาจะกล่าวถึงหัวข้อต่างๆอย่างละเอียดเช่นการไหลขององค์ประกอบเนื้อหาการตัดการจัดรายการและการจัดเรียงคอนเทนเนอร์แบบยืดหยุ่น

CSS Grid ดูครั้งแรก
Morten Rand-Hendriksen
ในหลักสูตรนี้คุณจะได้เรียนรู้วิธีใหม่และปรับปรุงในการสร้างเค้าโครงกริดสองมิติ เริ่มจากพื้นฐานการใช้ CSS Grid เพื่อสร้างเค้าโครงกริดที่ตอบสนองได้ผู้เขียนจะครอบคลุมสิ่งที่คุณจำเป็นต้องรู้เพื่อสร้างทั้งนิตยสารออนไลน์และเค้าโครงสามคอลัมน์

สร้างแบบฟอร์มตอบสนองด้วย Flexbox
James Williamson
คุณไม่สามารถออกแบบเว็บไซต์โดยไม่มีแบบฟอร์ม แบบฟอร์มจำเป็นต้องตอบสนองต่อทุกประเภทและขนาดของหน้าจอเหมือนกับส่วนที่เหลือของไซต์ Williamson สอนวิธีใช้โมเดล CSS Flexbox box เพื่อสร้างและกำหนดรูปแบบเว็บที่ตอบสนอง เขาเริ่มต้นด้วยรูปแบบการค้นหาที่เรียบง่ายและสร้างรูปแบบคอลัมน์ขนาดใหญ่สองรูปแบบ

รูปภาพตอบสนอง
Morten Rand-Hendriksen
หากคุณใช้ Wordpress คุณจะรู้ว่ามันจะสร้างภาพขนาดแตกต่างกันโดยอัตโนมัติสำหรับแต่ละภาพที่คุณอัปโหลดไปยังระบบ ทำไม? หลักสูตรนี้จะอธิบายแนวคิดเบื้องหลังภาพตอบสนองและวิธีใช้บนเว็บไซต์ของคุณเอง

คำแนะนำวิดีโอ: A hilarious celebration of lifelong female friendship | Jane Fonda and Lily Tomlin (อาจ 2024).