css tutorial exercises course

CSS แบบฝึกหัดการสอนที่ 4Geeks Academy

สวัสดี! ฉันคือ Alejandro Sanchez @alesanchezr ตื่นเต้นมากที่ได้มีคุณที่นี่! - - การเรียนรู้รหัสเป็นเรื่องยาก คุณต้องการการฝึก! DM ฉันบน Twitter หากคุณมีคำถามใด ๆ

Estas Instrucciones están disponibles en ?? español ??

คุณจะได้เรียนรู้แนวคิดต่อไปนี้:

1. วิธีการใช้ CSS กับเว็บไซต์ของคุณใน 3 วิธีที่แตกต่างกัน: อินไลน์โดยจัดกลุ่มเข้าด้วยกันภายในแท็ก <style> หรือโดยใช้สไตล์ชีทภายนอก <link>

2. การเลือกองค์ประกอบ HTML จากเว็บไซต์ของคุณเพื่อใช้สไตล์ไป

3. ใช้กฎ CSS (สไตล์) กับองค์ประกอบเหล่านั้น

4. ใช้กฎ CSS ที่ได้รับความนิยมมากที่สุด

5. เรียนรู้เทคนิค CSS ที่ได้รับความนิยมมากที่สุด

ก่อนที่เราจะเริ่ม ... บทเรียนอื่น ๆ ที่เกี่ยวข้อง

1. เรียนรู้ html
2. เรียนรู้แบบฟอร์ม HTML5
3. เรียนรู้ CSS ←คุณอยู่ที่นี่แล้ว!
4. เรียนรู้เลย์เอาต์ CSS
5. เรียนรู้ bootstrap

การเลือกแบบฝึกหัด CSS แบบอัตโนมัติให้เลือกอย่างสมบูรณ์สำหรับทุกคนที่สนใจเรียนรู้ CSS!

การติดตั้งคลิกเดียว (แนะนำ):

คุณสามารถเปิดแบบฝึกหัดเหล่านี้ได้ในเวลาเพียงไม่กี่วินาทีโดยคลิก: เปิดใน codespaces (แนะนำ) หรือเปิดใน gitpod

เมื่อคุณมี VSCODE เปิดแบบฝึกหัด LearnPack ควรเริ่มต้นโดยอัตโนมัติ หากแบบฝึกหัดไม่ทำงานโดยอัตโนมัติคุณสามารถลองพิมพ์บนเทอร์มินัลของคุณ: $ learnpack start

การติดตั้งด้วยตนเอง

โคลนพื้นที่เก็บข้อมูลในสภาพแวดล้อมท้องถิ่นของคุณและทำตามขั้นตอนด้านล่าง:

1. ติดตั้ง LearnPack ผู้จัดการแพ็คเกจสำหรับการเรียนรู้บทช่วยสอนและปลั๊กอินคอมไพเลอร์ HTML สำหรับ LearnPack; ตรวจสอบให้แน่ใจว่าคุณมี node.js 14+:

$ npm i learnpack -g
$ learnpack plugins:install learnpack-html

2. ดาวน์โหลดแบบฝึกหัด

$ learnpack install css-tutorial-exercises-course

หมายเหตุ: เมื่อคุณดาวน์โหลดเสร็จแล้วคุณจะต้อง cd ลงในโฟลเดอร์แบบฝึกหัดซึ่งมีแบบฝึกหัดทั้งหมด

3. เริ่มต้นการสอน/แบบฝึกหัดโดยเรียกใช้คำสั่งต่อไปนี้ในระดับเดียวกันกับที่ไฟล์ Learn.json ของคุณคือ:

$ npm i [email protected] -g
$ learnpack start

แบบฝึกหัดมีการจัดระเบียบอย่างไร?

แต่ละแบบฝึกหัดเป็นแอปพลิเคชันปฏิกิริยาขนาดเล็กที่มีไฟล์ต่อไปนี้:

1. index.html: เว็บไซต์และแบบฝึกหัดทั้งหมดเริ่มต้นจาก index.html
2. Styles.css: รหัส CSS ของคุณไปที่นี่แบบฝึกหัดบางอย่างจะทำให้คุณอัปเดตไฟล์นี้
3. readme.md: มีคำแนะนำในการออกกำลังกาย
4. test.js: คุณไม่จำเป็นต้องเปิดไฟล์นี้มันมีสคริปต์ทดสอบสำหรับการออกกำลังกาย

หมายเหตุ: แบบฝึกหัดมีการให้คะแนนอัตโนมัติ แต่มันเข้มงวดและเข้มงวดมากคำแนะนำของฉันคือการไม่ทำการทดสอบที่ร้ายแรงเกินไปและใช้เป็นคำแนะนำหรือคุณอาจรู้สึกหงุดหงิด

ผู้มีส่วนร่วม

ขอบคุณไปที่คนที่ยอดเยี่ยมเหล่านี้ (คีย์อีโมจิ):

1. Alejandro Sanchez (Alesanchezr), การมีส่วนร่วม: (coder) (IDEA)?, (Run-tests) , (pull-request-review)? (Run-Tutorial) ✅ (เอกสาร)

2. Paolo (Plucodev), การมีส่วนร่วม: (รายงานข้อผิดพลาด)?, การสนับสนุน: (coder), (การแปล)?

3. Daniel Machota (@D4RKM0NST3R), การมีส่วนร่วม: (run-tutorial) ✅, การแปล?

แบบฝึกหัดนี้และแบบฝึกหัดอื่น ๆ อีกมากมายถูกสร้างขึ้นโดยนักเรียนซึ่งเป็นส่วนหนึ่งของการเข้ารหัส 4Geeks Academy Bootcamp โดย Alejandro Sánchezและผู้มีส่วนร่วมอื่น ๆ อีกมากมาย ค้นหาข้อมูลเพิ่มเติมเกี่ยวกับหลักสูตรนักพัฒนาสแต็กเต็มรูปแบบของเราและข้อมูล Bootcamp วิทยาศาสตร์