วิธีทำ

ฮาวทูโฮม

เมนู

ไอคอนบาร์ ไอคอนเมนู หีบเพลง แท็บ แท็บแนวตั้ง ส่วนหัวของแท็บ แท็บเต็มหน้า วางเมาส์เหนือแท็บ การนำทางยอดนิยม ตอบสนอง Topnav แถบนำทางพร้อมไอคอน ค้นหาเมนู แถบค้นหา แถบด้านข้างคงที่ การนำทางหน้า แถบด้านข้างที่ตอบสนอง การนำทางแบบเต็มหน้าจอ เมนูออฟแคนวาส เลื่อนปุ่ม Sidenav แถบด้านข้างพร้อมไอคอน เมนูเลื่อนแนวนอน เมนูแนวตั้ง การนำทางด้านล่าง การนำทางด้านล่างที่ตอบสนอง ลิงค์นำทางด้านล่าง ลิงค์เมนูชิดขวา ลิงค์เมนูตรงกลาง ลิงค์เมนูความกว้างเท่ากัน เมนูคงที่ แถบเลื่อนลงบน Scroll ซ่อนแถบนำทางบน Scroll ย่อแถบนำทางบน Scroll แถบนำทางติดหนึบ แถบนำทางบนรูปภาพ วางเมาส์เหนือรายการแบบเลื่อนลง คลิกเมนูแบบเลื่อนลง Cascading Dropdown ดรอปดาวน์ใน Topnav เมนูแบบเลื่อนลงใน Sidenav ตอบสนอง Navbar ดรอปดาวน์ เมนูการนำทางย่อย Dropup เมนูเมก้า เมนูมือถือ เมนูผ้าม่าน ยุบแถบด้านข้าง แผงข้างที่ยุบ การแบ่งหน้า เกล็ดขนมปัง กลุ่มปุ่ม กลุ่มปุ่มแนวตั้ง Sticky Social Bar การนำทางยา ส่วนหัวที่ตอบสนอง

รูปภาพ

สไลด์โชว์ แกลเลอรี่ภาพสไลด์ รูปภาพโมดอล ไลท์บ็อกซ์ ตารางภาพที่ตอบสนอง ตารางรูปภาพ แท็บแกลลอรี่ ภาพซ้อนทับจาง สไลด์ภาพซ้อนทับ ซูมภาพซ้อนทับ ชื่อภาพซ้อนทับ ไอคอนภาพซ้อนทับ เอฟเฟกต์ภาพ ภาพขาวดำ ข้อความรูปภาพ บล็อกข้อความรูปภาพ ข้อความรูปภาพโปร่งใส ภาพเต็มหน้า แบบฟอร์มบนรูปภาพ ภาพฮีโร่ ภาพพื้นหลังเบลอ เปลี่ยน Bg บน Scroll ภาพเคียงข้างกัน รูปภาพโค้งมน รูปภาพอวาตาร์ รูปภาพที่ตอบสนอง เซ็นเตอร์ อิมเมจ รูปขนาดย่อ ชายแดนรอบรูปภาพ พบกับทีม ภาพติดหนึบ พลิกภาพ เขย่าภาพ Portfolio Gallery ผลงานที่มีการกรอง ซูมภาพ แว่นขยายภาพ ตัวเลื่อนเปรียบเทียบรูปภาพ Favicon

ปุ่ม

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

แบบฟอร์ม

แบบฟอร์มเข้าสู่ระบบ แบบฟอร์มลงทะเบียน แบบฟอร์มการชำระเงิน แบบฟอร์มการติดต่อ แบบฟอร์มเข้าสู่ระบบโซเชียล แบบฟอร์มลงทะเบียน แบบฟอร์มที่มีไอคอน จดหมายข่าว แบบฟอร์มซ้อน แบบฟอร์มตอบสนอง แบบฟอร์มป๊อปอัป แบบฟอร์มอินไลน์ ล้างช่องป้อนข้อมูล ซ่อนลูกศรตัวเลข คัดลอกข้อความไปยังคลิปบอร์ด ค้นหาเคลื่อนไหว ปุ่มค้นหา ค้นหาแบบเต็มหน้าจอ ช่องป้อนข้อมูลใน Navbar แบบฟอร์มเข้าสู่ระบบใน Navbar กำหนดเอง ช่องทำเครื่องหมาย/วิทยุ เลือกเอง สวิตช์สลับ เลือกช่องทำเครื่องหมาย ตรวจจับ Caps Lock ปุ่มทริกเกอร์บน Enter การตรวจสอบรหัสผ่าน สลับการเปิดเผยรหัสผ่าน แบบฟอร์มหลายขั้นตอน เติมข้อความอัตโนมัติ ปิดการเติมข้อความอัตโนมัติ ปิดการตรวจตัวสะกด ปุ่มอัพโหลดไฟล์ การตรวจสอบความถูกต้องของอินพุตที่ว่างเปล่า

ตัวกรอง

รายการตัวกรอง ตารางตัวกรอง องค์ประกอบตัวกรอง กรองรายการแบบเลื่อนลง เรียงรายการ ตารางการสะกด

โต๊ะ

โต๊ะลายม้าลาย โต๊ะกลาง ตารางเต็มความกว้าง โต๊ะข้างเคียง ตารางตอบสนอง ตารางเปรียบเทียบ

มากกว่า

วิดีโอแบบเต็มหน้าจอ กล่องโมดอล ลบ Modal เส้นเวลา ตัวบ่งชี้การเลื่อน แถบความคืบหน้า แถบทักษะ ตัวเลื่อนช่วง เคล็ดลับเครื่องมือ แสดงองค์ประกอบ Hover ป๊อปอัพ พับได้ ปฏิทิน HTML รวม รายการสิ่งที่ต้องทำ รถตัก ระดับดาว คะแนนของผู้ใช้ เอฟเฟกต์ภาพซ้อนทับ ติดต่อชิป การ์ด พลิกการ์ด การ์ดโปรไฟล์ บัตรผลิตภัณฑ์ การแจ้งเตือน โทรออก หมายเหตุ ป้าย แวดวง สไตล์ HR คูปอง รายการกลุ่ม รายการที่ไม่มีสัญลักษณ์แสดงหัวข้อย่อย ข้อความตอบสนอง ข้อความคัตเอาท์ ข้อความเรืองแสง แก้ไขส่วนท้าย องค์ประกอบเหนียว ความสูงเท่ากัน Clearfix ลอยตัวตอบสนอง สแน็คบาร์ หน้าต่างเต็มหน้าจอ วาดเลื่อน เลื่อนเรียบ เลื่อน Bg ไล่ระดับ ติดหัว ย่อส่วนหัวบน Scroll ตารางราคา พารัลแลกซ์ อัตราส่วนภาพ Iframes ที่ตอบสนอง สลับชอบ/ไม่ชอบ สลับซ่อน/แสดง สลับโหมดมืด สลับข้อความ สลับคลาส เพิ่มคลาส ลบคลาส คลาสที่ใช้งาน วิวต้นไม้ ลบทรัพย์สิน การตรวจจับออฟไลน์ ค้นหาองค์ประกอบที่ซ่อนอยู่ เปลี่ยนเส้นทางหน้าเว็บ ซูมโฮเวอร์ พลิกกล่อง ตั้งศูนย์ในแนวตั้ง ปุ่มกลางใน DIV การเปลี่ยนแปลงเมื่อวางเมาส์เหนือ ลูกศร รูปร่าง ลิ้งค์ดาวน์โหลด องค์ประกอบความสูงเต็ม หน้าต่างเบราว์เซอร์ แถบเลื่อนแบบกำหนดเอง ซ่อนแถบเลื่อน แสดง/บังคับแถบเลื่อน ดูอุปกรณ์ เส้นขอบที่แก้ไขได้ ตัวยึดสี สีการเลือกข้อความ สีกระสุน เส้นแนวตั้ง วงเวียน ไอคอนเคลื่อนไหว นาฬิกาจับเวลาถอยหลัง เครื่องพิมพ์ดีด เร็วๆ นี้ เพจ ข้อความแชท หน้าต่างแชทแบบป๊อปอัป หน้าจอแยก ข้อความรับรอง ส่วนเคาน์เตอร์ สไลด์โชว์คำคม รายการที่ปิดได้ เบรกพอยต์อุปกรณ์ทั่วไป องค์ประกอบ HTML ที่ลากได้ JS Media Queries ปากกาเน้นข้อความ JS Animations JS String Length JS การยกกำลัง JS พารามิเตอร์เริ่มต้น รับ URL ปัจจุบัน รับขนาดหน้าจอปัจจุบัน รับองค์ประกอบ Iframe

เว็บไซต์

สร้างเว็บไซต์ฟรี ทำเว็บไซต์ สร้างเว็บไซต์แบบคงที่ สร้างเว็บไซต์ (W3.CSS) สร้างเว็บไซต์ (BS3) สร้างเว็บไซต์ (BS4) สร้างเว็บไซต์ (BS5) สร้างและดูเว็บไซต์ สร้างเว็บไซต์ลิงค์ทรี สร้างผลงาน สร้างเรซูเม่ ทำเว็บไซต์ร้านอาหาร ทำเว็บไซต์ธุรกิจ ทำเว็บบุ๊ก เว็บไซต์ศูนย์ ส่วนติดต่อ เกี่ยวกับเพจ หัวโต ตัวอย่างเว็บไซต์

กริด

เค้าโครง 2 คอลัมน์ เค้าโครง 3 คอลัมน์ เค้าโครง 4 คอลัมน์ ขยายกริด แสดงรายการมุมมองกริด เค้าโครงคอลัมน์แบบผสม การ์ดคอลัมน์ เค้าโครงซิกแซก เค้าโครงบล็อก

Google

Google Charts Google Fonts การจับคู่แบบอักษรของ Google Google ตั้งค่า Analytics

ตัวแปลงสัญญาณ

แปลงน้ำหนัก แปลงอุณหภูมิ แปลงความยาว แปลงความเร็ว

บล็อก

รับงานนักพัฒนา มาเป็น Front-End Dev

วิธีการสร้างพอร์ตโฟลิโอ

พอร์ตโฟลิโอเป็นสิ่งสำคัญที่จะได้รับการสังเกต

การสร้างพอร์ตโฟลิโอเป็นวิธีที่ดีในการขยายสถานะออนไลน์ของคุณ

พอร์ตโฟลิโอใช้เพื่อแสดงทักษะและโครงการของคุณ

มันสามารถช่วยให้คุณได้งานทำ งานฟรีแลนซ์ หรือการฝึกงาน

สร้างพอร์ตโฟลิโอของฉันได้ฟรี »

พอร์ตโฟลิโอคืออะไร

พอร์ตโฟลิโอสามารถมีจุดประสงค์เดียวกับประวัติย่อ CV ส่วนใหญ่เขียนด้วยข้อความ ในขณะที่พอร์ตโฟลิโอมีไว้สำหรับการจัดแสดง ดังนั้นจึงเป็นภาพที่มองเห็นได้และมักจะมีรายละเอียดมากกว่า CV

เป็นสถานที่ที่คุณสามารถแสดงประสบการณ์การทำงานของคุณและแสดงโครงการที่คุณภาคภูมิใจที่สุด

สามารถแชร์พอร์ตโฟลิโอออนไลน์ของคุณพร้อมลิงก์ไปยังบริษัท ผู้จัดการการจ้างงาน และผู้สรรหาบุคลากร เพื่อให้พวกเขาสามารถสังเกตเห็นคุณได้

เป็นการแสดงและให้ผู้อื่นเข้าใจว่าคุณเป็นใครในฐานะมืออาชีพ


ทำไมต้องสร้างพอร์ตโฟลิโอ

เป็นวิธีที่ยอดเยี่ยมในการขยายสถานะออนไลน์ของคุณและเป็นที่สังเกต

สามารถใช้เพื่อหางานหรือดึงดูดลูกค้าให้มาใช้บริการของคุณได้

มีออนไลน์เป็นเว็บไซต์ ทำให้ผู้คนทั่วโลกสามารถค้นหาคุณได้

การออกแบบผลงานจะทำให้ผู้อ่านรู้สึกว่าคุณเป็นใคร รับรองว่าดูดีและดูดี!


ใครคือพอร์ตโฟลิโอสำหรับ

การสร้างพอร์ตโฟลิโอมีความสำคัญต่ออาชีพการงานของคุณ

มันสามารถเป็นประโยชน์ในการหางาน งานฟรีแลนซ์ หรือแสดงทักษะของคุณต่อลูกค้าใหม่

บทบาททั่วไปที่ใช้พอร์ตโฟลิโอคือมืออาชีพ เช่น แต่ไม่จำกัดเฉพาะ:

  • นักพัฒนาซอฟต์แวร์
  • นักออกแบบ UX
  • นักออกแบบกราฟิก
  • ช่างภาพ
  • ผู้เชี่ยวชาญด้านการตลาด
  • สถาปนิก
  • นักเขียน

เคยได้ยินเกี่ยวกับW3Schools Spacesไหม? ที่นี่คุณสามารถสร้างพอร์ตโฟลิโอตั้งแต่เริ่มต้นหรือใช้เทมเพลตและโฮสต์ได้ฟรี

เริ่มต้นฟรี ❯

* ไม่ต้องใช้บัตรเครดิต


อะไรคือส่วนที่สำคัญที่สุดในพอร์ตโฟลิโอ

มีหลายวิธีในการสร้างพอร์ตโฟลิโอ

วิธีสร้างมันขึ้นอยู่กับว่าคุณเป็นมืออาชีพประเภทไหน คุณกำลังสร้างมันขึ้นมาเพื่อใคร และทำไมคุณถึงสร้างมันขึ้นมา

คุณต้องทดสอบ ล้มเหลว และเรียนรู้เพื่อค้นหาพอร์ตโฟลิโอประเภทใดที่เหมาะกับคุณ!

มีบางส่วนที่จำเป็นสำหรับพอร์ตการลงทุนทุกประเภท สรุปได้ดังนี้:

1. ส่วนฮีโร่

ส่วนฮีโร่เป็นสิ่งแรกที่ผู้คนเห็นเมื่อเข้าสู่พอร์ตโฟลิโอของคุณ

จะแสดงภายใต้โลโก้และเมนูของคุณ

ส่วนฮีโร่ช่วยให้ผู้อ่านเข้าใจสิ่งที่คุณเสนอ เหตุใดบุคคลควรร่วมงานกับคุณ และคุณค่าที่คุณมอบให้กับบริการของคุณ

มักจะมีปุ่มเรียกร้องให้ดำเนินการ เช่น "ติดต่อฉัน" "จองการประชุม" หรือคล้ายกัน

ส่วนฮีโร่

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