មូលដ្ឋានគ្រឹះ HTML & CSS

រៀបចំរចនាសម្ព័ន្ធទំព័រដោយប្រើ semantic HTML តុបតែងវាដោយ CSS ហើយធ្វើឲ្យវាមើលទៅស្អាតលើទូរស័ព្ទជាមួយ box model, Flexbox, Grid និង responsive design — បន្ទាប់មកបោះពុម្ពផ្សាយវា។

រាល់ website ដែលអ្នកធ្លាប់ឃើញ — គេហទំព័រព័ត៌មាន ហាងអនឡាញ ឬ web app ដែលមានប៊ូតុងរាប់រយ — មកដល់ browser របស់អ្នកជាភាសាបីដូចគ្នា៖ HTML សម្រាប់រចនាសម្ព័ន្ធ CSS សម្រាប់រូបរាង និង JavaScript សម្រាប់ឥរិយាបថ។ សូម្បីតែ app ដែលសរសេរដោយ React ឬ Next.js ក៏ទៅជា HTML និង CSS នៅក្នុង browser ដែរ។ ប្រសិនបើអ្នករំលងភាសាទាំងពីរនេះ អ្វីៗដែលសាងសង់នៅលើវានឹងក្លាយជាការស្មាន៖ អ្នកចម្លង style ដែលអ្នកមិនអាច debug បាន និង layout ដែល "ខូចស្រាប់ៗ" នៅលើទូរស័ព្ទ។

ស៊េរីនេះបង្រៀនភាសាទាំងពីរឲ្យបានត្រឹមត្រូវ ចាប់ពី tag ដំបូង រហូតដល់ទំព័រ responsive ដែលបានបញ្ចប់។ វាចាប់ផ្តើមពីអ្វីដែល HTML និង CSS នីមួយៗធ្វើ និងរបៀបសរសេរ document ដែលត្រឹមត្រូវ បន្ទាប់មកនិយាយអំពីអត្ថបទ link រូបភាព semantic structure accessibility form និង table។ បន្ទាប់មកវាបន្តទៅ CSS៖ selector, cascade, box model, typography, color និង custom property។ បីជំពូកចុងក្រោយគឺអំពី layout — Flexbox, Grid និង responsive design — ហើយជំពូកចុងក្រោយបោះពុម្ពផ្សាយទំព័ររបស់អ្នកទៅលើ web។

អ្នកនឹងមិនត្រឹមតែអានអំពីវាទេ។ ពេញមួយស៊េរី អ្នកសាងសង់ ទំព័រតែមួយ៖ ទំព័រប្រវត្តិរូបផ្ទាល់ខ្លួនសម្រាប់អ្នកអភិវឌ្ឍម្នាក់ឈ្មោះ Dara Sok។ ជំពូកនីមួយៗបន្ថែមលើវា ដូច្នេះនៅចុងបញ្ចប់ អ្នកមាន site ពិតប្រាកដ ដែលអាចចូលប្រើបាន (accessible) និងសមស្របនឹងទូរស័ព្ទ ដែលអ្នកបានបង្កើតដោយខ្លួនឯង ដោយប្រើតែ text editor និង browser ប៉ុណ្ណោះ។

ស៊េរីនេះបន្តដោយផ្ទាល់ពី របៀបដែលគេហទំព័រដំណើរការ៖ អ្នកដឹងរួចហើយថា browser ទាញយក HTML ហើយបំប្លែងវាទៅជា pixel។ ឥឡូវនេះអ្នកនឹងសរសេរ HTML ខ្លួនឯង។ អ្នកក៏នឹងប្រើ DevTools ជានិច្ច — វាជាគ្រូដ៏ល្អបំផុតសម្រាប់ភាសាទាំងពីរ។

អ្នកត្រូវការកុំព្យូទ័រដែលប្រើ Windows, macOS ឬ Linux, browser ទំនើបមួយ (Chrome, Edge ឬ Firefox), code editor (Visual Studio Code ឥតគិតថ្លៃ ហើយត្រូវបានប្រើពេញមួយស៊េរី) និងការរៀបចំ Git និង GitHub ពី Git និង GitHub សម្រាប់អ្នកចាប់ផ្តើម សម្រាប់ជំពូកចុងក្រោយ។ គ្មានអ្វីត្រូវចំណាយលុយទេ។

  1. 01អ្វីជា HTML និង CSSរចនាសម្ព័ន្ធ ទល់នឹងការបង្ហាញ index.html ដំបូងរបស់អ្នក ការបើកវានៅក្នុង browser និងការប្រើ DevTools ដើម្បីមើលអ្វីដែល browser បង្កើតពីវា។
  2. 02រចនាសម្ព័ន្ធ HTML Documentdoctype, html, head និង body, element, attribute, nesting, void element, comment និង meta tag ដែលគ្រប់ទំព័រត្រូវការ។
  3. 03អត្ថបទ Link និងរូបភាពHeading, paragraph, list, ការសង្កត់ធ្ងន់, link ដែលមាន relative path និង absolute path, រូបភាពដែលមាន alt text និងអត្ថបទខ្មែរនៅលើទំព័រ។
  4. 04Semantic HTML និង Accessibilityheader, nav, main, section, article និង footer; div និង span; landmark, heading, ការប្រើ keyboard, alt text និងការសាកល្បងជាមួយ screen reader។
  5. 05Form និង TableForm ដែលមាន label, ប្រភេទ input, button និង validation ដែលមានស្រាប់ក្នុង browser; ទិន្នន័យពី form ទៅទីណា; និង table សម្រាប់ទិន្នន័យជាតារាងពិតប្រាកដ។
  6. 06មូលដ្ឋានគ្រឹះ CSSវិធីបីយ៉ាងក្នុងការបន្ថែម CSS រចនាសម្ព័ន្ធនៃ rule, selector, combinator, pseudo-class, cascade, specificity និង inheritance។
  7. 07Box ModelContent, padding, border និង margin, box-sizing, width និង height, property display, margin collapse, overflow និងឯកតា CSS។
  8. 08Typography ពណ៌ និង BackgroundFont stack និង web font (រួមទាំងខ្មែរ), type scale និង line-height, ទម្រង់ពណ៌, contrast, background និងស្រមោល, custom property និង dark mode។
  9. 09FlexboxLayout មួយវិមាត្រ៖ flex container និង flex item, main axis និង cross axis, justify-content, align-items, gap, wrapping និង flex-grow — សាងសង់ navbar និងជួរនៃ card។
  10. 10CSS GridLayout ពីរវិមាត្រ៖ grid track, ឯកតា fr, repeat និង minmax, gallery ដែលប្រើ auto-fit, named area និងពេលណាគួរជ្រើស Grid ជាង Flexbox។
  11. 11Responsive Design និងការបោះពុម្ពផ្សាយViewport meta tag, CSS បែប mobile-first, media query, រូបភាព និងអក្សរដែលបត់បែនបាន, ការសាកល្បងដោយ device mode របស់ DevTools បន្ទាប់មកបោះពុម្ពផ្សាយទំព័រដែលបានបញ្ចប់នៅលើ GitHub Pages ហើយត្រួតពិនិត្យវាដោយ Lighthouse។