WebMetaComp/learn-section.html at main · techit45/WebMetaComp · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<section class="learn-block">
  <div class="section-title-wrapper">
    <h2 class="section-title">เสริมทักษะและโปรเจกต์สายคอม-วิศวะกับหัวข้อยอดนิยม</h2>
  </div>
  <div class="learn-list">
    <!-- โครงงานด้านวิศวะคอมพิวเตอร์ -->
    <div class="learn-card">
      <img src="images/learn_engineering_project.png" alt="Computer Engineering Project" class="learn-card-img">
      <h4>สอนทำโครงงานด้านวิศวะคอมพิวเตอร์</h4>
      <p>แนะแนวคิด การวางระบบ การออกแบบวงจร และการนำซอฟต์แวร์มาประยุกต์ในโปรเจกต์ฮาร์ดแวร์ เช่น IoT, Robot, Automation</p>
    </div>
    <!-- Game Development Godot & Unity -->
    <div class="learn-card">
      <img src="images/learn_godot_unity.png" alt="Game Dev Godot Unity" class="learn-card-img">
      <h4>สอนสร้างเกมด้วย Godot และ Unity</h4>
      <p>เริ่มตั้งแต่พื้นฐานจนถึงการสร้างเกม 2D/3D ระบบฟิสิกส์, UI, AI และการปล่อยลงแพลตฟอร์มต่าง ๆ</p>
    </div>
    <!-- AI Automate Make.com N8N -->
    <div class="learn-card">
      <img src="images/learn_make_n8n.png" alt="AI Automate Make.com N8N" class="learn-card-img">
      <h4>สอนทำ AI Automation ด้วย Make.com & N8N</h4>
      <p>เรียนรู้ระบบ Automation เชื่อมต่อ API, Bot, Workflow อัตโนมัติทั้งแบบ no-code และ low-code</p>
    </div>
    <!-- Coding Basic Python, C, C++, Java -->
    <div class="learn-card">
      <img src="images/learn_code_basic.png" alt="Coding Basic Python C C++ Java" class="learn-card-img">
      <h4>สอนพื้นฐานการเขียนโค้ด Python, C, C++, Java</h4>
      <p>เข้าใจหลักการคิดเชิงตรรกะ อัลกอริทึม การเขียนโค้ดเบื้องต้น พร้อมตัวอย่างงานจริง</p>
    </div>
    <!-- Web Dev React -->
    <div class="learn-card">
      <img src="images/learn_react.png" alt="Web Dev React" class="learn-card-img">
      <h4>สอนสร้างเว็บแอปฯ ด้วย React</h4>
      <p>ตั้งแต่โครงสร้างเว็บ การใช้ Component, State, Props การเชื่อมต่อ API และ Deploy เว็บขึ้นออนไลน์</p>
    </div>
    <!-- Image Processing: Object Detection, Classification -->
    <div class="learn-card">
      <img src="images/learn_image_processing.png" alt="Image Processing Object Detection Classification" class="learn-card-img">
      <h4>สอน Image Processing (Object Detection, Classification)</h4>
      <p>ปูพื้นฐานการใช้ Python, OpenCV, TensorFlow/YOLO เพื่อจำแนกและตรวจจับวัตถุในภาพ</p>
    </div>
  </div>
</section>