Kanok's Front-End teaching website

บทเรียนที่ 1: การแนะนำเกี่ยวกับ HTML

ยินดีต้อนรับสู่โลกของการพัฒนาเว็บ ในบทเรียนนี้เราจะเจาะลึกไปยังพื้นฐานของ HTML

โครงสร้างของ HTML

HTML เป็นพื้นฐานของทุกหน้าเว็บ ใช้โครงสร้างของแท็กเพื่อกำหนดเนื้อหาและเค้าโครง มาสำรวจโครงสร้างพื้นฐานกันเล้ย!:

ตัวอย่าง:

<!DOCTYPE html>
    <html>
    <head>
    <title>หน้าเว็บแรกของฉัน</title>
    </head>
        <body>
            <h1>Hello I'm Web Dev.</h1>
            <p>ยินดีต้อนรับสู่โลกของ HTML.</p>
        </body>
    </html>

บทเรียนแบบ Interactive:

เพิ่มส่วนใหม่ในโค้ด HTML ด้วยหัวข้อรองและรายการที่ไม่เรียงลำดับของงานอดิเรกที่คุณชื่นชอบ

คำแนะนำ: ใช้แท็ก <section> และ <ul>

คำถาม:

แท็ก HTML ที่ใช้กำหนดรายการที่ไม่เรียงลำดับคืออะไร?

<!-- การแก้ไข HTML-->
    <body>
        <h1>Hello I'm Web Dev.</h1>
        <p>ยินดีต้อนรับสู่โลกของ HTML..</p>
        
        <section>
        <h2>เครื่องมือการเขียนเว็บที่ฉันชื่นชอบ</h2>
        <ul>
            <li>Visual Studio Code</li>
            <li>Chrome Developer Tools</li>
            <li>GitHub</li>
        </ul>
        </section>
        
    </body>

บทเรียนที่ 2: Cascading Style Sheets (CSS)

ตอนนี้ที่คุณได้เรียนรู้ HTML แล้ว มาเริ่มต้นเพิ่มสไตล์ให้กับหน้าเว็บของคุณด้วย CSS กันดีกว่า

Css Rules

CSS ช่วยคุณควบคุมเค้าโครงและลักษณะขององค์ประกอบ HTML ของคุณ มาสำรวจกฎและตัวเลือกสไตล์:

ตัวอย่าง:

/* Css Rules */
    body {
    font-family: 'Arial', sans-serif;
    background-color: #f5f5f5;
    }

บทเรียนแบบ Interactive:

เพิ่มกฎ CSS เพื่อเปลี่ยนสีและขนาดตัวอักษรของหัวข้อและย่อหน้าในตัวอย่างด้านบน

สร้าง CSS เพื่อเปลี่ยนสีพื้นหลังของย่อหน้าเป็นสีเขียวอ่อน

คำใบ้: ใช้เลือกตัว <p> และคุณสมบัติ background-color

คำถาม:

คุณสมบัติ CSS ที่ใช้เปลี่ยนสีพื้นหลังขององค์ประกอบคือ?

background-color color

/* CSS ที่คุณได้ปรับแก้ */
    h1 {
    color: #0077cc;
    font-size: 2em;
    }

    p {
    color: #333;
    font-size: 1.2em;
    }

บทเรียนที่ 3: JavaScript Fundamentals

ถึงเวลาเขียนโค้ดของจริง มาศึกษาพื้นฐานของ JavaScript กัน

ตัวแปรและประเภทข้อมูล

JavaScript ใช้ตัวแปรเพื่อเก็บและจัดการข้อมูล สำรวจตัวแปรและประเภทข้อมูลทั่วไป:

ตัวอย่าง:

// ตัวแปร JavaScript
let message = 'สวัสดี, JavaScript!';

// ประเภทข้อมูล
let number = 42;
let isTrue = true;
let name = 'John';

บทเรียนแบบ Interactive:

สร้างตัวแปรใหม่และกำหนดค่าให้กับมัน จากนั้นแสดงค่าในคอนโซล

สร้างตัวแปรชื่อ 'greeting' และกำหนดค่าเป็น 'Hello JavaScript!' แล้วแสดงค่าในคอนโซล

คำใบ้: ใช้ฟังก์ชัน console.log()

คำถาม:

คำสั่งคีย์ที่ใช้ประกาศตัวแปรใน JavaScript คือ?

let var

// JavaScript แบบ Interactive ของคุณ
let myVariable = 'Hello JavaScript!';
console.log(myVariable);

บทเรียนที่ 4: การนำเว็บไซต์ขึ้น GitHub Pages

ตอนนี้คุณได้สร้างเว็บไซต์ของคุณเรียบร้อยแล้ว เรามาเรียนรู้วิธีการนำเว็บไซต์ขึ้น GitHub Pages กัน

การตั้งค่า GitHub Pages

GitHub Pages ช่วยให้คุณสามารถโฮสต์เว็บไซต์จากที่ file ของ GitHub ของคุณโดยตรง ทำตามขั้นตอนต่อไปนี้:

สร้าง Branch ใหม่ในที่เก็บของคุณชื่อ gh-pages
ไปที่การตั้งค่าของ Reposity ของคุณ
ในส่วน GitHub Pages เลือกแบรนช์ gh-pages เป็นแหล่งที่มา
บันทึกการเปลี่ยนแปลง และเว็บไซต์ของคุณจะพร้อมใช้งานในที่ https://yourusername.github.io/your-repo/

ตัวอย่าง:

ในกรณีที่ที่เก็บของคุณชื่อ your-repo เว็บไซต์ของคุณจะสามารถเข้าถึงได้ที่:

https://yourusername.github.io/your-repo/

บทเรียนแบบ Interactive:

ทำตามขั้นตอนข้างต้นเพื่อนำเว็บไซต์ที่คุณสร้างขึ้น GitHub Pages

บทเรียนที่ 5: Responsive Web Design

เพื่อให้แน่ใจว่าหน้าเว็บของคุณสามารถใช้ได้ในหลากหลายอุปกรณ์ มาศึกษาหลักการของ Responsive Web Design กัน

Media Queries

Media queries ช่วยให้คุณสามารถใช้สไตล์โดยอิงตามลักษณะของอุปกรณ์ มาเรียนรู้การใช้ media queries:

ตัวอย่าง:

/* Media Query สำหรับหน้าจอขนาดเล็ก เช่น มือถือ */
@media only screen and (max-width: 600px) {
  body {
    font-size: 14px;
  }
}

บทเรียนแบบ Interactive:

เพิ่ม media query เพื่อปรับขนาดตัวอักษรเมื่อความกว้างของหน้าจอน้อยกว่า 400 พิกเซล

เพิ่ม media query เพื่อเปลี่ยนขนาดตัวอักษรเป็น 18px เมื่อความกว้างของหน้าจอน้อยกว่า 400 พิกเซล

คำใบ้: ใช้กฎ @media และคุณสมบัติ font-size

คำถาม:

วัตถุประสงค์ของ media query ใน CSS คือ?

body { font-size: 18px; } transform: translateX(-100%);

/* CSS ที่ต้องปรับแก้ */
@media only screen and (max-width: 400px) {
  body {
    font-size: 18px;
  }
}

บทเรียนที่ 6: เทคนิค CSS ขั้นสูง

ศึกษาเทคนิคการใช้ CSS ขั้นสูงกันดีกว่า

การใช้ CSS Transitions และ Animations

CSS มีความสามารถในการสร้างการ Transition และการเคลื่อนไหวที่สวยงาม มาลองสำรวจการใช้ CSS Transitions และ Animations:

ตัวอย่าง:

/* ตัวอย่าง CSS Animation */
  .animated-element {
    animation: slideIn 2s ease-in-out;
  }
  
  @keyframes slideIn {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(0);
    }
  }

บทเรียนแบบ Interactive:

ลองสร้าง Animation ด้วย CSS Transitions หรือ Animations

บทเรียนที่ 7: แนะนำ Front-End Frameworks (เช่น React)

สำรวจ Framework และ Library ที่นิยมในการพัฒนา Front-End

ภาพรวมของ React

React เป็นหนึ่งใน Front-End Framework ที่ได้รับความนิยม มาทำความรู้จักกับ React และหน่วยสร้างสถานะ (State)

ตัวอย่าง:

// ตัวอย่าง Component ของ React
  import React, { useState } from 'react';
  
  function Counter()
    const [count, setCount] = useState(0);

บทเรียนแบบ Interactive:

ลองสร้าง Component ใหม่ด้วย React และใช้หน่วยสร้างสถานะ (State) ในการจัดการข้อมูล

Front-End 141

บทเรียนที่ 1: การแนะนำเกี่ยวกับ HTML

โครงสร้างของ HTML

ตัวอย่าง:

บทเรียนแบบ Interactive:

คำถาม:

บทเรียนที่ 2: Cascading Style Sheets (CSS)

Css Rules

ตัวอย่าง:

บทเรียนแบบ Interactive:

คำถาม:

บทเรียนที่ 3: JavaScript Fundamentals

ตัวแปรและประเภทข้อมูล

ตัวอย่าง:

บทเรียนแบบ Interactive:

คำถาม:

บทเรียนที่ 4: การนำเว็บไซต์ขึ้น GitHub Pages

การตั้งค่า GitHub Pages

ตัวอย่าง:

บทเรียนแบบ Interactive:

Quiz:

บทเรียนที่ 5: Responsive Web Design

Media Queries

ตัวอย่าง:

บทเรียนแบบ Interactive:

คำถาม:

บทเรียนที่ 6: เทคนิค CSS ขั้นสูง

การใช้ CSS Transitions และ Animations

ตัวอย่าง:

บทเรียนแบบ Interactive:

คำถาม:

บทเรียนที่ 7: แนะนำ Front-End Frameworks (เช่น React)

ภาพรวมของ React

ตัวอย่าง:

บทเรียนแบบ Interactive:

คำถาม: