About Serie

Convert PSD To HTML

ဒီ Series မှာတော့ PSD design တစ်ခုကနေ HTML ကို ဘယ်လို convert လုပ်သွားမလဲဆိုတာကို တွေ့ရှိရမှာ ဖြစ်ပါတယ်။ ပုံမှန်အားဖြင့် Photoshop မှာပဲဆွဲဆွဲ ၊ illustrator မှာပဲဆွဲဆွဲ ၊ gimp မှာပဲ ဆွဲဆွဲ ဘယ်နေရာမှာ ဆွဲသည်ဖြစ်စေ HTML ဘယ်လိုပြောင်းလို့ရတယ်ဆိုတဲ့ concepts ကို သိရင်ရပါပြီ။ ဒီသင်ခန်းစာမှာတော့ HTML template တစ်ခုကို online ပေါ်မှာ တင်ပြီးတော့ ရောင်းလို့ရအောင်အထိ ဘယ်လို code တွေရေးသားရမလဲ ဆိုတာကို ရှင်းပြသွားမှာ ဖြစ်ပါတယ်။
  • Episodes
    33 episodes
  • Updated
    2022-09-21
  • Level
    Intermediate
1
Convert PSD TO HTML Introduction
Introduction အနေနဲ့ ဒီ series မှာ ပါမယ့် အကြောင်းအရာလေးတွေကို ရှင်းပြထားခြင်း ဖြစ်ပါတယ်။ series မှာ PSD ကနေ HTML ကို ပြောင်းတဲ့အချိန်မှာ ဘယ် framework အကူအညီမှမပါပဲ မိမိကိုယ်တိုင် ဘယ်လိုတည်ဆောက်သွားမလဲဆိုတာကို တွေ့ရှိရမှာ ဖြစ်ပါတယ်။ premium template တစ်ခု အနေအထားအထိ လုပ်ဆောင်ပြီး online မှာ ဘယ်လို ရောင်းချလို့ရတယ်ဆိုတဲ့ အကြောင်းပါ ရှင်းပြထားတာကို တွေ့ရှိရမှာ ဖြစ်ပါတယ်။
  2022-09-21
  4:06
2
Export Photo From Photoshop
ဒီသင်ခန်းစာမှာ Photoshop PSD ဖိုင်ကနေ ဓာတ်ပုံလေးတွေကို ဘယ်လို export ထုတ်လို့ရတယ်ဆိုတဲ့ နည်းလမ်းလေးကို ရှင်းပြထားခြင်း ဖြစ်ပါတယ်။ Developer တစ်ယောက်အနေနဲ့ Photoshop ကို အသုံးပြုပြီးတော့ design ဆွဲတတ်ဖို့ မလိုပေမယ် Photoshop ရဲ့ တစ်ချို့ အချက်လေးတွေကို အသုံးပြုတတ်ဖို့ တစ်ခါတစ်လေ လိုတတ်ပါတယ်။
  2022-09-05
  7:16
3
Photoshop Selection Font Style and Guides Usages
Developer တစ်ယောက်အနေနဲ့ Photoshop tools တွေထဲကမှ ဓာတ်ပုံ၊ အတိုင်းအတာ၊ စာလုံး fonts အမျိုးအစား၊ font size ၊ font style ၊ font color စတဲ့ အခြေခံအချက်လေးတွေကို သိရှိဖို့လိုပါတယ်။ အဲလိုအခြေခံအချက်လေးတွေကို သိရင် Photoshop PSD ကနေ HTML ပြောင်းဖို့အတွက် လုံလောက်ပါပြီ။
  2022-09-05
  9:26
4
Folder And File Structure
Project တစ်ခုကို စပြီးတော့ တည်ဆောက်တော့မယ်ဆိုရင် folder နဲ့ file structure လေးတွေက တော်တော်အရေးပါပါတယ်။ ဒါမှ မိမိလုပ်နေတဲ့ project ကြီးလာတာနဲ့အမျှ file တွေ၊ folder တွေကို ကောင်းကောင်းစီမံနိုင်မှာ ဖြစ်ပါတယ်။ တစ်ခါတစ်လေ framework တွေဘာတွေကို သုံးတယ်ဆိုရင် framework တွေက ဘယ်လိုသုံးသင့်လဲဆိုတဲ့ guidelines လေးတွေပေးပါတယ်။ တကယ်လို့ မိမိက company ၊ team တွေနဲ့ လုပ်တယ်ဆိုရင် သူတို့ချမှတ်ထားတဲ့ guideline လေးတွေနဲ့ ရေးရပါတယ်။
  2022-09-05
  14:26
5
Setup HTML Frame
HTML project တွေ စတည်ဆောက်တဲ့အခါ CSS file တွေ၊ JavaScript file တွေထည့်ရတာတွေ၊ browser တွေအကုန်လုံးမှာ တူညီသော CSS result ကို ရရှိအောင် CSS reset ပြုလုပ်တာတွေကို HTML project တိုင်မှာ အမြဲလိုလိုလုပ်ရပါတယ်။ ဒါလေးကို ဖြေရှင်းဖို့အတွက် HTML frame လေးကို တည်ဆောက်ထားခြင်း ဖြစ်ပါတယ်။
  2022-09-05
  23:32
6
Website Frame
ဒီသင်ခန်းစာမှာတော့ PSD ကနေ HTML စပြောင်းတဲ့အခါ Design Section တစ်ခုချင်းစီရဲ့ website frame တည်ဆောက်ပုံကို ရှင်းပြသွားတာ ဖြစ်ပါတယ်။ Website frame ကို စပြီးတော့ လုပ်တဲ့အတွက် မမှားအောင် အသေအချာ တိုင်းပြီးတော့ လုပ်ဆောင်ဖို့ လိုအပ်ပါတယ်။
  2022-09-10
  12:42
7
Adding Logo and Menu
ဒီသင်ခန်းစာမှာတော့ Logo နဲ့ Menu ကို design ထဲကအတိုင်းရအောင် လုပ်ယူတဲ့ နည်းလမ်းလေးတွေကို ပြသထားတာ ဖြစ်ပါတယ်။ ဘယ်ဘက်မှာ Logo ညာဘက်မှာ menu ထားတဲ့ ပုံစံကို လုပ်လို့ရတဲ့ နည်းလမ်းလေးတွေ အများကြီးရှိတဲ့အထဲက float ကို အသုံးပြုပြီးတော့ ဘယ်လိုထည့်လို့ရတယ်ဆိုတာကို ရှင်းပြထားခြင်း ဖြစ်ပါတယ်။ ဒါပေမယ် ကျွန်တော်တို့ရဲ့ template မှာတော့ float ကို မသုံးပဲ flex နဲ့ ပဲ လုပ်ဆောင်သွားမှာ ဖြစ်ပါတယ်။
  2022-09-10
  14:15
8
Logo And Menu Structure Setup
ဒီသင်ခန်းစာမှာတော့ Logo နဲ့ Menu section တွေကို Header section ထဲမှာ CSS flex property ကို အသုံးပြုပြီးတော့ စနစ်တကျလေး ဘယ်လိုထားမယ်ဆိုတာကို ရှင်းပြသွားတာ ဖြစ်ပါတယ်။ နောက်ပြီး website frame layout အတွက် CSS class လေးတွေကို common တစ်ခြား section design တွေမှာပါ လွယ်ကူစွာ ဘယ်လိုအသုံးပြုလို့ရတယ်ဆိုတာကို ရှင်းပြထားခြင်း ဖြစ်ပါတယ်။
  2022-09-21
  19:37
9
Sub menu Structure
မိမိအနေနဲ့ PSD design တစ်ခုကနေ HTML ပြောင်းတဲ့အချိန်မှာ Sub menu က တစ်ချို့ designer တွေက ထည့်ပေးလိုက်ပြီးတော့ တစ်ချို့ designer တွေက ထည့်ဖို့ မေးတာလေးတွေရှိတတ် ပါတယ်။ တကယ်လို့ design ထဲမှာ မပါဘူးဆိုရင်တောင် နောက်ပိုင်းမှာ အသုံးဝင်အောင်အတွက် တစ်ခါတည်း sub menu ကို တည်ဆောက်တဲ့ အပိုင်းကို လုပ်ဆောင်သင့်ပါတယ်။ ဒီသင်ခန်းစာမှာ Sub menu ကို level 2 လောက်ထိ ဘယ်လိုလုပ်သွားလဲဆိုတာကို တွေ့ရှိရမှာ ဖြစ်ပါတယ်။
  2022-09-21
  15:29
10
Mobile Menu Structure
အခုနောက်ပိုင်းမှာ website တစ်ခုရေးဆွဲရင် responsive website လုပ်ဆောင်ချက်က website တိုင်းလိုလိုမှာ ပါလေ့ရှိပါတယ်။ Design ဖိုင်မှာ desktop version တစ်ခုတည်းအတွက် ဆွဲပေးပေမယ် မိမိက mobile တွေ tablet တွေအတွက်ပါ အဆင်ပြေအောင် PSD ကနေ HTML ပြောင်းတဲ့အခါ လုပ်ဆောင်ပေးဖို့ လိုအပ်ပါတယ်။ ဒီသင်ခန်းစာမှာတော့ desktop version menu ကို mobile menu ဖြစ်အောင် ဘယ်လိုပြောင်းလဲ လုပ်ဆောင်သွားမလဲဆိုတာကို တွေ့မြင်ရမှာ ဖြစ်ပါတယ်။
  2022-09-21
  17:23
11
Navigation Code Clean
Design section တစ်ခုချင်းစီကို CSS ရေးသားတဲ့အခါ ရေးသားပြီးတိုင်း မိမိရေးထားတဲ့ CSS လေးတွေကို ပြန်ပြီးတော့ စစ်ဆေးဖို့လိုအပ်ပါတယ်။ တစ်ခါတစ်လေ ကျတော့ ရေးထားတဲ့ CSS တွေက ဒီ design section တစ်ခုတည်းတွက်မဟုတ်ပဲ နောက်ရေးမယ့် design section တွေအတွက်ပါ အဆင်ပြေအောင်လို့ common အနေနဲ့ ခွဲထုတ်သင့်တာကို ခွဲထုတ်ပြီး code တွေကို ပိုမိုရှင်းလင်းအောင် လုပ်ဖို့ လိုအပ်ပါတယ်။
  2022-09-21
  24:04
12
Toggle Mobile Menu
Desktop menu တွေ mobile menu တွေ လုပ်ပြီးတဲ့အချိန်မှာ mobile menu ကို ပုံမှန်အားဖြင့် design တွေမှာ ဖျောက်ထားတတ်ပါတယ်။ menu control ခလုတ်တစ်ခုကို နှိပ်လိုက်တော့မှ ပြတာမျိုးတွေ လုပ်ကြပါတယ်။ ကျွန်တော်တို့လည်း JavaScript ရဲ့ အကူအညီနဲ့ mobile menu ကို ဘယ်လိုဖော်တာ ဖျောက်တာ လုပ်သွားလဲဆိုတာကို တွေ့ရှိရမှာ ဖြစ်ပါတယ်။
  2022-09-21
  7:45
13
Crop Banner Slider Photo
ဒီသင်ခန်းစာမှာတော့ banner image ကို design ထဲမှာ image အနေနဲ့ ပြထားပေမယ် ကျွန်တော်တို့က slider အနေနဲ့ အသုံးပြုသွားမှာ ဖြစ်ပါတယ်။ အဲဒီတော့ Photoshop ထဲမှာ ဓါတ်ပုံတွေကို ဘယ်လိုဖြတ်ထုတ်သွားလဲဆိုတာကို တွေ့ရှိရမှာ ဖြစ်ပါတယ်။ ဓါတ်ပုံ size အကြီးတွေဖြစ်နေတဲ့ဟာတွေကိုပါ ဘယ်လို crop လုပ်သွားမယ်ဆိုတာကို ဖော်ပြထားခြင်း ဖြစ်ပါတယ်။
  2022-09-22
  8:39
14
Banner Swiper Slider
jQuery library ကို မမှီခိုပဲအသုံးပြုနိင်မယ် swiperjs ကို အသုံးပြီးတော့ swiper slider ကို banner ထဲမှာ ဘယ်လိုတည်ဆောက်သွားမလဲဆိုတာကို တွေ့ရှိရမှာ ဖြစ်ပါတယ်။ swiperjs ကိုလည်း PSD မှာရှိတဲ့ ပုံစံမျိုးဖြစ်အောင် ဘယ်လိုလုပ်သွားမလဲဆိုတာကို တွေ့ရှိရမှာ ဖြစ်ပါတယ်။
  2022-09-22
  15:14
15
About Us Section Structure
PSD design ထဲမှာပါတဲ့ about us section ကို HTML structure ဘယ်လိုဆောက်မလဲဆိုတာကို ရှင်းပြထားခြင်း ဖြစ်ပါတယ်။ HTML structure ကို အရင်တည်ဆောက်ပြီးမှ CSS ရေးသွားရမှာ ဖြစ်တဲ့အတွက် design အပေါ်အခြေခံပြီး HTML တည်ဆောက်နိုင်ဖို့ အရေးကြီးပါတယ်။
  2022-09-22
  7:04
16
About Us Section Styling
About us design အတွက် HTML ကို တည်ဆောက်ပြီးတဲ့အချိန်မှာ CSS နဲ့ PSD မှာပါတဲ့ about us section design ရရှိအောင် ဘယ်လိုရေးသားသွားမလဲဆိုတာကို တွေ့ရှိရမှာ ဖြစ်ပါတယ်။ PSD design ထဲမှာ mobile view အတွက် မပါပေမယ် ကျွန်တော်တို့အနေနဲ့ mobile တွေ tablet တွေ စတဲ့ devices အားလုံးမှာ အဆင်ပြေအောင် လုပ်ပေးလိုက်ဖို့ လိုအပ်ပါတယ်။
  2022-09-22
  15:01
17
About Us Section CSS Cleaning
ဒီသင်ခန်းစာမှာတော့ About us section အတွက် ရေးထားတဲ့ CSS တွေထဲက ဘယ် CSS တွေက repeat ဖြစ်နေတယ်၊ အဲလို repeat ဖြစ်နေတဲ့ CSS တွေကို ထပ်ခါထပ်ခါအသုံးပြုနိုင်အောင် common CSS file ထဲကို ဘယ်လိုခွဲထုတ်မယ်ဆိုတဲ့ စတဲ့အချက်လေးတွေကို ရှင်းပြထားခြင်း ဖြစ်ပါတယ်။
  2022-09-22
  15:04
18
Portfolio HTML Structure Setup
ဒီသင်ခန်းစာမှာတော့ PSD ထဲမှာပါတဲ့ portfolio design အတွက် HTML structure ဘယ်လိုတည်ဆောက်မလဲဆိုတာကို ရှင်းပြထားခြင်း ဖြစ်ပါတယ်။
  2022-09-22
  9:28
19
Styling Portfolio Design
Column portfolio design ကို CSS flex property တွေကို အသုံးပြုပြီးတော့ ဘယ်လိုရရှိအောင် တည်ဆောင်သွားမလဲဆိုတာကို ရှင်းပြထားခြင်း ဖြစ်ပါတယ်။
  2022-09-22
  10:20
20
Portfolio Responsive Design
ဒီသင်ခန်းစာမှာတော့ CSS flex property ကိုအသုံးပြုပြီးတော့ ရေးထားတဲ့ portfolio design ကို devices တွေအကုန်လုံးမှာ ကြည့်လို့အဆင်ပြေအောင် responsive ကို ဘယ်လိုလုပ်ဆာင်မလဲဆိုတာကို ရှင်းပြထားခြင်း ဖြစ်ပါတယ်။
  2022-09-22
  9:04
21
Portfolio CSS Code Clean
ကျွန်တော်တို့ Portfolio design အတွက် CSS တွေအများကြီးရေးသားလိုက်ရပါတယ်။ အဲဒီအထဲက တစ်ချို့ CSS property တွေဟာ ရှေ့ design တွေလုပ်ခဲ့တုန်းက ပါပြီးသား CSS property တွေလည်း ဖြစ်နိုင်ပါတယ် အဲဒါကြောင့် ထပ်နေတဲ့ CSS property တွေကို CSS common file ထဲကို ရွေ့ဖို့လိုအပ်ရင် ရွေ့ရမှာ ဖြစ်ပါတယ်။
  2022-09-22
  18:17
22
Testimonial HTML Structure
Testimonial design က PSD design အရဆိုရင် slide လေးတွေသွားတဲ့ carousel လိုပုံစံမျိုးဖြစ်နေပါတယ်။ အဲဒီတော့ ကျွန်တော်တို့အနေနဲ့ project ထဲမှာ သုံးပြီးသား swiperjs library ကိုအသုံးပြုပြီးတော့ carousel design လေးကို ဖန်တီးလုပ်ယူသွားမှာ ဖြစ်ပါတယ်။
  2022-09-22
  11:09
23
Testimonial Styling
ဒီသင်ခန်းစာမှာတော့ testimonial design အတွက်ရေးထားတဲ့ HTML structure ကို PSD မှာပါတဲ့ Design အတိုင်း ရရှိအောင် လုပ်ဆောင်သွားတဲ့ နည်းလမ်းလေးတွေကို ရှင်းပြထားခြင်း ဖြစ်ပါတယ်။
  2022-09-23
  14:13
24
Testimonial Swiper Slider
swiperjs ကနေ့ testimonial design အတွက် carousel လုပ်ဆောင်တာကို ဘယ်လိုလုပ်ဆောင်မလဲဆိုတာကို ရှင်းပြထားခြင်း ဖြစ်ပါတယ်။ တကယ့်လက်တွေ့မှာ swiperjs ကို အသုံးပြုပြီးတော့ website ထဲမှာရှိတဲ့ လိုအပ်တဲ့ နေရာလေးတွေမှာ မတူညီတဲ့ sliders လေးတွေဖန်တီးနိုင်အောင်အတွက် swiperjs မှာ လုပ်ဆောင်လို့ရတဲ့ options လေးတွေ ပါပြီးသား ဖြစ်ပါတယ်။
  2022-09-23
  11:42
25
Testimonial Code Cleaning
Testimonial design အတွက် HTML တွေ CSS တွေရေးထားပြီးတဲ့အချိန်မှာ CSS ထဲမှာ ထပ်ခါထပ်ခါဖြစ်နေတဲ့ code တွေ ရှင်းလင်းအောင် လုပ်ဖို့လိုအပ်ပါတယ်။ အဲဒါကြောင့် design တစ်ခုပြီးတိုင်း code cleaning တွေ လုပ်ဆောင်ရတာ ဖြစ်ပါတယ်။
  2022-09-23
  17:44
26
Contact Form Structure
ဒီသင်ခန်းစာကတော့ contact form design အတွက် HTML structure ကို ဘယ်လိုတည်ဆောက်သွားမလဲဆိုတာကို ရှင်းပြထားခြင်း ဖြစ်ပါတယ်။
  2022-09-23
  5:46
27
Contact Form Styling
Contact form design အတွက် ရေးထားတဲ့ HTML structure ကို CSS နဲ့ Photoshop မှာပါတဲ့ design အတိုင်း ဘယ်လိုရအောင် လုပ်သွားမယ် ဆိုတာကို ရှင်းပြထားခြင်း ဖြစ်ပါတယ်။
  2022-09-23
  16:26
28
Contact Form Code Cleaning
HTML နဲ့ CSS တွေနဲ့ ရေးသားထားတဲ့ contact form design ထဲက သုံးထားတဲ့ CSS တော်တော်များများက project ရဲ့ တစ်ခြား design တွေမှာ ပါပြီးသား ဖြစ်သွားတဲ့တွက် CSS property တော်တော်များများကို common class အနေနဲ့ ခေါ်သုံးလို့ရတာကို တွေ့ရှိရမှာ ဖြစ်ပါတယ်။
  2022-09-23
  9:21
29
Footer HTML Structure
ဒီသင်ခန်းစာမှာတော့ footer design အတွက် HTML structure ကို ဘယ်လိုလုပ်သွားမလဲဆိုတာကို ရှင်းပြထားခြင်း ဖြစ်ပါတယ်။ footer design မှာ column သုံးခုပါတဲ့အထဲက footer column ၁ နဲ့ footer column ၂ HTML structure ရေးသားပုံဖြစ်ပါတယ်။
  2022-09-23
  10:32
30
Styling Footer Box One And Footer Box Two
ဒီသင်ခန်းစာကတော့ Footer design ထဲက column ၁ နဲ့ column ၂ အတွက် CSS ရေးသားပုံဖြစ်ပါတယ်။
  2022-09-23
  11:02
31
Footer Contact Box Styling
Footer design ထဲက contact box column အတွက် CSS ရေးသားပုံကို ရှင်းပြထားခြင်း ဖြစ်ပါတယ်။ ဒီသင်ခန်းစာမှာတော့ icon တွေအတွက် CSS sprite နည်းလမ်းကို အသုံးပြုထားတာကို တွေ့ရှိရမှာ ဖြစ်ပါတယ်။
  2022-09-23
  13:26
32
Redesign Situation For Customer
တကယ့်လက်တွေ့မှာတော့ Customer ကို PSD design ပြလို့ customer က သဘောကျမှာ PSD ကနေ့ HTML ကို ပြောင်းလဲခြင်း ဖြစ်ပါတယ်။ ဒါပေမယ့် HTML ပြောင်းပြီးတဲ့အချိန်မှာ တစ်ချို့ customer တွေက design ကို ပြန်ပြင်ချင်တာတွေ၊ တစ်ချို့ဟာလေးတွေကို ပြောင်းချင်တာတွေ တစ်ခါတစ်လေ ဖြစ်တတ်ပါတယ်။ အဲလိုအနေအထားလေးတွေကို ဘယ်လို လုပ်ဆောင်သွားမလဲဆိုတာကို ရှင်းပြထားခြင်း ဖြစ်ပါတယ်။
  2022-09-23
  8:35
33
Footer Section Code Cleaning
Footer section design အတွက် ရေးသားထားတဲ့ CSS တွေထဲက Common CSS မှာ အသုံးပြုထားတဲ့ CSS class လေးတွေနဲ့ အစားထိုးခြင်း ဖြစ်ပါတယ်။ ဒါမှ footer ထဲမှာ ရေးသားထားတဲ့ CSS code တွေက ပိုပြီးတော့ ရှင်းလင်းသွားမှာ ဖြစ်ပါတယ်။
  2022-09-23
  15:22
အကူအညီသင်သိလိုသောအချက်များကျွန်တော့အကြောင်း