ဘယ်လို

အိမ်လုပ်နည်း

မီနူးများ

အိုင်ကွန်ဘား မီနူးအိုင်ကွန် ဘာဂျာ တက်ဘ်များ ဒေါင်လိုက် တက်ဘ်များ တက်ဘ် ခေါင်းစီးများ စာမျက်နှာ တဘ်များ အပြည့်အစုံ တဘ်များကို ရွှေ့ပါ။ ထိပ်တန်းလမ်းညွှန် တုံ့ပြန်မှု Topnav အိုင်ကွန်များဖြင့် Navbar ရှာရန် မီနူး Search Bar ပုံသေဘေးဘား စာမျက်နှာလမ်းညွှန် တုံ့ပြန်မှုဘေးထွက်ဘား မျက်နှာပြင်အပြည့် လမ်းညွှန်ချက် ကင်းဗတ် မီနူး Sidenav ခလုတ်များကို နှိပ်ပါ။ အိုင်ကွန်များပါသော ဘေးဘား အလျားလိုက် Scroll Menu ဒေါင်လိုက် မီနူး အောက်ခြေလမ်းညွှန် တုံ့ပြန်မှုအောက်ခြေရေကြောင်း Bottom Border Nav Links ညာဘက်ညှိထားသော မီနူးလင့်ခ်များ ဗဟိုပြုမီနူးလင့်ခ် တူညီသော အနံ မီနူးလင့်ခ်များ ပုံသေမီနူး Scroll တွင် Slide Down Bar Scroll တွင် Navbar ကိုဝှက်ထားပါ။ Scroll တွင် Navbar ကို လျှော့ပါ။ Sticky Navbar ပုံပေါ်ရှိ Navbar Dropdowns များကို ရွှေ့ပါ။ Dropdowns ကိုနှိပ်ပါ။ Cascading Dropdown Topnav တွင် dropdown Sidenav တွင် dropdown Resp Navbar Dropdown Subnavigation Menu Dropup Mega Menu မိုဘိုင်းမီနူး Curtain Menu ပြိုကျနေသော ဘေးဘား ပြိုကျနေသော ဘေးဘောင် Pagination Breadcrumbs ခလုတ်အုပ်စု ဒေါင်လိုက်ခလုတ်အုပ်စု Sticky Social Bar ဆေးပြားညွှန်း တုံ့ပြန်မှုဆိုင်ရာ ခေါင်းစီး

ပုံများ

ဆလိုက်ရှိုး ဆလိုက်ရှိုးပြခန်း Modal ပုံများ မီးပုံး Responsive Image Grid ရုပ်ပုံဂရစ် တဘ်ပြခန်း ပုံထပ်ဆင့်မှိန် ပုံထပ်ဆင့်ဆလိုက် ပုံကို ထပ်ဆင့်ချဲ့ပါ။ ပုံထပ်ဆင့်ခေါင်းစဉ် ပုံထပ်ဆင့်သင်္ကေတ ရုပ်ပုံအကျိုးသက်ရောက်မှုများ အဖြူအမည်းပုံ ရုပ်ပုံစာသား ရုပ်ပုံစာသား ပိတ်ဆို့ခြင်းများ ဖောက်ထွင်းမြင်ရသော ရုပ်ပုံစာသား စာမျက်နှာအပြည့်ပုံ ပုံပေါ်ဖောင် သူရဲကောင်းပုံရိပ် မှုန်ဝါးသော နောက်ခံပုံ Scroll တွင် Bg ကိုပြောင်းပါ။ ဘေးချင်းကပ်ပုံများ လုံးဝန်းသောပုံများ ကိုယ်ပွားပုံများ တုံ့ပြန်မှုပုံရိပ်များ စင်တာပုံများ ပုံသေးများ နယ်နိမိတ်ပုံ အသင်းနှင့်တွေ့ဆုံပါ။ ကပ်နေသောပုံ ပုံတစ်ပုံကိုလှန်ပါ။ ပုံတစ်ခုလှုပ်ပါ။ အစုစုပြခန်း အစုစုကို စီစစ်ခြင်း။ ရုပ်ပုံချဲ့ခြင်း။ ပုံရိပ်ချဲ့ဖန်ခွက် ပုံနှိုင်းယှဉ်ဆလိုက်ဒါ Favicon

ခလုတ်များ

သတိပေးခလုတ်များ ကောက်ကြောင်းခလုတ်များ ခလုတ်များ ခွဲပါ။ ကာတွန်းခလုတ်များ ခလုတ်များ နွမ်းလာသည်။ ပုံပေါ်ခလုတ် ဆိုရှယ်မီဒီယာခလုတ်များ Read More လျှော့ဖတ်ပါ။ ခလုတ်များဖွင့်ခြင်း။ ဒေါင်းလုဒ်ခလုတ်များ ဆေးလုံးခလုတ်များ အကြောင်းကြားချက်ခလုတ် Icon ခလုတ်များ Next/prev ခလုတ်များ Nav တွင် နောက်ထပ်ခလုတ် ခလုတ်များပိတ်ခြင်း။ စာသားခလုတ်များ အဝိုင်းခလုတ်များ အပေါ်ဆုံးခလုတ်ကို ရွှေ့ပါ။

ပုံစံများ

Login Form စာရင်းသွင်းပုံစံ ငွေထုတ်ပုံစံ ဆက်သွယ်ရန်ပုံစံ လူမှုရေးဝင်ရောက်မှုပုံစံ ဖောင်စာရင်းသွင်းပါ။ အိုင်ကွန်များဖြင့် ဖောင်ပုံစံ သတင်းလွှာ စုဖွဲ့ထားသောပုံစံ တုံ့ပြန်မှုပုံစံ ပေါ့ပ်အပ်ဖောင် Inline ပုံစံ ထည့်သွင်းမှုအကွက်ကို ရှင်းလင်းပါ။ နံပါတ်မြှားများကို ဝှက်ပါ။ စာသားကို ကလစ်ဘုတ်သို့ ကူးယူပါ။ သက်ဝင်လှုပ်ရှားရှာဖွေမှု ရှာဖွေရန်ခလုတ် မျက်နှာပြင်အပြည့် ရှာဖွေမှု Navbar တွင် ထည့်သွင်းသည့်အကွက် Navbar တွင် Login Form စိတ်ကြိုက်စစ်ဆေးပုံး/ရေဒီယို စိတ်ကြိုက်ရွေးချယ်ပါ။ ပြောင်းရန် Checkbox ကိုစစ်ဆေးပါ။ Caps Lock ကို ထောက်လှမ်းပါ။ Enter တွင် Trigger ခလုတ် စကားဝှက်အတည်ပြုခြင်း။ စကားဝှက် မြင်နိုင်မှုကို ပြောင်းပါ။ အဆင့်များစွာပုံစံ အလိုအလျောက်ဖြည့်ပါ။ အလိုအလျောက်ဖြည့်စွက်ခြင်းကို ပိတ်ပါ။ စာလုံးပေါင်းစစ်ဆေးခြင်းကို ပိတ်ပါ။ ဖိုင်တင်ခြင်းခလုတ် ဗလာထည့်သွင်းမှု အတည်ပြုခြင်း။

စစ်ထုတ်မှုများ

စာရင်းစစ် Filter ဇယား ဒြပ်စင်များကို စစ်ထုတ်ပါ။ Filter Dropdown စာရင်းခွဲပါ။ စာလုံးပေါင်းဇယား

စားပွဲများ

မြင်းကျားအစင်း စားပွဲ စင်တာဇယားများ ဇယားကွက် အကျယ် ဘေးချင်းကပ် ဇယားများ တုံ့ပြန်မှုဇယားများ နှိုင်းယှဉ်ဇယား

နောက်ထပ်

မျက်နှာပြင်အပြည့် ဗီဒီယို ပုံစံသေတ္တာများ Modal ကိုဖျက်ပါ။ အချိန်ဇယား Scroll Indicator တိုးတက်မှုဘားများ ကျွမ်းကျင်မှုဘား Range Sliders ကိရိယာအကြံပြုချက်များ မျက်နှာပြင် အစိတ်အပိုင်းကို ဖိထားပါ။ ပေါ့ပ်အပ်များ အထူးပင် ပြက္ခဒိန် HTML ပါဝင်သည်။ လုပ်ရန်စာရင်း လက်ဆွဲများ ကြယ်အဆင့်သတ်မှတ်ချက် အသုံးပြုသူ အဆင့်သတ်မှတ်ချက် ထပ်ဆင့်အကျိုးသက်ရောက်မှု ချစ်ပ်ပြားများ ဆက်သွယ်ပါ။ ကတ်များ ခေါက်ကတ် ပရိုဖိုင်ကတ် ထုတ်ကုန်ကတ် သတိပေးချက်များ အရေးပေါ်အတွက်ခေါ်သည် မှတ်စုများ တံဆိပ်များ စက်ဝိုင်းများ HR ပုံစံ ကူပွန် စာရင်းအဖွဲ့ ကျည်ဆံမပါတဲ့ စာရင်း တုံ့ပြန်သောစာသား Cutout စာသား တောက်ပသောစာသား ပုံသေ အောက်ခြေ စေးကပ်သောဒြပ်စင် တူညီသောအမြင့် ရှင်းလင်းချက် တုံ့ပြန်မှု Floats Snackbar မျက်နှာပြင်အပြည့် ပြတင်းပေါက် Scroll Drawing Smooth Scroll Gradient Bg Scroll ကပ်နေသော ခေါင်းစီး Scroll တွင် ခေါင်းစီးကို လျှော့ပါ။ စျေးနှုန်းဇယား Parallax အချိုးအစား တုံ့ပြန်မှု iframes ကြိုက်/မကြိုက် ခလုတ်ဖွင့်ပါ။ ဖျောက်/ပြရန် ပြောင်းရန် အမှောင်မုဒ်ကို ပြောင်းပါ။ စာသားပြောင်းပါ။ အတန်းပြောင်းရန် အတန်းကိုထည့်ပါ။ အတန်းကို ဖယ်ရှားပါ။ Active အတန်း သစ်ပင်မြင်ကွင်း ပစ္စည်းကို ဖယ်ရှားပါ။ အော့ဖ်လိုင်း ထောက်လှမ်းခြင်း။ Hidden Element ကိုရှာပါ။ ဝဘ်စာမျက်နှာကို ပြန်ညွှန်းပါ။ Zoom Hover Flip Box ဒေါင်လိုက်ဗဟို DIV ရှိ အလယ်ခလုတ် Hover တွင် အကူးအပြောင်း မြှားများ၊ ပုံစံမျိုးစုံ ဒေါင်းလုဒ်လင့် အမြင့်ဒြပ်စင် Browser Window စိတ်ကြိုက် Scrollbar Scrollbar ကို ဖျောက်ပါ။ ပြ/အတင်း Scrollbar ကိရိယာကို ကြည့်ပါ။ Contenteditable Border နေရာယူသူ အရောင် စာသားရွေးချယ်မှု အရောင် ကျည်ဆန်အရောင် ဒေါင်လိုက်မျဉ်း ပိုင်းခြားခြင်း။ Animate အိုင်ကွန်များ Countdown Timer လက်နှိပ်စက် Page မကြာမီလာမည် ချတ်မက်ဆေ့ချ်များ Popup Chat Window Split Screen သက်သေခံချက်များ အခန်းကောင်တာ Quotes Slideshow ပိတ်နိုင်သော ပစ္စည်းများစာရင်း ပုံမှန် စက်ပစ္စည်း ဖြတ်ပိုင်းများ ဆွဲယူနိုင်သော HTML Element JS မီဒီယာမေးခွန်းများ Syntax Highlighter JS Animations JS ကြိုးအရှည် JS အညွှန်းကိန်း JS Default Parameters လက်ရှိ URL ကိုရယူပါ။ လက်ရှိ မျက်နှာပြင်အရွယ်အစားကို ရယူပါ။ Iframe Elements ကိုရယူပါ။

ဝဘ်ဆိုဒ်

အခမဲ့ဝဘ်ဆိုဒ်တစ်ခုဖန်တီးပါ။ Website တစ်ခုလုပ်ပါ။ Static Website တစ်ခုလုပ်ပါ။ ဝဘ်ဆိုဒ်တစ်ခုဖန်တီးပါ (W3.CSS) ဝဘ်ဆိုဒ်တစ်ခုဖန်တီးပါ (BS3) ဝဘ်ဆိုဒ်တစ်ခုဖန်တီးပါ (BS4) ဝဘ်ဆိုဒ်တစ်ခုဖန်တီးပါ (BS5) ဝဘ်ဆိုဒ်တစ်ခုဖန်တီးပြီး ကြည့်ရှုပါ။ Link Tree ဝဘ်ဆိုဒ်တစ်ခုဖန်တီးပါ။ Portfolio တစ်ခုဖန်တီးပါ။ Resume တစ်ခုဖန်တီးပါ။ စားသောက်ဆိုင် Website တစ်ခုလုပ်ပါ။ Business Website တစ်ခုလုပ်ပါ။ WebBook တစ်ခုဖန်တီးပါ။ စင်တာဝဘ်ဆိုဒ် ဆက်သွယ်ရန်အပိုင်း Page အကြောင်း ခေါင်းစီးကြီး နမူနာ ဝဘ်ဆိုဒ်

ဂရစ်

2 ကော်လံ အပြင်အဆင် 3 ကော်လံ အပြင်အဆင် 4 Column Layout ဇယားကွက်ချဲ့ခြင်း။ စာရင်းဇယားကွက်မြင်ကွင်း ရောစပ်ထားသော ကော်လံ အပြင်အဆင် ကော်လံကတ်များ Zig Zag အပြင်အဆင် ဘလော့ အပြင်အဆင်

Google

Google Charts Google Fonts Google ဖောင့်အတွဲများ Google Analytics ကို စနစ်ထည့်သွင်းပါ။

ဘာသာပြန်များ

Weight ပြောင်းပါ။ အပူချိန်ပြောင်းပါ။ အရှည်ပြောင်းပါ။ မြန်နှုန်းကိုပြောင်းပါ။

ဘလော့

Developer အလုပ်တစ်ခုရယူပါ။ Front-End Dev ဖြစ်လာပါ။

- Static Website တစ်ခုဖန်တီးနည်း

အငြိမ်ဝဘ်ဆိုက်တစ်ခုတွင် ပုံသေအကြောင်းအရာများရှိသည်။

တစ်ခုတည်ဆောက်ရန် programming language မလိုအပ်ပါ။

၎င်းသည် ဖန်တီးရန် အလွယ်ကူဆုံး ဝဘ်ဆိုဒ်ဖြစ်သည်။

Static ဝဘ်ဆိုဒ်များသည် HTML၊ CSS နှင့် JavaScript တို့ကို တည်ဆောက်ပါသည်။

အခမဲ့ စတင်လိုက်ပါ »

တည်ငြိမ်သော ဝဘ်ဆိုဒ်ကို ဘာကြောင့် ဖန်တီးတာလဲ။

Static ဝဘ်ဆိုဒ်များသည် ဖန်တီးရန် မြန်ဆန်လွယ်ကူပါသည်။

အိမ်ရှင်လုပ်ရန် စျေးသက်သာသည်။

တည်ငြိမ်သော ဝဘ်ဆိုဒ်များသည် လုံခြုံသည်။

ပျော်စရာကောင်းပြီး HTML၊ CSS နှင့် JavaScript တို့ဖြင့် အံမခန်းဆိုဒ်များကို ဖန်တီးနိုင်သည်။


static ဝဘ်ဆိုဒ်တစ်ခုတည်ဆောက်ရန် ငါဘာသိထားရမလဲ

HTML၊ CSS နှင့် JavaScript တို့သည် မည်သည့်ဝဘ်ဆိုဒ်ကိုမဆို တည်ဆောက်ရန်အတွက် အခြေခံဘာသာစကားများဖြစ်သည်။

  1. HTML ဖြင့် ဖွဲ့စည်းပုံကို ဖန်တီးပါ။ ပထမဆုံးလေ့လာသင်ယူရမည့်အရာမှာ ဝဘ်စာမျက်နှာများဖန်တီးရန်အတွက် စံမှတ်ထားသောဘာသာစကားဖြစ်သည့် HTML ဖြစ်သည်။
  2. HTML ကို လေ့လာပါ »
  3. CSS ဖြင့် ပုံစံ။ နောက်တစ်ဆင့်မှာ CSS ကို လေ့လာရန်ဖြစ်ပြီး လှပသောအရောင်များ၊ ဖောင့်များနှင့် အခြားအရာများဖြင့် သင့်ဝဘ်စာမျက်နှာ၏ အပြင်အဆင်ကို သတ်မှတ်ရန်ဖြစ်သည်။
  4. CSS ကို လေ့လာပါ »
  5. ၎င်းကို JavaScript ဖြင့် အပြန်အလှန်အကျိုးသက်ရောက်အောင်လုပ်ပါ။ HTML နှင့် CSS ကိုလေ့လာပြီးနောက်၊ သင့်အသုံးပြုသူများအတွက် တက်ကြွပြီး အပြန်အလှန်အကျိုးပြုသော ဝဘ်စာမျက်နှာများကို ဖန်တီးရန်အတွက် JavaScript ကို သင်လေ့လာသင့်သည်။
  6. JavaScript ကို လေ့လာပါ »

သင်ယူရန် အကောင်းဆုံးနည်းလမ်းမှာ လက်တွေ့အသုံးချရန်ဖြစ်သည်။ ယနေ့စတင်တည်ဆောက်ပါ။


W3Schools Spaces ဖြင့် အငြိမ်ဝဘ်ဆိုဒ်တစ်ခု ဖန်တီးပါ။

Spaces သည် ကုဒ်ဖြင့် တည်ဆောက်ပြီး စမ်းသပ်နိုင်ပြီး သင့်ဝဘ်ဆိုဒ်ကို လက်ခံဆောင်ရွက်ပေးနိုင်သည့် ကိုယ်ပိုင်နေရာတစ်ခုဖြစ်သည်။

Spaces ဖြင့် HTML၊ CSS နှင့် JavaScript တို့ဖြင့် အငြိမ်ဆိုက်များကို တည်ဆောက်နိုင်သည်။

ဘရောက်ဆာမှာ သင်လိုအပ်သမျှ မှန်ကန်ပါစေ။

ပိုမိုသိရှိရန် "

ငါဘယ်လိုစတင်ရမလဲ

static website တစ်ခုကို စတင်တည်ဆောက်ရန် နည်းလမ်းနှစ်ခုရှိသည်။

အစ မှနေ၍ တည်ဆောက်ခြင်း သို့မဟုတ် နမူနာ ပုံစံ ကို အသုံးပြုခြင်း ။


တည်ငြိမ်သော ဝဘ်စာမျက်နှာကို အစမှအဆုံး တည်ဆောက်ပါ။

ဝဘ်စာမျက်နှာ ကိုဖန်တီးနည်း အ စမှနေ၍ တည်ငြိမ်သောဝဘ်ဆိုဒ်တစ်ခုကို ဖန်တီးနည်းအတွက် ဤနေရာတွင် ဖတ်ပါ။


ပုံစံခွက်ဖြင့်တည်ဆောက်ခြင်း။

နမူနာပုံစံများဖြင့် စတင်ခြင်းသည် စိတ်အားတက်ကြွမှုနှင့် သင်ယူရန် နည်းလမ်းကောင်းတစ်ခုဖြစ်သည်။

ကျွန်ုပ်တို့တွင် အသင့်သုံးနိုင်သော ပုံစံများရှိသည်။ ဤသည်မှာ ဥပမာအချို့ဖြစ်သည်။

W3Schools Spaces တွင် ရရှိနိုင်သော တည်ငြိမ်သော ဝဘ်ဆိုဒ် နမူနာများစွာ ရှိပါသည်။ ၎င်းတို့ကို ဝန်ဆောင်မှုသို့ တိုက်ရိုက်တင်နိုင်သည်။

စတင်ပါ »

* ခရက်ဒစ်ကတ်မလိုအပ်ပါ။

ဖက်ရှင်ဘလော့ Template

ဓာတ်ပုံ အစုစု နမူနာပုံစံ

Parallax Template


W3Schools Spaces

W3Schools Spaces

Build your static website with W3Schools Spaces.

Get Started for Free