Tôi có thể tạo sơ yếu lý lịch bằng HTML và CSS không?

Không ai thích ngồi xuống và viết sơ yếu lý lịch của họ, phải không?

Vì thế. tại sao việc viết sơ yếu lý lịch của chúng tôi bằng các công cụ như Microsoft Word là thông thường khi chúng tôi có tất cả các kỹ năng CSS này chỉ chờ được sử dụng

Tạo một sơ yếu lý lịch PDF toàn trang, đầy đủ, hoàn toàn tùy chỉnh từ một trang web thật dễ dàng, nó chỉ phụ thuộc vào một đoạn mã CSS

@media print {
    body {
        width: 8.25in;
        height: 11.75in;
        margin: 0 0 0 0;
    }
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Điều này sẽ giúp khi bạn in một trang web trong Chrome, nó sẽ in trang đó vừa khít hoàn toàn với kích thước của một tờ giấy A4

Cài đặt khác duy nhất bạn cần điều chỉnh tại màn hình xem trước bản in trong Chrome; . Sơ yếu lý lịch HTML & CSS tùy chỉnh dưới dạng sơ yếu lý lịch kỹ thuật số toàn trang

Ghi chú. Khi thiết kế sơ yếu lý lịch mới của bạn, tốt nhất bạn nên làm việc với chế độ xem tùy chỉnh trong công cụ dành cho nhà phát triển thay vì phải vào phần xem trước bản in mỗi lần để xem nó trông như thế nào trên giấy - Bạn có thể đặt nó thành 825 x 1175 để tương ứng với giấy

Lưu ý 2. Điều này chỉ hoạt động trong Chrome vì ngay bây giờ tôi không thể thấy cách nào để thực hiện in đầy đủ sang PDF trong Firefox

Các lợi ích bổ sung cuối cùng để thuyết phục bạn

• Tất cả các liên kết thẻ

  input {
    display: none;
  }
  
  section > div {
    display: none;
  }
  
  #radio-section-0:checked ~ #section-0 > div {
    display: block;
  }
  
  #radio-section-1:checked ~ #section-1 > div {
    display: block;
  }
  
  #radio-section-2:checked ~ #section-2 > div {
    display: block;
  }
  

  6 trong trang web của bạn sẽ vẫn hoạt động như các liên kết hoạt động trong tệp PDF cuối cùng của bạn
• Thay vì bị mắc kẹt với MS Office, bạn có thể tạo sơ yếu lý lịch của mình bằng bất kỳ công cụ nào bạn cảm thấy thoải mái; . (Tôi chắc chắn không nói rằng bạn nên, tôi chỉ. nói rằng bạn có thể)
• Bạn có thể có hình nền tùy chỉnh của riêng mình để làm nổi bật sơ yếu lý lịch của bạn. Sử dụng nhiều màu sắc để làm nổi bật nó hoặc có thể chọn một nền trắng nhạt có kết cấu cho thứ gì đó sang trọng hơn một chút.
  

Vì vậy, có bạn có nó. Hãy sáng tạo, sử dụng những kỹ năng nhà phát triển đó và thực sự thích viết CV của bạn một lần. -)

Trong một thời gian, tôi đã đùa giỡn với ý tưởng tạo một phiên bản HTML cho sơ yếu lý lịch của mình trông giống như phiên bản giấy của nó

Là một Nhà phát triển web, tôi nghĩ sẽ rất tuyệt nếu gửi CV của mình dưới dạng tệp HTML thay vì tài liệu PDF hoặc Word. Nó sẽ là bản gốc và giúp giới thiệu một số điều tôi có thể làm

Ghi chú. trong khi phát triển CV HTML có thể là một dự án thú vị để hoàn thành và thêm một yếu tố thú vị vào quy trình tuyển dụng, nó có thể không thực tế lắm. Đặc biệt là khi xem xét rằng hầu hết các trang web tuyển dụng không hỗ trợ tải lên HTML

Có một số hạn chế rõ ràng và các vấn đề có thể thấy trước, nhưng tôi có thể khắc phục chúng

• Nó không nên có JavaScript. nhiều trình duyệt chặn JavaScript khi chạy trên các tệp cục bộ. Sẽ thật tồi tệ nếu tôi gửi sơ yếu lý lịch của mình và nó bị chặn bởi trình duyệt trong khi hiển thị thông báo bảo mật khó chịu
• Nó sẽ hoạt động ngoại tuyến. nếu người đang xem tài liệu không có kết nối Internet thì tài liệu vẫn hiển thị chính xác. Vì vậy, không có CDN hoặc hình ảnh hoặc tệp trực tuyến
• Nó nên được khép kín. Mình không gửi được nhiều file ảnh, CSS, HTML vì nếu mất hoặc không tải về được thì CV sẽ xấu. Kiểu dáng và hình ảnh (SVG nếu cần) sẽ phải nằm trong một tệp HTML
• Nó sẽ hoạt động trong hầu hết các trình duyệt. sử dụng một tính năng ưa thích có thể thất bại và phản tác dụng. Nó phải hoạt động trong hầu hết các trình duyệt hiện đại. và điều đó bao gồm IE11, vẫn phổ biến trong môi trường doanh nghiệp
• Nó phải thân thiện với con người và máy móc. nó không chỉ có thể truy cập web mà còn phải dễ dàng xử lý và hiểu bằng máy tính. ngay cả khi hầu hết các trang web tuyển dụng không chấp nhận HTML là định dạng hợp lệ để tải tệp lên

Và với suy nghĩ đó, tôi bắt đầu làm việc với phiên bản đầu tiên của tài liệu

nỗ lực đầu tiên

Bắt chước sơ yếu lý lịch trên giấy của tôi bằng HTML tương đối dễ dàng, sau đó tôi đã tiến thêm một bước và thêm một số tương tác

Nó có vẻ ổn, nhưng tôi đã có một phiên bản giấy của bản lý lịch đó. Ngay cả với một số tương tác, nó trông hơi mờ và không có tất cả những gì nó cần. Ngoài ra, tôi đã không tận dụng được tất cả các khả năng mà HTML và CSS cung cấp

Vì vậy, tôi quyết định vượt xa điều đó

Phiên bản mở rộng

Tại sao lại giới hạn nó để trông giống như phiên bản giấy nhàm chán?

Tôi đã phát triển một phiên bản mới của sơ yếu lý lịch, và lần này nó có nhiều điểm nhấn hơn. một trải nghiệm tương tác mà khi được in ra trông giống như bản lý lịch giấy thông thường của tôi. Đây là một bản trình diễn

Để phát triển phiên bản này, tôi tập trung vào năm yếu tố chính

1. Một vòng quay khác về thiết kế và tương tác
2. Nhiều chế độ kiểu (cho màn hình và máy in)
3. Sử dụng HTML ngữ nghĩa
4. Metadata
5. vi dữ liệu

Ý tưởng là một sơ yếu lý lịch là cả hai phần trình bày như nhau (điểm 1 và 2) và dữ liệu (điểm 3, 4 và 5). Nếu CV trực quan hấp dẫn người đọc, sẽ có nhiều cơ hội thu hút sự chú ý hơn. Đồng thời, CV thường được xử lý bằng máy tính, vì vậy việc làm cho chúng hấp dẫn đối với người đọc máy cũng là một phần quan trọng.

HTML ngữ nghĩa

Một trong những thay đổi lớn trong HTML5 là bao gồm nhiều thẻ ngữ nghĩa. Các nhà phát triển không cần phải bám vào

input {
  display: none;
}

section > div {
  display: none;
}

#radio-section-0:checked ~ #section-0 > div {
  display: block;
}

#radio-section-1:checked ~ #section-1 > div {
  display: block;
}

#radio-section-2:checked ~ #section-2 > div {
  display: block;
}

input {
  display: none;
}

section > div {
  display: none;
}

#radio-section-0:checked ~ #section-0 > div {
  display: block;
}

#radio-section-1:checked ~ #section-1 > div {
  display: block;
}

#radio-section-2:checked ~ #section-2 > div {
  display: block;
}

Nhưng chúng ta đừng tập trung hoàn toàn vào

input {
  display: none;
}

section > div {
  display: none;
}

#radio-section-0:checked ~ #section-0 > div {
  display: block;
}

#radio-section-1:checked ~ #section-1 > div {
  display: block;
}

#radio-section-2:checked ~ #section-2 > div {
  display: block;
}

input {
  display: none;
}

section > div {
  display: none;
}

#radio-section-0:checked ~ #section-0 > div {
  display: block;
}

#radio-section-1:checked ~ #section-1 > div {
  display: block;
}

#radio-section-2:checked ~ #section-2 > div {
  display: block;
}

• input {
    display: none;
  }
  
  section > div {
    display: none;
  }
  
  #radio-section-0:checked ~ #section-0 > div {
    display: block;
  }
  
  #radio-section-1:checked ~ #section-1 > div {
    display: block;
  }
  
  #radio-section-2:checked ~ #section-2 > div {
    display: block;
  }
  

  2. biểu thị một khoảng thời gian và thật hoàn hảo để gắn thẻ ngày làm việc trước đó hoặc ngày tốt nghiệp, v.v. ;

• input {
    display: none;
  }
  
  section > div {
    display: none;
  }
  
  #radio-section-0:checked ~ #section-0 > div {
    display: block;
  }
  
  #radio-section-1:checked ~ #section-1 > div {
    display: block;
  }
  
  #radio-section-2:checked ~ #section-2 > div {
    display: block;
  }
  

  3. điều quan trọng cần chỉ ra là địa chỉ này không được sử dụng cho địa chỉ thực, mà là thông tin liên hệ của những người liên quan đến

  input {
    display: none;
  }
  
  section > div {
    display: none;
  }
  
  #radio-section-0:checked ~ #section-0 > div {
    display: block;
  }
  
  #radio-section-1:checked ~ #section-1 > div {
    display: block;
  }
  
  #radio-section-2:checked ~ #section-2 > div {
    display: block;
  }
  

  4 hoặc

  input {
    display: none;
  }
  
  section > div {
    display: none;
  }
  
  #radio-section-0:checked ~ #section-0 > div {
    display: block;
  }
  
  #radio-section-1:checked ~ #section-1 > div {
    display: block;
  }
  
  #radio-section-2:checked ~ #section-2 > div {
    display: block;
  }
  

  5 gần nhất và địa chỉ này có thể chứa email, URL, địa chỉ Twitter

Ngoài ra, đừng quên về

input {
  display: none;
}

section > div {
  display: none;
}

#radio-section-0:checked ~ #section-0 > div {
  display: block;
}

#radio-section-1:checked ~ #section-1 > div {
  display: block;
}

#radio-section-2:checked ~ #section-2 > div {
  display: block;
}

input {
  display: none;
}

section > div {
  display: none;
}

#radio-section-0:checked ~ #section-0 > div {
  display: block;
}

#radio-section-1:checked ~ #section-1 > div {
  display: block;
}

#radio-section-2:checked ~ #section-2 > div {
  display: block;
}

input {
  display: none;
}

section > div {
  display: none;
}

#radio-section-0:checked ~ #section-0 > div {
  display: block;
}

#radio-section-1:checked ~ #section-1 > div {
  display: block;
}

#radio-section-2:checked ~ #section-2 > div {
  display: block;
}

input {
  display: none;
}

section > div {
  display: none;
}

#radio-section-0:checked ~ #section-0 > div {
  display: block;
}

#radio-section-1:checked ~ #section-1 > div {
  display: block;
}

#radio-section-2:checked ~ #section-2 > div {
  display: block;
}

Tôi nên nhận lời khuyên của riêng mình về các danh sách, vì tôi đã mắc lỗi này khi phát triển sơ yếu lý lịch HTML của mình 😬

Nếu không mắc lỗi chính tả hoặc ngữ pháp là điều quan trọng đối với một "bản lý lịch giấy" thì đối với phiên bản web, điều quan trọng là phải cấu trúc nội dung đúng cách. Đừng quên

• Chia nội dung thành các phần
• Thêm tiêu đề cho mỗi phần
• Có một thứ tự tiêu đề thích hợp (không bỏ qua các tiêu đề)
• Để lại nhận xét trong mã
• Sử dụng các thẻ ngữ nghĩa phù hợp
• Làm cho nó trở thành HTML và CSS tiêu chuẩn
• Hãy nghĩ về hỗ trợ trình duyệt (ngay cả khi điều đó có nghĩa là bỏ đi một số nội dung ưa thích)

Cấu trúc nội dung chính xác sẽ cực kỳ hữu ích khi tạo kiểu cho nó. Nhưng hãy nhớ. bạn muốn CV của mình trông đẹp ngay cả trong HTML đơn giản (không có bất kỳ CSS nào). Bằng cách đó, nếu có sự cố xảy ra với phong cách, bạn vẫn sẽ có thứ khả thi

Thiết kế và Tương tác

Bây giờ chúng ta đã cấu trúc và xây dựng HTML của mình, đã đến lúc thêm một số phép thuật thông qua CSS. Tôi biết điều này nghe có vẻ sáo rỗng, nhưng đó là sự thật, giới hạn duy nhất ở đây là trí tưởng tượng của bạn

Làm nổi bật trong "của bạn". Phần này nên là bạn. Tôi có thể mô tả cách tôi tạo ra của tôi, nhưng sau đó nó sẽ không mang tính cá nhân đối với bạn. Cuối cùng, bạn là người cần đưa ra một thiết kế và áp dụng nó

Đối với HTML, hãy tính đến loại tài liệu và đối tượng mục tiêu của bạn

• Ghi nhớ về độ tương phản màu sắc và khả năng tiếp cận
• Sử dụng phông chữ dễ đọc (và đừng quên các phông chữ dự phòng phổ biến. )
• Không sử dụng màu flash
• Không sử dụng hình ảnh động có thể gây mất tập trung
• Giữ nó chuyên nghiệp

trừ khi đó không phải là những gì bạn muốn đi với. Một lần nữa, đây là khoảnh khắc sáng tạo của bạn. Làm những gì cảm thấy đúng (chỉ cần đảm bảo rằng nó có thể truy cập web. )

Đối với tôi, tôi đã chọn một kiểu thẻ tương đối đơn giản, với các đường cắt chéo và trong đó thông tin được đẩy lên hoặc xuống tùy thuộc vào phần nào đang hoạt động (để biết thêm về điều đó, hãy tiếp tục đọc)

tương tác

Chúng tôi không sử dụng bất kỳ JavaScript nào, vì vậy việc thêm tính tương tác sẽ là một thách thức nhỏ. nhưng nó có thể làm được

Thủ thuật là sử dụng các thành phần biểu mẫu ẩn trực quan – chủ yếu là các nút radio hoặc hộp kiểm – để lưu trạng thái của tài liệu, theo dõi xem phần nào sẽ hiển thị tại mỗi thời điểm nhất định. Sau đó, bạn có thể kích hoạt/hủy kích hoạt đầu vào bằng cách sử dụng nhãn nhắm mục tiêu chúng

Đây là điều mà tôi đã làm trước đây để tạo trò chơi CSS. Có thể mất một chút thời gian để làm quen với nó, nhưng đây sẽ là cách thực hành tốt cho CSS và nó sẽ giúp bạn tìm hiểu rất nhiều về bộ chọn và bộ sửa đổi

Đây là một sự đơn giản hóa về cách nó có thể trông

input {
  display: none;
}

section > div {
  display: none;
}

#radio-section-0:checked ~ #section-0 > div {
  display: block;
}

#radio-section-1:checked ~ #section-1 > div {
  display: block;
}

#radio-section-2:checked ~ #section-2 > div {
  display: block;
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

input {
  display: none;
}

section > div {
  display: none;
}

#radio-section-0:checked ~ #section-0 > div {
  display: block;
}

#radio-section-1:checked ~ #section-1 > div {
  display: block;
}

#radio-section-2:checked ~ #section-2 > div {
  display: block;
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Bạn có thể thấy nó hoạt động ở đây (nhấp vào tiêu đề để kích hoạt từng phần)

Trong trường hợp của tôi, tôi có hai bộ nút radio

• Một người theo dõi xem người dùng đang ở phần nào (mặc định là phần đầu tiên)
• Cái còn lại theo dõi vị trí nào (trong phần trải nghiệm) sẽ hiển thị

Chỉ cần lưu ý rằng, bạn càng có nhiều nhóm radio, trang sẽ càng phức tạp.

phong cách in ấn

Chúng tôi có một sơ yếu lý lịch tương tác đẹp mắt, nhưng nếu người dùng cố gắng in nó, nó trông không đẹp. Giải pháp. tạo kiểu cho phiên bản in theo một cách khác với phiên bản màn hình

CSS cho phép các kiểu in cụ thể nằm trong quy tắc phương tiện

input {
  display: none;
}

section > div {
  display: none;
}

#radio-section-0:checked ~ #section-0 > div {
  display: block;
}

#radio-section-1:checked ~ #section-1 > div {
  display: block;
}

#radio-section-2:checked ~ #section-2 > div {
  display: block;
}

input {
  display: none;
}

section > div {
  display: none;
}

#radio-section-0:checked ~ #section-0 > div {
  display: block;
}

#radio-section-1:checked ~ #section-1 > div {
  display: block;
}

#radio-section-2:checked ~ #section-2 > div {
  display: block;
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Ở đó chúng ta có thể xác định bất cứ thứ gì, vị trí khác nhau, hiển thị, màu sắc. bất cứ điều gì CSS cho phép làm. Nhưng với quy tắc phương tiện

input {
  display: none;
}

section > div {
  display: none;
}

#radio-section-0:checked ~ #section-0 > div {
  display: block;
}

#radio-section-1:checked ~ #section-1 > div {
  display: block;
}

#radio-section-2:checked ~ #section-2 > div {
  display: block;
}

Một trong những điều tôi gặp khó khăn là kích thước trang. Và đó là điều quan trọng. Mặc dù màn hình hoạt động theo pixel, nhưng máy in thì không và chúng tôi có thể không nhận được kết quả như mong đợi nếu chúng tôi không sử dụng đúng khổ giấy. Ở Hoa Kỳ, phổ biến nhất là "chữ cái", nhưng bạn có thể chỉ định các loại khác như A4 hoặc các giá trị cụ thể trong

input {
  display: none;
}

section > div {
  display: none;
}

#radio-section-0:checked ~ #section-0 > div {
  display: block;
}

#radio-section-1:checked ~ #section-1 > div {
  display: block;
}

#radio-section-2:checked ~ #section-2 > div {
  display: block;
}

input {
  display: none;
}

section > div {
  display: none;
}

#radio-section-0:checked ~ #section-0 > div {
  display: block;
}

#radio-section-1:checked ~ #section-1 > div {
  display: block;
}

#radio-section-2:checked ~ #section-2 > div {
  display: block;
}

input {
  display: none;
}

section > div {
  display: none;
}

#radio-section-0:checked ~ #section-0 > div {
  display: block;
}

#radio-section-1:checked ~ #section-1 > div {
  display: block;
}

#radio-section-2:checked ~ #section-2 > div {
  display: block;
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Bằng cách xác định các kiểu khác nhau cho màn hình và máy in, việc hiển thị ở cả hai định dạng sẽ hoàn toàn khác nhau

Nó có thể là gấp đôi công việc, nhưng kết quả khác nhau là xứng đáng

Metadata

Tôi đã viết một bài báo về tầm quan trọng của siêu dữ liệu trong các trang web (để chúng không bị "nhầm lẫn"). Nó bao gồm thông tin về siêu dữ liệu và vi dữ liệu (xem phần sau) và tất cả nội dung cũng sẽ áp dụng ở đây

Dưới đây là một số điều cần thêm vào sơ yếu lý lịch tương tác HTML của bạn

siêu dữ liệu HTML

Đây là thẻ

input {
  display: none;
}

section > div {
  display: none;
}

#radio-section-0:checked ~ #section-0 > div {
  display: block;
}

#radio-section-1:checked ~ #section-1 > div {
  display: block;
}

#radio-section-2:checked ~ #section-2 > div {
  display: block;
}

Vài ví dụ

input {
  display: none;
}

section > div {
  display: none;
}

#radio-section-0:checked ~ #section-0 > div {
  display: block;
}

#radio-section-1:checked ~ #section-1 > div {
  display: block;
}

#radio-section-2:checked ~ #section-2 > div {
  display: block;
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Nó có thể không quan trọng hoặc có liên quan như trước đây, nhưng nó vẫn là. Và đó là một bất tiện nhỏ để thêm chúng

Siêu dữ liệu truyền thông xã hội

Chúng ta đang sống trong một thế giới kết nối, trong đó tài liệu có thể được chia sẻ trên mạng xã hội. Có thể không nhiều Facebook hay Twitter, nhưng LinkedIn hoặc các mạng chuyên nghiệp khác

Vì vậy, bạn có thể muốn thêm thẻ meta OpenGraph và có thể cả một số thẻ meta phương tiện truyền thông xã hội

input {
  display: none;
}

section > div {
  display: none;
}

#radio-section-0:checked ~ #section-0 > div {
  display: block;
}

#radio-section-1:checked ~ #section-1 > div {
  display: block;
}

#radio-section-2:checked ~ #section-2 > div {
  display: block;
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Hãy lưu ý rằng đây là tất cả các đề xuất. nội dung của chúng không nhất thiết phải giống hoàn toàn với các thẻ meta HTML (ngay cả khi cuối cùng thì có thể như vậy) và tất cả chúng đều là tùy chọn (đặc biệt là nhìn vào hình ảnh, điều này có thể không được coi là phù hợp với một CV ở một số quốc gia). . )

Ngoài siêu dữ liệu. vi dữ liệu

Mặc dù sử dụng siêu dữ liệu HTML và thẻ ngữ nghĩa là một bước tiến tuyệt vời, nhưng nó không cung cấp tất cả thông tin để máy xử lý và hiểu dữ liệu có trong tài liệu. Ví dụ: hãy xem mã này

input {
  display: none;
}

section > div {
  display: none;
}

#radio-section-0:checked ~ #section-0 > div {
  display: block;
}

#radio-section-1:checked ~ #section-1 > div {
  display: block;
}

#radio-section-2:checked ~ #section-2 > div {
  display: block;
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Máy tính sẽ nhìn thấy mã HTML đơn giản đó và nghĩ "Tuyệt vời. có một phần có tiêu đề và một số nội dung và một liên kết", nhưng nó sẽ không biết nội dung đó là gì. Một số chương trình có thể thông minh hơn và phát hiện email, nhưng mối quan hệ giữa nội dung, email và liên kết sẽ không rõ ràng

Sẽ không tuyệt sao nếu có một cách để chỉ định nó? . Bằng cách sử dụng vi dữ liệu, bạn có thể cung cấp thêm thông tin về chính nội dung đó. Thông tin có thể rõ ràng đối với con người đọc nó, nhưng không quá rõ ràng đối với máy. Hãy thực hiện một số thay đổi trong đoạn mã trên

input {
  display: none;
}

section > div {
  display: none;
}

#radio-section-0:checked ~ #section-0 > div {
  display: block;
}

#radio-section-1:checked ~ #section-1 > div {
  display: block;
}

#radio-section-2:checked ~ #section-2 > div {
  display: block;
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Bây giờ máy sẽ nhìn thấy nhiều hơn chỉ là một phần. Nó sẽ biết rằng phần này mô tả một người tên là Alvaro Montoro, người có email và URL được chỉ định, đồng thời cũng là Nhà phát triển web chuyên về HTML và CSS

Con người sẽ không bị ảnh hưởng bởi các thuộc tính mới này trong HTML, nhưng tài liệu sẽ được tăng cường ngữ nghĩa nhờ chúng. nếu máy xử lý nó hiểu vi dữ liệu

Tôi sẽ không đi sâu vào dữ liệu vi mô – phần này đã quá dài rồi, tôi sẽ viết một bài đầy đủ về nó sau nếu cần–, chỉ cần biết rằng

input {
  display: none;
}

section > div {
  display: none;
}

#radio-section-0:checked ~ #section-0 > div {
  display: block;
}

#radio-section-1:checked ~ #section-1 > div {
  display: block;
}

#radio-section-2:checked ~ #section-2 > div {
  display: block;
}

input {
  display: none;
}

section > div {
  display: none;
}

#radio-section-0:checked ~ #section-0 > div {
  display: block;
}

#radio-section-1:checked ~ #section-1 > div {
  display: block;
}

#radio-section-2:checked ~ #section-2 > div {
  display: block;
}

• Người. nó có thể được sử dụng để mô tả bản thân bạn, tài liệu tham khảo của bạn hoặc bất kỳ người nào được đề cập trong tài liệu
• Tổ chức. sử dụng nó để mô tả các công ty mà bạn đã làm việc cho
• Tổ chứcVai trò. điều này sẽ cung cấp thông tin chi tiết về vị trí và vai trò của bạn (chủ yếu là tiêu đề và thời lượng)
• Tổ chức giáo dục. được sử dụng để mô tả các trường học, trường đại học, trại huấn luyện khác nhau, v.v. mà bạn đã tham gia
• Công việc có tính sáng tạo. nó có thể được sử dụng để mô tả bất kỳ dự án hoặc tác phẩm nghệ thuật nào mà bạn đã tạo và đánh dấu trong sơ yếu lý lịch của mình

Đó là một bài viết lớn khác có lẽ nên được chia thành các phần nhỏ và chi tiết hơn (có thể là phần tiếp theo). Nếu bạn vẫn còn ở đây. cảm ơn bạn đã đọc. )

HTML CSS có tốt trong sơ yếu lý lịch không?

Làm cách nào để tạo sơ yếu lý lịch bằng HTML và CSS?

Làm cách nào để tạo sơ yếu lý lịch tương tác với HTML và CSS?