สร้าง Resume HTML & CSS ด้านมืออาชีพ: คู่มือทีละขั้นตอน

การสร้าง Resume (ประวัติส่วนตัว) แบบมืออาชีพด้วย HTML และ CSS ช่วยให้คุณสร้างเอกสารที่ดูดูดใจ ปรับแต่งได้ และแชร์แบบดิจิทัลได้ง่าย Resume ที่มีโครงสร้างดี จะแสดงทักษะและประสบการณ์อย่างมีประสิทธิภาพ พร้อมรักษาลักษณะมืออาชีพบนอุปกรณ์ต่างๆ

Syntax

/* Basic Resume Layout Structure */
.container { display: grid; grid-template-columns: 1fr 2fr; max-width: 1000px; margin: 0 auto; }
.left-section { background-color: #333; color: white; padding: 20px; }
.right-section { background-color: white; padding: 20px; }

ส่วนประกอบของ Resume

Resume มืออาชีพทั่วไปประกอบด้วยส่วนสำคัญเหล่านี้

ตัวอย่าง: Complete Resume Layout

ตัวอย่างต่อไปสร้าง Modern Two-column Resume Layout

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Professional Resume</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Arial', sans-serif; } body { background-color: #f5f5f5; display: flex; justify-content: center; padding: 20px; } .resume-container { width: 100%; max-width: 900px; background: white; display: grid; grid-template-columns: 300px 1fr; box-shadow: 0 4px 20px rgba(0,0,0,0.1); overflow: hidden; } .left-section { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 30px 20px; } .profile-img { width: 120px; height: 120px; border-radius: 50%; background-color: #fff; margin: 0 auto 20px; display: flex; align-items: center; justify-content: center; font-size: 48px; color: #667eea; font-weight: bold; } .left-section h2 { text-align: center; margin-bottom: 10px; font-size: 1.5em; } .left-section .title { text-align: center; font-size: 0.9em; opacity: 0.9; margin-bottom: 30px; } .section-title { color: #fff; font-size: 1.1em; margin: 25px 0 15px 0; padding-bottom: 5px; border-bottom: 2px solid rgba(255,255,255,0.3); } .contact-info { list-style: none; } .contact-info li { margin: 10px 0; font-size: 0.9em; } .skills-list { list-style: none; } .skill-item { margin: 15px 0; } .skill-name { font-size: 0.9em; margin-bottom: 5px; } .skill-bar { background: rgba(255,255,255,0.3); height: 6px; border-radius: 3px; overflow: hidden; } .skill-progress { height: 100%; background: #fff; border-radius: 3px; } .right-section { padding: 30px; } .right-section h1 { color: #333; font-size: 2em; margin-bottom: 10px; } .right-section .job-title { color: #667eea; font-size: 1.2em; margin-bottom: 30px; } .right-section .section-title { color: #333; font-size: 1.3em; margin: 30px 0 15px 0; padding-bottom: 5px; border-bottom: 2px solid #667eea; } .experience-item { margin: 20px 0; } .experience-item h4 { color: #333; font-size: 1.1em; } .experience-item .company { color: #667eea; font-weight: bold; } .experience-item .date { color: #666; font-size: 0.9em; font-style: italic; } .experience-item ul { margin-top: 10px; padding-left: 20px; } .experience-item li { color: #555; margin: 5px 0; } </style> </head> <body> <div class="resume-container"> <div class="left-section"> <div class="profile-img">JS</div> <h2>John Smith</h2> <p class="title">Full Stack Developer</p> <h3 class="section-title">Contact</h3> <ul class="contact-info"> <li>? john.smith@email.com</li> <li>? +1 (555) 123-4567</li> <li>? linkedin.com/in/johnsmith</li> <li>? New York, NY</li> </ul> <h3 class="section-title">Skills</h3> <div class="skills-list"> <div class="skill-item"> <div class="skill-name">JavaScript</div> <div class="skill-bar"> <div class="skill-progress" style="width: 90%"></div> </div> </div> <div class="skill-item"> <div class="skill-name">React</div> <div class="skill-bar"> <div class="skill-progress" style="width: 85%"></div> </div> </div> <div class="skill-item"> <div class="skill-name">Node.js</div> <div class="skill-bar"> <div class="skill-progress" style="width: 80%"></div> </div> </div> </div> <div class="right-section"> <h1>John Smith</h1> <p class="job-title">Full Stack Developer</p> <h3 class="section-title">Summary</h3> <p>Experienced Full Stack Developer with 5+ years of expertise in building scalable web applications using modern JavaScript frameworks and cloud technologies.</p> <h3 class="section-title">Experience</h3> <div class="experience-item"> <h4>Senior Developer at <span class="company">Tech Solutions Inc.</span></h4> <p class="date">2021 - Present</p> <ul> <li>Led development of customer portal serving 10,000+ users</li> <li>Improved application performance by 40% through optimization</li> <li>Mentored junior developers and conducted code reviews</li> </ul> </div> <div class="experience-item"> <h4>Junior Developer at <span class="company">StartUp Co.</span></h4> <p class="date">2019 - 2021</p> <ul> <li>Developed responsive web applications using React and Node.js</li> <li>Collaborated with design team to implement user interfaces</li> </ul> </div> <h3 class="section-title">Education</h3> <div class="experience-item"> <h4>Bachelor of Computer Science</h4> <p class="company">University of Technology</p> <p class="date">2015 - 2019</p> </div> </div> </div> </body> </html>

Resume Layout 2 คอลัมน์มืออาชีพปรากฏ: Sidebar ซ้าย Gradient สีม่วง มี Contact Info และ Skills พร้อม Progress Bars, Section ขวาสีขาวมี Experience และ Education รายละเอียด Design สะอาด ทันสมัย Typography และ Spacing ถูกต้อง

หลักการออกแบบสำคัญ

• Grid Layout: ใช้ CSS Grid สำหรับโครงสร้าง 2 คอลัมน์ Responsive
• Typography Hierarchy: Font Sizes และ Weights ต่างกันสำหรับ Headings
• Color Scheme: สีมืออาชีพพร้อม Contrast ที่ดี
• Visual Elements: Progress Bars สำหรับ Skills, Spacing สม่ำเสมอ
• Responsive Design: ปรับตัวตามขนาดหน้าจอต่างๆ

สรุป

การสร้าง Resume ด้วย HTML และ CSS ให้คุณควบคุม Design และ Layout ได้เต็มที่ พร้อมรับประกันการนำเสนอมืออาชีพ การผสมผสาน Semantic HTML Structure และ Modern CSS Styling สร้าง Resume ที่ดูดูดใจ เข้าถึงได้ และโดดเด่นในรูปแบบดิจิทัล