home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> CSS

สร้างเรซูเม่ HTML และ CSS ระดับมืออาชีพ:คำแนะนำทีละขั้นตอน

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

ไวยากรณ์

/* 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;
}

ส่วนประกอบดำเนินการต่อ

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

ส่วน วัตถุประสงค์ เนื้อหา ส่วนหัวข้อมูลติดต่อชื่อ ตำแหน่งงาน โทรศัพท์ อีเมลสรุปภาพรวมทางวิชาชีพคำอธิบายโดยย่อของทักษะและเป้าหมายประสบการณ์ประวัติการทำงานตำแหน่งงาน บริษัท วันที่ ความสำเร็จการศึกษาประวัติการศึกษาระดับปริญญา สถาบัน วันที่สำเร็จการศึกษาทักษะความสามารถทางเทคนิคภาษาโปรแกรม เครื่องมือ ระดับความสามารถโครงการผลงานตัวอย่างและคำอธิบายงานที่โดดเด่น

ตัวอย่าง:เค้าโครงเรซูเม่ที่สมบูรณ์

ตัวอย่างต่อไปนี้สร้างเค้าโครงเรซูเม่สองคอลัมน์ที่ทันสมัย 

<!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>
 <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>

A professional two-column resume layout appears with a purple gradient left sidebar containing contact info and skills with progress bars, and a white right section with experience and education details. The design is clean and modern with proper typography and spacing.

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

  • เค้าโครงตาราง:ใช้ CSS Grid สำหรับโครงสร้างสองคอลัมน์ที่ตอบสนอง
  • ลำดับชั้นการพิมพ์:ขนาดตัวอักษรและน้ำหนักที่แตกต่างกันสำหรับส่วนหัว
  • โทนสี:สีระดับมืออาชีพพร้อมคอนทราสต์ที่ดี
  • องค์ประกอบภาพ:แถบความคืบหน้าสำหรับทักษะ การเว้นวรรคที่สอดคล้องกัน
  • การออกแบบที่ตอบสนอง:ปรับให้เหมาะกับขนาดหน้าจอที่แตกต่างกัน

บทสรุป

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

สร้างเรซูเม่ HTML และ CSS ระดับมืออาชีพ:คำแนะนำทีละขั้นตอน