ຮຽນ Lily ເທື່ອລະຂັ້ນຕອນ

ຍິນດີຕ້ອນຮັບ! ທຸກບົດສອນເລີ່ມຈາກສູນ ແລະສ້າງສິ່ງນ້ອຍໆດຽວກັນ — ແບບຟອມທີ່ເຂົ້າເຖິງໄດ້ງ່າຍ ແລະມີຮູບແບບ — ໃນປະມານ 10 ນາທີ, ເພື່ອໃຫ້ທ່ານປຽບທຽບເຟຣມເວີກໄດ້ຢ່າງເທົ່າທຽມ. ຈາກນັ້ນເຈາະເລິກດ້ວຍຮູບແບບສີສັນ ແລະການຕັ້ງຄ່າຂອງຜູ້ໃຊ້.

ກ່ອນທ່ານເລີ່ມ

ທ່ານຕ້ອງການໜ້ອຍຢ່າງໜ້າແປກໃຈ:

ສຳລັບບົດສອນ HTML — ພຽງແຕ່ບຣາວເຊີ ແລະຕົວແກ້ໄຂຂໍ້ຄວາມ. ນັ້ນແມ່ນຊຸດເຄື່ອງມືທັງໝົດ.
ສຳລັບ Svelte, React, Vue, Angular ຫຼື Nunjucks — git, Node 26, ແລະ pnpm 10 ຫຼືໃໝ່ກວ່າ.
ສຳລັບ Blazor — git ແລະ .NET SDK 8 ຫຼືໃໝ່ກວ່າ.

ໃໝ່ກັບອົງປະກອບແບບບໍ່ມີຫົວບໍ? ທ່ານມາຖືກບ່ອນແລ້ວ — ແຕ່ລະບົດສອນອະທິບາຍສິ່ງທີ່ເກີດຂຶ້ນໃນຂະນະທີ່ທ່ານກ້າວໄປ, ແລະທຸກຂັ້ນຕອນສະແດງໂຄດທີ່ແນ່ນອນເພື່ອສຳເນົາ.

ສີ່ຂັ້ນຕອນຈາກສູນຈົນເຖິງການສົ່ງມອບ

ອົງປະກອບທຳອິດຂອງທ່ານ (~5 ນາທີ) — ເລືອກເຟຣມເວີກຂອງທ່ານຂ້າງລຸ່ມ, ເອົາໂຄດ, ແລະສະແດງ Button.
ປະກອບ ແລະໃສ່ຮູບແບບ (~5 ນາທີ) — ສ້າງແບບຟອມທີ່ມີປ້າຍ ແລະໃສ່ຮູບແບບຕໍ່ class hook kebab-case (ສ່ວນໜຶ່ງຂອງແຕ່ລະບົດສອນເຟຣມເວີກ).
ໃສ່ຮູບແບບສີສັນ (~15 ນາທີ) — ປ່ຽນ CSS ທີ່ຂຽນດ້ວຍມືຂອງທ່ານດ້ວຍໜຶ່ງໃນ 57 ຮູບແບບສີສັນສຳເລັດຮູບ, ແລ້ວໃຫ້ຜູ້ໃຊ້ສະຫຼັບຕອນແລ່ນ: ບົດສອນຮູບແບບສີສັນ.
ເຄົາລົບການຕັ້ງຄ່າ (~15 ນາທີ) — ເພີ່ມການເລືອກພາສາ ແລະຂະໜາດຕົວອັກສອນດ້ວຍຕົວຊ່ວຍການຕັ້ງຄ່າ: ບົດສອນຕົວຊ່ວຍ.

ເລືອກເຟຣມເວີກຂອງທ່ານ

HTML

ສຳເນົາ HTML ທີ່ມີຄວາມໝາຍພ້ອມ class hook ແລ້ວໄປ — ບຣາວເຊີ ແລະຕົວແກ້ໄຂກໍພໍ.

~10 ນາທີ · ເລີ່ມງ່າຍທີ່ສຸດ

Svelte

Svelte 5 runes, snippets, ແລະ bind:value ການຜູກສອງທາງ.

~10 ນາທີ

React

ອົງປະກອບຟັງຊັນພ້ອມ value + onChange ແລະການກະຈາຍ rest-prop.

~10 ນາທີ

Vue

ອົງປະກອບໄຟລ໌ດຽວ Vue 3 ພ້ອມການຮອງຮັບ v-model .

~10 ນາທີ

Angular

ອົງປະກອບເອກະລາດ Angular ພ້ອມ signal inputs ແລະ [(value)].

~10 ນາທີ

Blazor

ອົງປະກອບ Razor ພ້ອມພາຣາມິເຕີ, ChildContent, ແລະການທົດສອບ bUnit.

~10 ນາທີ

Nunjucks

ມາກຣໂຄທີ່ສະແດງຜົນຢູ່ເຊີບເວີສຳລັບ Eleventy ແລະທໍ່ແມ່ແບບ Node ໃດໆ.

~10 ນາທີ

ຕັດສິນໃຈບໍ່ໄດ້? ເລີ່ມດ້ວຍ HTML — ມັນສອນສັນຍາ class hook ທີ່ເຟຣມເວີກອື່ນທັງໝົດແບ່ງປັນ, ແລະແລ່ນໂດຍກົງຈາກໄຟລ໌.

ເຈາະເລິກຂຶ້ນ

ຮູບແບບສີສັນ

ເຊື່ອມຕໍ່ໜຶ່ງໃນ 57 ຮູບແບບສີສັນສຳເລັດຮູບ — NHS, GOV.UK, USWDS, ສະຫວ່າງ, ມືດ ແລະອື່ນໆ — ແທນທີ່ມັນດ້ວຍ CSS ຂອງທ່ານເອງ, ແລະເພີ່ມການສະຫຼັບຮູບແບບສີສັນຕອນແລ່ນດ້ວຍຕົວຊ່ວຍ theme-picker.

~15 ນາທີ

ຕົວຊ່ວຍການຕັ້ງຄ່າ

ໃຫ້ຜູ້ໃຊ້ຄວບຄຸມຮູບແບບສີສັນ, ພາສາ, ຂະໜາດຕົວອັກສອນ, ການເຄື່ອນໄຫວ, ການຄົ້ນຫາ, ລິ້ງໜ້າ, ການແບ່ງປັນ ແລະການປ້ອນວັນທີ/ເວລາດ້ວຍ theme-picker, locale-picker, text-size-picker, motion-picker, search-picker, link-picker, share-picker ແລະ date-time-picker: ການຄວບຄຸມແບບບໍ່ມີຫົວພ້ອມຄວາມຄົງຢູ່, ຄວາມປອດໄພ SSR ແລະການກວດພົບ RTL ອັດຕະໂນມັດ.

~15 ນາທີ

ຫຼັງບົດສອນ

ທ່ອງເບິ່ງ ແຄັດຕາລັອກອົງປະກອບ — ແຕ່ລະອົງປະກອບບັນທຶກຄຸນສົມບັດ, ສັນຍາ ARIA ແລະພຶດຕິກຳແປ້ນພິມຂອງມັນ.
Clone ແອັບຕົວຢ່າງ ເພື່ອເບິ່ງທັງ 571 ອົງປະກອບທີ່ມີຮູບແບບ ແລະເຮັດວຽກຮ່ວມກັນ — CSS ຕັ້ງເປົ້າໝາຍ class hook ດຽວກັນທີ່ທ່ານເພິ່ງໃຊ້, ສະນັ້ນສຳເນົາສ່ວນໃດກໍໄດ້ເຂົ້າໂຄງການຂອງທ່ານ ແລະປັບຕາມທີ່ທ່ານຕ້ອງການ.
ມີຄຳຖາມບໍ? ໜ້າຊ່ວຍເຫຼືອ ມີຄຳຕອບ, ຄຳຖາມທີ່ພົບເລື້ອຍ, ແລະວິທີຕິດຕໍ່ຄົນທີ່ເປັນມິດ. ແລະຖ້າບົດສອນສາມາດຊັດເຈນຂຶ້ນ, ບອກພວກເຮົາ — ພວກເຮົາຍິນດີປັບປຸງມັນ.