ဘယ်လို

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

မီနူးများ

အိုင်ကွန်ဘား မီနူးအိုင်ကွန် ဘာဂျာ တက်ဘ်များ ဒေါင်လိုက် တက်ဘ်များ တက်ဘ် ခေါင်းစီးများ စာမျက်နှာ တဘ်များ အပြည့်အစုံ တဘ်များကို ရွှေ့ပါ။ ထိပ်တန်းလမ်းညွှန် တုံ့ပြန်မှု 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 ဖြစ်လာပါ။

အစုစုကို ဘယ်လိုဖန်တီးမလဲ။

အစုစုသည် သတိပြုမိရန် မရှိမဖြစ် လိုအပ်သည်။

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

သင်၏ကျွမ်းကျင်မှုနှင့် ပရောဂျက်များကို ပြသရန် အစုစုကို အသုံးပြုသည်။

၎င်းသည် သင့်အား အလုပ်တစ်ခု၊ အလွတ်တန်းလုပ်ပွဲ သို့မဟုတ် အလုပ်သင်တစ်ခုရရန် ကူညီပေးနိုင်သည်။

ကျွန်ုပ်၏အစုစုကို အခမဲ့ဖန်တီးပါ »

အစုစုဆိုတာဘာလဲ

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

၎င်းသည် သင့်လုပ်ငန်းအတွေ့အကြုံကို ပြသနိုင်ပြီး သင်ဂုဏ်ယူဆုံးသော ပရောဂျက်များကို ပြသနိုင်သည့်နေရာဖြစ်သည်။

သင့်အွန်လိုင်းအစုစုကို ကုမ္ပဏီများ၊ မန်နေဂျာအလုပ်ခန့်ထားသူများ၊ အလုပ်ခန့်ထားသူများနှင့် စုဆောင်းသူများထံ ၎င်း၏လင့်ခ်ဖြင့် မျှဝေနိုင်သည်၊ သို့မှသာ ၎င်းတို့သည် သင့်အား သတိပြုမိနိုင်မည်ဖြစ်သည်။

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


အစုစုကို ဘာကြောင့် ဖန်တီးတာလဲ။

၎င်းသည် သင်၏အွန်လိုင်းရောက်ရှိမှုကို တိုးပွားစေပြီး သတိပြုမိလာစေရန် နည်းလမ်းကောင်းတစ်ခုဖြစ်သည်။

အလုပ်တစ်ခုရရန် သို့မဟုတ် သင့်ဝန်ဆောင်မှုများထံ ဖောက်သည်များကို ဆွဲဆောင်ရန် ၎င်းကို အသုံးပြုနိုင်သည်။

အွန်လိုင်းမှာ ဝဘ်ဆိုဒ်တစ်ခုအနေနဲ့ ရှိနေတယ်။ ကမ္ဘာတစ်ဝှမ်းရှိလူများက သင့်ကိုရှာဖွေရန် ဖြစ်နိုင်ချေရှိသည်။

အစုအဝေး၏ ဒီဇိုင်းသည် စာဖတ်သူကို သင်မည်သူဖြစ်သည်ကို အထင်ကြီးစေမည်ဖြစ်သည်။ ကောင်းမွန်ပြီး နှစ်သက်ဖွယ်ကောင်းသော နည်းလမ်းဖြင့် ပေါ်လာကြောင်း သေချာပါစေ။


အစုစုသည် မည်သူနည်း

အစုစုတစ်ခုဖန်တီးခြင်းသည် သင့်အသက်မွေးဝမ်းကြောင်းအတွက် အရေးကြီးပါသည်။

အလုပ်တစ်ခုရှာရန်၊ အလွတ်ပေးပွဲတစ်ပွဲ သို့မဟုတ် ဖောက်သည်အသစ်ဆီသို့ သင်၏အရည်အချင်းများကို ပြသသည့်အခါတွင် အထောက်အကူဖြစ်စေနိုင်သည်။

အစုရှယ်ယာများကို အသုံးပြုသည့် သာမာန်အခန်းကဏ္ဍများသည် ကျွမ်းကျင်ပညာရှင်များဖြစ်သော်လည်း၊ အကန့်အသတ်မရှိ-

  • ဆော့ဖ်ဝဲရေးဆွဲသူများ
  • UX ဒီဇိုင်နာများ
  • ဂရပ်ဖစ်ဒီဇိုင်နာများ
  • ဓာတ်ပုံဆရာများ
  • စျေးကွက်ရှာဖွေရေးပညာရှင်များ
  • ဗိသုကာပညာရှင်
  • စာရေးဆရာများ

W3Schools Spaces အကြောင်း ကြားဖူး ပါသလား။ ဤနေရာတွင် သင်သည် သင်၏အစုစုကို အစမှ ဖန်တီးနိုင်သည် သို့မဟုတ် နမူနာပုံစံတစ်ခုကို အသုံးပြုကာ ၎င်းကို အခမဲ့ လက်ခံဆောင်ရွက်ပေးနိုင်သည်။

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

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


အစုစုတစ်ခုတွင် အရေးကြီးဆုံးအပိုင်းများကား အဘယ်နည်း

အစုစုတစ်ခုကို ဖန်တီးရန် နည်းလမ်းများစွာ ရှိပါသည်။

အဲဒါကို ဘယ်လိုဖန်တီးရမလဲဆိုရင် သင်ဟာ ဘယ်လိုပညာရှင်အမျိုးအစား၊ သင်ဘယ်သူအတွက် ဖန်တီးနေသလဲ၊ ဘာကြောင့် ဖန်တီးတာလဲဆိုတဲ့အပေါ်မှာ မူတည်ပါတယ်။

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

အစုစုအမျိုးအစားအားလုံးအတွက် မရှိမဖြစ်လိုအပ်သော ကဏ္ဍအချို့ကို အောက်တွင် အကျဉ်းချုပ်ဖော်ပြထားသည်-

1. Hero အပိုင်း။

ဟီးရိုးကဏ္ဍသည် သင်၏အစုစုကိုဝင်ရောက်သောအခါတွင် လူတို့ပထမဆုံးမြင်ရသည့်အရာဖြစ်သည်။

သင့်လိုဂိုနှင့် မီနူးအောက်တွင် ပြသထားသည်။

ဟီးရိုးကဏ္ဍသည် သင်ကမ်းလှမ်းသောအရာကို စာဖတ်သူအား နားလည်စေရန် ကူညီပေးသည်၊ တစ်စုံတစ်ဦးသည် သင်နှင့်အတူအလုပ်လုပ်ရသနည်း၊ နှင့် သင့်ဝန်ဆောင်မှုများနှင့် သင်ပေးဆောင်သည့်တန်ဖိုးများကို နားလည်ရန် ကူညီပေးသည်။

၎င်းတွင် "ငါ့ကိုဆက်သွယ်ရန်"၊ "အစည်းအဝေးကို ကြိုတင်မှာယူပါ" သို့မဟုတ် အလားတူလုပ်ဆောင်ရန် ခေါ်ဆိုရန် ခလုတ်တစ်ခုပါရှိသည်။

သူရဲကောင်းအပိုင်း

2. ကျွန်ုပ်အကြောင်း ကဏ္ဍ။

စာဖတ်သူကို ကိုယ့်အကြောင်း အကျဉ်းချုပ် ပြောပြပါ။

သင်၏ပညာရေး၊ လုပ်ငန်းအတွေ့အကြုံ၊ ပရောဂျက်များနှင့် စိတ်ဝင်စားမှုများကဲ့သို့သော ဘာသာရပ်များ ထည့်သွင်းပါ။

သင်စိတ်အားထက်သန်မှု နှင့် သင်၏စူပါပါဝါများ (သင်အမှန်တကယ် ထူးချွန်သောအရာများ) ကို စာဖတ်သူအား နားလည်ရန် ကူညီပေးပါ။

တိုတိုနှင့် ရိုးရိုးရှင်းရှင်းထားရန် မမေ့ပါနှင့်။

အပိုင်းအကြောင်း

3. ပရောဂျက်များအပိုင်း။

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

သင့်အခန်းကဏ္ဍ၊ သင်လုပ်ဆောင်ခဲ့သည့်အရာနှင့် ပရောဂျက်ဖြစ်ပုံတို့ပါ၀င်သည့် ပရောဂျက်တစ်ခုစီတွင် အသေးစိတ်အချက်အလက်များကို ထည့်ပါ။

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

လုပ်ငန်းအတွေ့အကြုံအပိုင်း

4. ကျွန်ုပ်ကို ဆက်သွယ်ပါ ကဏ္ဍ။

စာဖတ်သူကို သင်မည်သို့ဆက်သွယ်နိုင်သည်၊ မည်သည့်နေရာတွင် ဆက်သွယ်နိုင်သည်ကို သိပါစေ။

သင်၏ GitHub ပရိုဖိုင်၊ LinkedIn၊ Youtube စသည်တို့ကဲ့သို့သော သင့်အဆက်အသွယ်အသေးစိတ်နှင့် အခြားအဆက်အသွယ်ချန်နယ်များကို ထည့်ပါ။

ကဏ္ဍကို ဆက်သွယ်ပါ။

အစုစု ဥပမာများ

အစုစုနမူနာအချို့ကို ကြည့်ပါ။

W3Schools Spaces တွင် အစုစုပုံစံများကို သင်တင်နိုင်သည် ကလစ်အနည်းငယ်ဖြင့် သင့်အစုစုကို ထုတ်ဝေခြင်းဖြင့် စတင်လိုက်ပါ။

ကျွန်ုပ်၏အစုစုကို အခမဲ့ ❯ ထုတ်ဝေပါ

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

အနက်ရောင်နှင့် အဖြူရောင် အစုစု နမူနာပုံစံ

Dark Portfolio Template

People Portfolio

My Portfolio Template


What do I need to know to create my own portfolio?

HTML, CSS and JavaScript are the foundational languages to create a website.

You can come a long way just using these three!

  1. Create the structure with HTML. The first thing you have to learn, is HTML, which is the standard markup language for creating web pages.
  2. Learn HTML ❯
  3. Style with CSS. The next step is to learn CSS, to set the layout of your web page with beautiful colors, fonts, and much more.
  4. Learn CSS ❯
  5. Make it interactive with JavaScript. After studying HTML and CSS, you should learn JavaScript to create dynamic and interactive web pages for your users.
  6. Learn JavaScript ❯

How to create a portfolio step-by-step

Follow the steps to create your portfolio from the ground up.


Preparations

Decide which code editor to use and set up your environment.

W3Schools has created an easy to use code editor called W3Schools Spaces. Sign up and get started in a few clicks.

Start for free ❯

Create your index.html file. So that you are ready to enter the code.

All set up. Lets go!


Step One: Add HTML Skeleton

Type an HTML skeleton code, which is the starting point for your website. It is the structure which holds the code and ensures that it is properly displayed on the internet.

Read here for how to create a basic HTML Skeleton: How to create a HTML Skeleton


Step Two: Add Navigation Bar

The navigation bar is a short representation of the content on the website.

It is one of the first things that a visitor will see.

It helps the visitors to find and navigate through the content on website. It is important to create well-structured navigation. So that your visitors can find what they are looking for.

Here is an example of how to create a top navigation bar: How to create a Top Navigation Bar


Step Three: Add Hero section

The Hero section, together with the navigation bar, is the first section of your portfolio that people will see.

It should contain short information about several things such as:

  • Who are you?
  • What do you offer?
  • What is your profession?
  • Why should people work with you?
  • Which actions should you take?

Write in first-person and keep it short and simple.

Additional things preferred in the hero section are:

  • Eye-catching graphics, either as a background or side-by-side with the text.
  • An action button that leads to content on your portfolio or to the content of another website.

Here is an example on how to create a Hero section: How to create a Hero image


Step Four: Add About Me section

In this section, you can get creative. This can help you to to stand out.

Here you can personalize the content and write about yourself more in-depth.

The content you can include in this section is:

  • Your introduction
  • Who are you as a professional
  • Your education
  • Your skills
  • Your work experience (present and/or past)
  • Your hobbies
  • Your goals and ambitions

In a way, you can consider the "About me" section as a short summary of your CV.

Feel free to write about yourself in first person.

Personalization and making people understand you as a person might bring you more attention.

Here is an example on how to create an about me section: How to create an About Me section


Step Five: Add Work Experience section

The work experience section highlights the experience, knowledge, and competence that you have made along your way.

Here you can add:

  • Links to your projects with the project name and/or short description of what the project is about.
  • Links to blog posts that you have written with title and/or short description about what it is about.
  • Your professional awards or achievements.
  • Highlighting your work and your accomplishments is a way to create opportunities for yourself.
  • Visual representations such as images or graphics.

Step Six: Add Contact section

The contact section is the section that lets your visitor get in touch with you.

You should always include a way for visitors to contact you, either through a contact form or by writing down your contact information such as:

  • Address
  • Email
  • Phone number
  • E.g. Github profile, LinkedIn profile, Youtube profile and so on.

Here is an example on how to create a basic contact section: How to create a Contact section


Step Seven: Add Footer section

The footer can be experienced as a minor section, but it is an important one of every website.

It is about showing critical information based on your website goals and the needs of your visitors.

Often it contains technical information about copyright, but it can hold other information, such as:

  • Link to "Privacy policy" page
  • Link to "Terms of use" page
  • Contact information
  • Website navigation links
  • Links to social networks
  • Link to your shop

Here is an example on how to build a footer section: How to create a Footer section


W3Schools Spaces

W3Schools Spaces

Build and publish your own Portfolio with W3Schools Spaces.

Get Started for Free