ស្វាគមន៍មកកាន់វគ្គសិក្សា Web Development
ចាប់ផ្ដើមពី HTML, CSS រហូតដល់ Bootstrap 5 ដើម្បីបង្កើតគេហទំព័រទាន់សម័យ និងឆ្លើយតបបានល្អ។
មេរៀន ១: ការណែនាំ
វគ្គសិក្សានេះនឹងជួយអ្នកក្លាយជាអ្នកអភិវឌ្ឍន៍គេហទំព័រដោយចាប់ផ្ដើមពីកម្រិតមូលដ្ឋាន។
HTML គឺជាភាសាសម្គាល់ (markup language) ដែលត្រូវបានប្រើដើម្បីកំណត់រចនាសម្ព័ន្ធនៃខ្លឹមសារនៅលើគេហទំព័រ។ វាមានលក្ខណៈពិសេសដោយប្រើសញ្ញាសម្គាល់ (tags) ដើម្បីសម្គាល់ផ្នែកផ្សេងៗនៃឯកសារ ដូចជាក្បាល (headings) កថាខណ្ឌ (paragraphs) រូបភាព និងតំណភ្ជាប់។ នេះជាឧទាហរណ៍៖
<p>This is a paragraph in HTML.</p>
អនុវត្តន៍៖ សញ្ញា <p> បង្ហាញកថាខណ្ឌមួយ។ អត្ថបទ "This is a paragraph in HTML." គឺជាខ្លឹមសារដែលត្រូវបង្ហាញនៅក្នុងកថាខណ្ឌ។
មេរៀន ២: មូលដ្ឋាន HTML
ឯកសារ HTML មានរចនាសម្ព័ន្ធមូលដ្ឋានដែលរួមបញ្ចូល **<!DOCTYPE html>**, **<html>**, **<head>**, និង **<body>**។ នេះជាឧទាហរណ៍៖
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Page</title>
</head>
<body>
<h1>Welcome</h1>
</body>
</html>អនុវត្តន៍៖
- <!DOCTYPE html> – ប្រកាសថាឯកសារនេះជា HTML5។
- <html lang="en"> – ជាឫសគល់នៃឯកសារទាំងមូល។
- <head>– ផ្ទុកនូវព័ត៌មានមេតាដូចជាចំណងជើង និងការកំណត់អក្សរ។
- <body> – ផ្ទុកខ្លឹមសារដែលត្រូវបង្ហាញលើគេហទំព័រ។
មេរៀន ៣: Elements និង Tags
សញ្ញា HTML មូលដ្ឋានដូចជា <h1>, <p>, <a> ត្រូវបានប្រើដើម្បីបង្ហាញខ្លឹមសារផ្សេងៗគ្នា។ នេះជាឧទាហរណ៍៖
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<a href="https://example.com">Click me</a>អនុវត្តន៍៖
- <h1> – បង្ហាញជាចំណងជើង (heading)។
- <p> – បង្ហាញជាកថាខណ្ឌ (paragraph)។
- <a> – បង្កើតតំណភ្ជាប់ (link) ដែលនាំអ្នកប្រើប្រាស់ទៅកាន់គេហទំព័រផ្សេងទៀត។
មេរៀន ៤: Attributes និង Links
Attributes បន្ថែមព័ត៌មានបន្ថែមទៅលើ elements។ href សម្រាប់ links និង
src
សម្រាប់
images។
<a href="https://example.com">ចូលលើក</a> <img src="logo.png" alt="Logo">
មេរៀន ៥: មូលដ្ឋាន CSS
CSS ជួយ style HTML elements ដូចជា color, font និង layout។
h1 {
color: purple;
text-align: center;
}
មេរៀន ៦: Selectors និង Properties
Selectors ជ្រើស elements ដើម្បី style ហើយ Properties បញ្ជាក់ style ដូចជា color, margin, padding។
p {
color: #333;
line-height: 1.5;
}
.className {
margin: 10px;
}
#idName {
padding: 15px;
}
មេរៀន ៧: Layouts និង Flexbox
Flexbox ជួយធ្វើ layout មាន responsiveness និង align items ងាយស្រួល។
.container {
display: flex;
justify-content: space-between;
}
មេរៀន ៨: Transitions និង Animations
CSS transitions និង animations ធ្វើឲ្យ elements មាន movement និង hover effects ស្រស់ស្អាត។
button {
transition: background 0.3s ease;
}
button:hover {
background: purple;
color: white;
}
មេរៀន ៩: Bootstrap 5 និង Grid
Bootstrap ជួយអ្នកបង្កើតគេហទំព័រទាន់សម័យ និងមាន grid system ស្រាប់។
១/២
១/២
មេរៀន ១០: Bootstrap Components
Bootstrap មាន components ស្រាប់ដូចជា Navbar, Button, Card, Modal, Form។
មាតិកា
មេរៀន ១១: Utilities និង Helpers
Bootstrap utilities ជួយកំណត់ spacing, text alignment, display, color ជាច្រើន។
ចំកណ្តាលអត្ថបទ
មេរៀន ១២: Project ចុងក្រោយ
បង្កើតគេហទំព័រ Online Course មាន Navbar, Hero, Grid, Card និង Footer។
មេរៀន ១៣: Testing និង សង្ខេប
ធ្វើតេស្ត website របស់អ្នកនៅ desktop និង mobile។ សង្ខេបអ្វីដែលបានរៀន។
មេរៀន ១៤: ការបង្កើនភាព Responsive
ប្រើ media queries និង Bootstrap responsive classes ដើម្បីឱ្យ website ល្អនៅទាំង Desktop និង Mobile។
@media (max-width: 768px) {
.container { padding: 10px; }
}
មេរៀន ១៥: Deployment Tips
Deploy website អាចប្រើ GitHub Pages, Netlify, Vercel។ ចែករំលែកទៅអ្នកទស្សនា។
មតិស្ថាបនារបស់សិស្ស
4.3
ពន្ទុវគ្គសិក្សា
ការវាយតម្លៃ
គាត ផានិត
៥ថ្ងៃមុនវគ្គសិក្សានេះគឺល្អ ហើយខ្ញុំពេញចិត្តចំពោះរបៀបដែលវាបន្យល់បានស៊ីជម្រៅ
សុខ កញ្ញា
២សប្ដាហ៍មុនខ្ញុំចូលចិត្តប្រធានបទដែលមានលក្ខណៈជាក់ស្តែង ខ្ញុំចូលចិត្តរបៀបដែលវាត្រូវបានពន្យល់។ សូមអរគុណ
ខន សុវណ្ណ
១ខែមុននេះជាវគ្គសិក្សាដ៏ល្អមួយដែលអ្នកចូលទៅធ្វើការនោះប្រសិនបើអ្នកចាប់ផ្តើមហើយចាប់ផ្តើមរៀន