หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ซอร์สโค้ดอื่น ๆ
ดาวน์โหลด

บทที่ 02 การบ้าน CSS และ bootstrap: ผลงานตอบสนอง

การออกแบบที่ตอบสนองทำให้มั่นใจได้ว่าเว็บแอปพลิเคชันนั้นให้บริการได้ดีกับอุปกรณ์และขนาดหน้าต่างหรือหน้าจอที่หลากหลาย ในฐานะนักพัฒนาซอฟต์แวร์คุณอาจถูกขอให้สร้างแอปพลิเคชันมือถือเป็นครั้งแรกหรือเพิ่มการออกแบบที่ตอบสนองต่อแอปพลิเคชันที่มีอยู่

ทิศทาง

  1. ใช้เฟรมเวิร์ก Bootstrap CSS เพื่อสร้างพอร์ตโฟลิโอที่ตอบสนองต่อมือถือ คุณส่งมอบสิ่งนี้ได้อย่างไร?
  2. สร้างไฟล์ไฟล์ต่อไปนี้:
  1. การใช้ bootstrap พัฒนาไซต์พอร์ตโฟลิโอของคุณด้วยรายการต่อไปนี้ Navbar b. เค้าโครงที่ตอบสนองได้ ภาพตอบสนองพอร์ตโฟลิโอ Bootstrap ควรลดการใช้การสืบค้นสื่อให้น้อยที่สุด

คำแนะนำ

    • ใช้ระบบกริดของ Bootstrap (คอนเทนเนอร์แถวและคอลัมน์)
    • บนหน้าจอ xs เนื้อหาควรใช้ทั้งหน้าจอ บนหน้าจอ sm และหน้าจอที่ใหญ่กว่าคุณควรมีระยะขอบด้านซ้ายและด้านขวาของหน้าจอ ตรวจสอบเว็บไซต์ต่าง ๆ บนอุปกรณ์มือถือของคุณกับคอมพิวเตอร์ของคุณเพื่อดูตัวอย่างความแตกต่างเหล่านี้
  3. ใช้บริการตรวจสอบ HTML เพื่อให้แน่ใจว่าแต่ละหน้ามี HTML ที่ถูกต้อง ขนาดเล็กพิเศษ <576px ขนาดเล็ก≥576pxสื่อ≥768pxขนาดใหญ่≥992pxขนาดใหญ่พิเศษ≥1200px. container 100% 540px 720px 960px 1140px .container-sm 100% 540px 720px 960px 1140px. 1140px .Container-lg 100% 100% 100% 960px 1140px .Container-XL 100% 100% 100% 100% 100% 1140px.

ข้อกำหนดขั้นต่ำ

o แอปพลิเคชั่นที่ใช้งานได้และที่เก็บของ GitHub พร้อม readMe ที่อธิบายโครงการ o navbar จะต้องสอดคล้องกันในแต่ละหน้า o NAVBAR ในแต่ละหน้าจะต้องมีลิงก์ไปยังหน้าแรก/เกี่ยวกับหน้าติดต่อและพอร์ตโฟลิโอ o ลิงก์ทั้งหมดจะต้องใช้งานได้ o ต้องใช้ความหมาย HTML o แต่ละหน้าต้องมี HTML ที่ถูกต้องและถูกต้อง (ใช้บริการตรวจสอบความถูกต้อง) o ต้องมีข้อมูลส่วนบุคคลของคุณ (ชีวภาพชื่อรูปภาพลิงก์ไปยังโซเชียลมีเดีย ฯลฯ ) o ต้องใช้ส่วนประกอบ bootstrap และระบบกริดอย่างถูกต้อง

โบนัส

  1. การใช้ bootstrap ทำส่วนท้ายเหนียวและใช้แถวย่อยและคอลัมน์ย่อยบนไซต์พอร์ตโฟลิโอของคุณ ( คำแนะนำ: ตรวจสอบเอกสาร Bootstrap)

  2. มุ่งมั่นก่อนและบ่อยครั้ง

  3. หนึ่งในทักษะที่สำคัญที่สุดในการเป็นนักพัฒนาเว็บคือการควบคุมเวอร์ชัน การสร้างนิสัยการกระทำผ่าน Git เป็นสิ่งสำคัญด้วยเหตุผลสองประการ: ประวัติศาสตร์การกระทำของคุณ
  4. เป็นสัญญาณไปยังนายจ้างที่คุณกำลังทำงานอย่างแข็งขันในโครงการและเรียนรู้ทักษะใหม่ ๆ
  5. ช่วยให้คุณสามารถเปลี่ยนรหัสเบสของคุณในกรณีที่คุณต้องกลับไปที่สถานะก่อนหน้า

ปฏิบัติตามแนวทางเหล่านี้สำหรับการกระทำ:

    • ทำให้การกระทำแบบเดี่ยวสำหรับการเปลี่ยนแปลงที่เกี่ยวข้องเพื่อให้แน่ใจว่ามีประวัติที่สะอาดและจัดการได้ หากคุณกำลังแก้ไขปัญหาสองประเด็นให้ทำสองข้อ
    • เขียนข้อความที่มีความหมายและมีความหมายเพื่อให้คุณและคนอื่นดูที่เก็บของคุณสามารถเข้าใจประวัติของมันได้อย่างง่ายดาย
    • อย่าทำงานครึ่งวันเพื่อเห็นแก่ผู้ทำงานร่วมกันของคุณ (และตัวตนในอนาคตของคุณ!)
    • ทดสอบแอปพลิเคชันของคุณก่อนที่คุณจะมุ่งมั่นเพื่อให้แน่ใจว่าการทำงานในทุกขั้นตอนในกระบวนการพัฒนา

  5. เราต้องการให้คุณมีการกระทำที่ดีกว่า 200 ครั้งโดยสำเร็จการศึกษาดังนั้นให้ก่อนและบ่อยครั้ง!

การส่ง BCS

คุณจะต้องส่งสิ่งต่อไปนี้:

  • URL ของแอปพลิเคชันที่ปรับใช้จะหมายถึง URL สำหรับไฟล์ HTML แต่ละไฟล์หรือไม่
  • URL ของที่เก็บ GitHub

  • ภาพหน้าจอมีการอ้างอิงในโฟลเดอร์ Assets/Images แอพของคุณไม่จำเป็นต้องเป็น เหมือน ภาพ ใช้ bootstrap เพื่อสร้างเค้าโครงที่ตอบสนองที่คล้ายกัน

C: Users Jonpc Google Drive Bootcamp unc-chh-fsf-pt-03-2020-OU

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด