ເສັ້ນທາງສູ່ນັກພັດທະນາ Frontend - Website Development

ຂຽນຂື້ນເມື່ອ 01-03-2024

ກ້າວສູ່ການເປັນນັກພັດທະນາ Frontend ບໍ່ແມ່ນເລື່ອງຍາກສຳລັບຜູ້ທີ່ມັກຮັກໃນການຂຽນ Code. ມື້ນີ້ຂ້ອຍເອງຈະແນະນຳ ວິທີການກ້າວສູ່ເປົ້າໝາຍນັ້ນໃນສະບັບສຳລັບຜູ້ຢາກຮຽນທີ່ເປັນຄົນລາວ ເພື່ອຕອບໂຈດຕະຫລາດລາວເຮົາ.

ກ່ອນອື່ນໝົດ ລອງຫາແຮງບັນດານໃຈກ່ອນ ວ່າຈະຮຽນໄປເພື່ອຫຍັງ? (ສຳລັບຂ້ອຍຄື ຊ່ອງທາງໃນການສ້າງເງີນ!).

ເລີ່ມເລີຍ

ຕ້ອງເຂົ້າໃຈການເຮັດວຽກຂອງ Internet

ໂຄງສ້າງ HTML ແລະ Tags

ໂຄງສ້າງ

<html>
    <head></head>
    <body></body>
</html>

Tags ທີ່ເຫັນເລື້ອຍໆ

<head>, ສຳລັບການຂຽນຂໍ້ມູນກ່ຽວກັບ Meta, Title, Styles, JS
<title>, ຂຽນຫົວຂໍ້ເວັບ
<body>, ເນື້ອຫາເວັບໄຊທ໌
<h1><h2><h3><h4><h5><h6>, ຫົວຂໍ້ເນື້ອຫາຕ່າງໆໃນເວັບ
<p>, ໄວ້ສຳລັບການຂຽນປະໂຫຍກ
<a>, ສ້າງ hyperlinks ໜ້າອື່ນ
<img>, ສະແດງຮູບພາບ
<ul> <ol> <li>, ສະແດງລາຍການ ຫຼື list
<div>, ຈັດກຸ່ມສຳລັບ tags ຕົວອື່ນ
<span>, ຄ້າຍຄືກັບ div ແຕ່ໃຊ້ສຳລັບ inline style
<br>, ລົງແຖວ
<input>, ໄວ້ປ້ອນຕົວອັກສອນ ຫຼື ຂໍ້ມູນ
<textarea>, ໄວ້ປ້ອນຕົວອັກສອນ ຫຼື ຂໍ້ມູນແບບຫຼາຍໆແຖວ
<select>, ສ້າງ Dropdown ທີ່ເປັນຕົວເລືອກ
<button>, ສ້າງປຸ່ມໃຫ້ສາມາດ Click ໄດ້

ພຽງແຕ່ເຂົ້າໃຈສ່ວນນີ້ ທ່ານຈະມີຄວາມໝັ້ນໃຈຂື້ນແນ່ນອນ

ຮຽນ CSS, ເຂົ້າໃຈການຄວາມແຕກຕ່າງລະຫວ່າງ HTML ແລະ CSS

Properties ທີ່ໃຊ້ເລື້ອຍໆ

* {
    color: #fff;
    font-size: 16px;
    font-family: monospace;
    font-weight: bold;
    text-align: center;
    width: 100px;
    height: 200px;
    margin: 10px;
    padding: 5px;
    display: block;
    border: 1px solid #000;
    border-radius: 5px;
    background-color: #000;
    background-image: url('image1.png');
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
}

ຮຽນ JavaScript ຂັ້ນພື້ນຖານ (ຮຽນພື້ນຖານໄປກ່ອນ)

ສິ່ງທີ່ມັກເຫັນເລື້ອຍໆ

var, let, const

if, else if, else

for while do-while

function(){}

Objects

const person = {
    name: 'Yeng',
    sayHello: function () {
        console.log(`I am ${this.name}`)
    }
}

Arrays

const numbers = [1, 2, 3, 4, 5].map().filter().find().findIndex().reduce()

DOM Manipulation

const element = document.querySelect('.class')
const element = document.getElementById('class').value.innerHTML.innerText

ຮຽນຮູ້ພື້ນຖານການນຳໃຊ້ Command Line, Terminal, Shell

cd
cd ..
cd directory_name
pwd
ls
mkdir new_directory
touch new_file.txt
vim file.txt
cat file.txt

ການນຳໃຊ້ Command Line, Terminal, Shell ສຳລັບ NodeJS

npm (Node Package Manager)

npm install package-name
npm install run script-name
npm list
npm outdated

yarn

yarn add package-name
yarn run script-name
yarn list
yarn outdated

npx

npx package-name

ຮຽນຮູ້ວິທີນຳໃຊ້ Framework ຫຼື Library ສຳລັບ Frontend, ເຊັ່ນ, Bootstrap, TailwindCSS
Bootstrap
ເປັນ framework ທີ່ອອກແບບມາເພື່ອພັດທະນາເວັບໄຊທ໌ງ່າຍ ແລະ ໄວຂື້ນ, ໂດຍການເອີ້ນໃຊ້ class components. (ເຫມາະສຳລັບຜູ້ເລີ່ມຕົ້ນ) Boostrap
ປຽບທຽບ CSS ແລະ Bootstrap
ຖ້ານຳໃຊ້ CSS
.button { display: inline-block; padding: 10px 20px; text-align: center; text-decoration: none; background-color: #007bff; color: #fff; border-radius: 5px; cursor: pointer; } .button:hover { background-color: #0056b3; }
<button>Button</button>
ຖ້ານຳໃຊ້ Bootstrap
<button type="button" class="btn btn-primary">Button</button>
TailwindCSS
ເປັນ CSS Framework ທີ່ອອກແບບມາເພື່ອຊ່ວຍໃຫ້ການສ້າງ UI ໃຫ້ວ່ອງໄວຂື້ນ ແລະ ຍັງສາມາດປັບແຕ່ງໃນລາຍລະອຽດຕ່າງໄດ້ຢ່າງງ່າຍດາຍ. Tailwind CSS
ປຽບທຽບ CSS ແລະ Tailwind
ຖ້ານຳໃຊ້ CSS
.button { display: inline-block; padding: 10px 20px; text-align: center; text-decoration: none; background-color: #007bff; color: #fff; border-radius: 5px; cursor: pointer; } .button:hover { background-color: #0056b3; }
<button>Button</button>
ຖ້ານຳໃຊ້ Tailwind
<button class="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-700">Button</button>
ເລືອກ Framework ສຳລັບການພັດທະນາ
ເຊັ່ນ, ReactJS, Vue.JS, Nuxt, Angular
ສຶກສາອົງປະກອບຂອງ Web Browser ເພື່ອສະດວກໃນການພັດທະນາ
ເຊັ່ນ, Inspect Element, Console, Network, Application
ວິທີການ Build ລະບົບເພື່ອນຳໃຊ້ຕົວຈິງ
ທົດລອງການ Deploy ເວັບໄຊໂດຍໃຊ້ Netlify, Vercel, Heroku, Firebase, AWS

ເຂົ້າໃຈການເຮັດ SEO

SEO ແມ່ນຫຍັງ? Search Engine Optimize ເປັນການເຮັດໃຫ້ເວັບໄຊສາມາດຄົ້ນຫາໄດ້ເທີງ Internet. ຖ້າຫາກຂາດສິ່ງນີ້ໄປ ຕໍ່ໃຫ້ສ້າງເວັບໄຊທ໌ໄດ້ດີເທົ່ານັ້ນ ກໍບໍ່ສາມາດຄົ້ນຫາໄດ້ເທີ່ງ Internet

<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="ຂຽນຂໍ້ມູນກ່ຽວກັບເວັບໄຊທ໌ແບບຄ່າວໆ ທີ່ກ່ຽວຂ້ອງກັບເວັບໄຊທ໌" />
<meta name="keywords" content="keyword1, keyword2, keyword3" />
<meta name="author" content="ຂໍ້ມູນຜູ້ຂຽນເວັບໄຊທ໌ ຫຼື ອົງກອນທີ່ສ້າງເວັບໄຊທ໌" />

<meta property="og:title" content="ຫົວຂໍ້ຫຼັກຂອງເວັບໄຊທ໌ ສະແດງອອກເວລາ Share ເວັບໄຊທ໌ລົງ Social Media, Facebook, Whatsapp, Messenger" />
<meta property="og:description" content="ລາຍລະອຽດເວັບໄຊທ໌ ສະແດງອອກເວລາ Share ເວັບໄຊທ໌ລົງ Social Media, Facebook, Whatsapp, Messenger" />
<meta property="og:image" content="URL ຮູບ ສະແດງອອກເວລາ Share ເວັບໄຊທ໌ລົງ Social Media, Facebook, Whatsapp, Messenger" />
<meta property="og:type" content="website" />

ນຳໃຊ້ Version Control, ເຊັ່ນ Github, GitLab ເປັນຕົ້ນ
ຂໍອະທິບາຍແບບງ່າຍໆ ໃນມຸມຂອງຂ້ອຍເອງ. ແຕ່ກ່ອນເວລາທີ່ພວກເຮົາຈະສົ່ງ File, Code ຫຍັງຕ່າງໆ ມັກຈະໃຊ້ USB ຫຼຶ ສົ່ງໃຫ້ຄົນອື່ນຜ່ານ Whatsapp ຫຼື Messenger. Git ເປັນເຄື່ອງໃນການແກ້ໄຂບັນຫານີ້ ໂດຍໃຊ້ Command Line ແທນ.
ກໍລະນີ ການເຮັດວຽກເປັນທີມ, ຖ້າຢາກໃຫ້ຫຼາຍໆຄົນສາມາດພັດທະນາລະບົບດຽວກັນພ້ອມກັນໄດ້, Git ຄືຄຳຕອບ.
Git commands ທີ່ນັກພັດທະນາຄວນຮູ້.
git init
git clone repository_url
git add file_name git add .
git commit -m "Commit message"
git branch git checkout -b "new_master" git checkout "branch"
git push origin branch_name git pull origin branch_name
ຮຽນຮູ້ວິທີການເຊື່ອມຕໍ່ API
ຮຽນຮູ້ວິທີການສ້າງ Authentication

ໝົດນີ້ບໍ່ແມ່ນທັງໝົດສຳລັບການເປັນ Frontend, ແຕ່ມັນຈະເຮັດໃຫ້ເຈົ້າມີຄວາມໝັ້ນໃຈ ແລະ ສາມາດສະໝັກວຽກເຮັດໄດ້ແລ້ວ.

* ຫຼາຍຄົນມັກຖາມວ່າ ຕ້ອງໃຊ້ເວລາຈັກມື້ ຈັກເດືອນ ຈັກປີ, ຄຳຕອບຂອງຂ້ອຍຄື ຂື້ນກັບຄວາມມັກຂອງທ່ານ. ແຕ່ຈາກທີ່ແນະນຳການຮຽນໃຫ້ນ້ອງໆຜ່ານມາ ສຳລັບຜູ້ທີ່ມັກແທ້ ໃຊ້ເວລາພຽງ (4 ເດືອນ).

ຜູ້ຂຽນ: Kayengxiong Tongsuatong

@Facebook