Wrikka

|

คอร์สเรียน

ร้านค้า

บทความ

Wrikka

|

คอร์สเรียน

ร้านค้า

บทความ

คอร์สทั้งหมด

เนื้อหาเป็นอย่างไร

เหมาะกับใคร

ราคาและสั่งซื้อ

เข้าใช้งาน

คอร์สเรียน Wrikka (All in one)

คอร์สเรียน Wrikka (All in one)

จ่ายครั้งเดียว เข้าถึงได้ทั้งหมดและตลอดไป
จ่ายครั้งเดียว เข้าถึงได้ทั้งหมดและตลอดไป

คอร์สเรียนทั้งหมด

หัวข้อแต่ละคอร์สที่แสดงในเว็บไซต์คือคร่าวๆ ที่ทำจริงๆตอนนี้หัวข้อเปลี่ยนแปลงไปแล้ว ละเอียดขึ้น จัดกลุ่มดีขึ้น
หัวข้อแต่ละคอร์สที่แสดงในเว็บไซต์คือคร่าวๆ
ที่ทำจริงๆตอนนี้หัวข้อเปลี่ยนแปลงไปแล้ว
ละเอียดขึ้น จัดกลุ่มดีขึ้น

HTML

Basic

Elements, Attrubutes, Heading, Paragraph, Color, etc.

SEO Basic

url structure, h1, h2, h3, ...

Accessibility

alt, link, caption, focus, hover, ...

Forms and Validations

input type, attribute, ...

CSS

CSS Variable

จำเป็นควรใช้ เพื่อควบคุม Styles, ทำ Themes, ทำ Design System

Layout

ออกแบบ Layout ต้องคิดถึง Responsive ด้วยเสมอ

Typography

Font. Weight, Line, Letter, Size, Align, Decoration

Sizeing

มีทั้ง absolute sizing และ Relative Size, แต่ Relative Sizeing มีจะผลกับ Responsive

Styles

Color, Padding, Gap, Opacity, Visible, Cursor, Perspective, Etc.

Positions

Relative, Absolute, Fixed, Sticky

Overlay

อะไรที่มันลอยๆ

Effects

Apear, Hover, Press, Loop, Drag

JavaScript

Intro JavaScript

scripting language, user behavior

Variable

Var, Let Const

Operator

arithmetic, assignment, comparison,string

Data Type

Privitive eg. String, Number, Boolean, Undefined, Null and Non-Primitive et. Date, Array

Debugger Error Handling

console, debugger, try, catch, flow

Modules

import, export, default

Functions

basic function, function type

Json

Parse, Stringify,, Objects, Arrays

Object

definition, method, display, constructors, prototype. sets, maps

Asynchronous

async, await

Browser BOM

Windows, Screen, Location, History, Cookies, ...

Web API

Forms, History, Worker , Fetch

Stripe

Create Product

สร้างสินค้า

Create Payment Llnk

สร้างลิงค์การชำระเงิน

Using Stripe on Website

การใช้ stripe บนเว็บไซต์

Withdraw Stripe to Thai Bank

ถอนเงินเข้าธนาคารไทย

Node

Installation

ติดตั้งจากเว็บไซต์ node ตรงๆหรือจากที่อื่นก็ได้

Version Manager

จัดการ node version เมื่อรองรับ project ที่หลากลาย

env

ตัวแปรต่างๆที่ระบุสภาพแวดล้อการทำงานของ nodejs

package.json

property แต่ละตัวใน package.json หมายความว่าอะไร

PNPM

Installation

การติดตั้ง PNPM แบบต่างๆ

Version Manager

เมื่อมีหลาย Version ต้องจัดการ Version ได้

Config

.npmrc, pnpm-workspace.yaml

Manage Dependencies

add, update, remove, rebuild, ...

Run Script

custom config, pnpm run, pnpm dlx, ...

Workspace

สำหรับ Monrepo

Vue

Intro Vue

ทำไมต้อง vue, สำรวจ ecosystem,

Lifecycle

เข้าใจว่า vue ทำงานยังไง

Composition API

API แบบใหม่ Vue แนะนำให้ใช้แทน Options API

Components

Components แบบต่างๆ

Attributes

Attributes แบบต่างๆ

Class and Styles Binding

เชื่อมให้สามารถใช้ Styles ได้

Rendering

List, Conditional

Vue Volar (VSCode Extensions)

VS Code Intellisense

Nuxt

Nuxt Devtools

ทุกอย่างเกี่ยวกับ next devtools

Folder Structure

.nuxt, .output, assets, components, composables, content, layouts, middleware, modules, node_modules, pages, plugins, public, server, utils, .env, gitignore, .nuxtignore, app.config.ts, app.vue, nuxt.config.ts, package.json, tsconfig

Modules

install modules, research modules

API

Components, Composable, Utils, Command, Nuxt Kit

Routing

Page, Navigation, Route Parameters, Route Middleware, Route Validation

State management

Store, State, Actions, Plugins

Data Fetching

useFetch, $fetch, useAsyncData, etc...

Rendering Mode

Universal, Client, Hybride, Edge

Nuxt Config

defineNuxtConfig

Nuxthub

Build, Manage, Deploy เว็บไซต์บน Cloudflare

VSCode

Installation

ติดตั้งก่อน

Menu

เมนูต่างๆ กดแล้วจะเป็นยังไง ทำอะไรได้บ้าง

Settings

การตั้งค่าทั้งแบบ user, workspace

Must Have Extensions

Exsions ที่คิดว่าดี ควรดี จำเป็นต้องมี

Rearrange Panel

vscode ปรับ panel ได้ จัดแบบไหนได้บ้าง

Shortcut

Shortcut และการปรับแต่ง Shortcut แบบต่างๆ

Figma

Design Tools

พื้นฐานเครื่องมือการออกแบบทั้งหมด

Design System

components, variant, variable, etc..

Plugins

แนะนำ Plugins ที่คิดว่าดี

Design to Code

Plugins, custom Sipport

Vitepress

.vitepress

config.mts, dist, cache, themes, ...

Vitepress with Obsidian

.nuxt, .output, assets, components, composables, content, layouts, middleware, modules, node_modules, pages, plugins, public, server, utils, .env, gitignore, .nuxtignore, app.config.ts, app.vue, nuxt.config.ts, package.json, tsconfig

Deploy vitepress on cloudflare

Deploy on Cloudflare

Clickup

Task

task ประมาณต่างๆ การจัดการ task

Status

สถานะของ task และการเปลี่ยนสานะ

Docs

clickup เขียน docs ก็ได้ด้วย

Dashboard

สร้าง dashbaord จาก list ต่างๆ filter ได้ ทำอะไรอื่นได่

Automation

หลายอย่างใน clickup มัน automate ได้ ทำให้ง่าย

Settings

การตั้งค่า user การตั้งค่า workspace

Git้hub

Github Repository

อธิบาย ui ที่ repository ว่าหมายความอะไร

Github Actions

CI/CD ช่วย Automate การทำงาน

Github Codespace

การเปิดโค้ดบน Github เพื่อการทำงานออนไลน์

Github Pages

การ Deploy Static Website จาก Github Repo

Git

Git Installation

ติดตั้ง git

Git Workflow

การทำงานของ git

Git CLI

ใช้ github ผ่าน cli ก็ได้

Vitepress

.vitepress

config.mts, dist, cache, themes, ...

Vitepress with Obsidian

.nuxt, .output, assets, components, composables, content, layouts, middleware, modules, node_modules, pages, plugins, public, server, utils, .env, gitignore, .nuxtignore, app.config.ts, app.vue, nuxt.config.ts, package.json, tsconfig

Deploy vitepress on cloudflare

Deploy on Cloudflare

Cloudflare Pages

Deployment

deploy static website จาก github repo

Function Metric

ออกแบบ Layout ต้องคิดถึง Responsive ด้วยเสมอ

Custom Domain

จดโดเมนที่ cloudflare, custom ที่ cloudfalre ง่ายสุด

Settings

การตั้งค่าๆต่างๆ เช่น buid, env

Framer

Inspiration

แหล่งรวม projects เจ๋งที่สร้างด้วย Framer

Basic tools

พื้นฐานเครื่องมือออกแบบ

Components

กา่รสร้างและใช้ Comoponents

Routing

Pages, Sections

Design System

ออกแบบยังไง ให้เป็นระบบ

CMS

แนวคิดหลาย Database เลย

Wordpress

Register Domain

จดโดเมน เชื่อมอีเมลโดเมน

Select Hosting

hosting จะหลายแบบ จะเลือกยังไง

Basic Wordpress

พื้นฐาน wordpress

Plugins

แนะนำ plugins ที่คิดว่าดี

UXUI101

User Interface

website, desktop, mobile, browser extensions, marketplace

User Experience

fast, easy access, impressed, love, trust

Information architecture

usecase, why, featurse, solutions, pricing

UXUI Usecase

website inspire, image uxuicase

Webdev101

Website Working

Browser, Server, Prtotocol

Server Type

Web Server, DNS Server, Email Server. App Server, File Server

HTML, CSS, JavaScript

พื้นฐานการออกแบบเว็บไซต์

Browser Console

Elements, Console, Sources, Network, Performant, Memory, Application

Dev Tools

Git, Github, Terminal, Code Editor

สื่อการเรียนเป็น Documentation
ประสบการณ์ดี เข้าถึงได้ง่าย

เป็นรูปแบบ Documentation
เหมือน Vitepress
คล้ายๆ Vitepress
เหตุผลที่สร้างเนื้อหาเป็น Documentation เพราะมันให้ข้อมูลได้มากกว่า
กดไปแหล่งอ้างอิงได้ กดสลับไปมาได้ สะดวกในการเข้าใช้ และแก้ไขข้อมูลได้ตลอดเวลา
เหตุผลที่สร้างเนื้อหาเป็น Documentation
เพราะมันให้ข้อมูลได้มากกว่า กดไปแหล่งอ้างอิงได้ กดสลับไปมาได้ สะดวกในการเข้าใช้ และแก้ไขข้อมูลได้ตลอดเวลา

สะดวกในการเข้าใช้

แค่มีอีเมลก็เข้าใช้งานได้เสมอๆ

ตารางเปรียบเทียบ

การเปรียบเทียบทำให้เข้าใจง่าย

ค้นหาได้ทุกอย่าง

ทุกๆอย่างหาได้ อยารู้ว่ามีอะไรก็แค่ค้นหา

รูปภาพวาดเอง

มีรูปภาพประกอบจะเข้าใจง่ายกว่า

รูปภาพหน้าจอ

มีรูปภาพประกอบจะเข้าใจง่ายกว่า

ภาพเคลื่อนไหว

ภาพเคลื่อนไหวเข้าใจได้เร็ว

ตัวอย่างโค้ด

นำเสนอในรูปแบบ Documentation

มีข้อมูลอ้างอิงเสมอๆ

ลิงค์ไปยังแหล่งต้นทางให้ศึกษาเพิ่มเติม

มีเมนู สารบัญ เรียงตามลำดับ

เมนูด้านซ้าย สารบัญชีด้านขวา เป็นลำดับก่อนหลัง

ภาษาที่ใช้

หัวข้อภาษาอังกฤษ
รายละเอียดภาษาไทยที่ทับศัพท์บ้าง

สไตล์การเขียนนำเสนอ

เขียนสั้นๆ กระชับ ตรงประเด็น
มีภาพประกอบเสมอ มีลิงค์อ้างอิงเสมอ

แตกต่างอย่างไร

แตกต่างจากคอร์สเรียนทั่วไปในไทย เพราะเป็น documentation
แตกต่างจากต้นฉบับ เพราะสรุปต้นฉบับอีกที และเป็นภาษาไทย
แตกต่างจากเรียนรู้จาก AI เพราะเห็นภาพรวม กดอ่านโดยไม่ต้องถาม

สร้างเนื้อหาอย่างไร

เราสร้างเว็บไซต์เรียนรู้ด้วย
Vitepress
เขียนเนื้อหาใน
Obsidian
วาดรูปใน
Tldraw
มีแหล่งข้อมูลลิงค์ใน
Raindrop
มีรูปภาพที่เก็บไว้ใน
Eagle
จัดการงานด้วย
Clickup
หาข้อมูลด้วย
Perplexity
ดราฟข้อมูลด้วย
Claude3
และทดลองด้วยตัวเอง

เหมาะกับใคร แล้วผู้ใดสร้าง

เหมาะกับ
Web Developer
UX/UI Designer
ผู้เริ่มต้น
นักเรียน นักศึกษา
คนที่ทำงานไปสักพัก
คนอยากเรียนรู้เพิ่มเติม
คนชอบอ่าน
คนอยากได้เนื้อหาภาษาไทย
คนที่อยากประหยัดเวลา
คนที่สนใจในสิ่งที่นำเสนอ
คนที่อยากสนับสนุน
คนที่ชอบการนำเสนอของเพจ
คนที่ซื้อไปเฉยๆแล้วดอง
คนที่รักเธอหมดใจ
ไม่เหมาะกับ
คนที่เรียนรู้ได้ด้วยตัวเอง
คนที่ไม่จำเป็นต้องเรียน
new.kub
แชร์ความรู้ webdev

และ

แชร์ความรู้ uxui
ชื่อนิวครับ เกิดปี 1998 เคยมีประสบการณ์เกี่ยว Web Design and Development เป็นคน Introvert ชอบฟังเพลงแนว Lofi เวลาทำงาน เป็นตัวของตัวเอง ทำในสิ่งที่ตัวเองอยากทำ ใช้ชีวิตไม่เหมือนใคร ทำอะไรไม่ตามเพื่อน

เป็นคนที่ใช้ชีวิตบนโลกอินเตอร์เน็ตมากกว่าโลกความเป็นจริง ทำงานและเวลาว่างชอบฟังเพลง ชอบเข้าเว็บไซต์ ชอบลองเครื่องมือต่างๆ ชอบทำอะไรไปเรื่อยบนอินเตอร์เน็ต ชอบจด ชอบเขียน ชอบออกไปข้างนอก ขับรถเล่น และกินอาหาร
new.kub
แชร์ความรู้ webdev

และ

แชร์ความรู้ uxui
ชื่อนิวครับ เกิดปี 1998 เคยมีประสบการณ์เกี่ยว Web Design and Development เป็นคน Introvert ชอบฟังเพลงแนว Lofi เวลาทำงาน เป็นตัวของตัวเอง ทำในสิ่งที่ตัวเองอยากทำ ใช้ชีวิตไม่เหมือนใคร ทำอะไรไม่ตามเพื่อน

เป็นคนที่ใช้ชีวิตบนโลกอินเตอร์เน็ตมากกว่าโลกความเป็นจริง ทำงานและเวลาว่างชอบฟังเพลง ชอบเข้าเว็บไซต์ ชอบลองเครื่องมือต่างๆ ชอบทำอะไรไปเรื่อยบนอินเตอร์เน็ต ชอบจด ชอบเขียน ชอบออกไปข้างนอก ขับรถเล่น และกินอาหาร
new.kub
แชร์ความรู้ webdev

และ

แชร์ความรู้ uxui
ชื่อนิวครับ เกิดปี 1998 เคยมีประสบการณ์เกี่ยว Web Design and Development เป็นคน Introvert ชอบฟังเพลงแนว Lofi เวลาทำงาน เป็นตัวของตัวเอง ทำในสิ่งที่ตัวเองอยากทำ ใช้ชีวิตไม่เหมือนใคร ทำอะไรไม่ตามเพื่อน

เป็นคนที่ใช้ชีวิตบนโลกอินเตอร์เน็ตมากกว่าโลกความเป็นจริง ทำงานและเวลาว่างชอบฟังเพลง ชอบเข้าเว็บไซต์ ชอบลองเครื่องมือต่างๆ ชอบทำอะไรไปเรื่อยบนอินเตอร์เน็ต ชอบจด ชอบเขียน ชอบออกไปข้างนอก ขับรถเล่น และกินอาหาร

การเข้าใช้งาน

สั่งซื้อแล้ว ไม่ต้องแจ้งชำระเงิน รอ 1 วัน เข้าใช้งานได้วันถัดไป
สั่งซื้อแล้ว ไม่ต้องแจ้งชำระเงิน
รอ 1 วัน เข้าใช้งานได้วันถัดไป
1
สั่งซื้อผ่าน Stripe

กรอกส่วนลด กรอกอีเมล จ่ายเงิน ไม่ต้องแจ้งชำระเงิน

2
ใช้ Email ที่สั่งซื้อ เข้าใช้งาน

กรอกอีเมลรับโค้ด เอาโค้ดมากรอก เข้าใช้งานได้เลย

กรอกอีเมลรับโค้ด เอาโค้ดมากรอก เข้าใช้งานได้เลย

3
เข้าใช้ได้แล้ว เรียนรู้ได้เลย

เนื้อหาทุกๆอย่างจะอยู่ที่นี่

เนื้อหาทุกๆอย่างจะอยู่ที่นี่

ราคา

ดูตัวอย่างคอร์สเรียน
⚠️ คอร์สเรียนยังไม่เสร็จ ปลายปี 2024 จะดีตามที่คาดหวัง
⚠️คอร์สเรียนยังไม่เสร็จ
ปลายปี 2024 จะดีตามที่คาดหวัง
แต่ซื้อวันนี้ราคานี้
31 พฤษภาคม - 31 สิงหาคม 2024

5,000 บาท

3,500 บาท

03 : 04 : 22 : 31

03 : 04 : 22 : 31

ราคาถูกกว่า
เนื้อหายังไม่พร้อม
เข้าถึงได้ทุกอย่างตลอดไป
สั่งซื้อ
1 มกราคม 2025 เป็นต้นไป

x,xxx บาท

ราคาแพงขึ้นๆ
เนื้อหาพร้อม ตามที่คาดหวัง
เข้าถึงได้ทุกอย่างตลอดไป
🔔 รับการแจ้งเตือน
Wrikka

|

บทความ

เครื่องมือ

ร้านค้า

คอร์สเรียน

ส่วนลดคอร์สเรียน

แชร์ความรู้ webdev

แชร์ความรู้ uxui

ติดต่อสอบถาม

Wrikka

|

contact@wrikka.com

บทความ

เครื่องมือ

ร้านค้า

คอร์สเรียน

ส่วนลดคอร์สเรียน

แชร์ความรู้ webdev

แชร์ความรู้ uxui

ติดต่อสอบถาม