how to make a html resume

How to create an online resume

An online resume is a digital version of a resume.

It is an overview of your experience, skills, education, and achievements.

It can be used to apply for a job, freelancer gig, consultancy engagement, or apply to a school.

The value of having it online as a website is that people from all over the world can access it easily.

What is a resume

The resume is an overview of your experience, competence, and skills.

It is most known for being a document, used to apply for jobs.

Companies and hiring managers use the resume to get an understanding of who you are as a professional and what you are capable of doing.

Your online resume can be shared by its link to companies, hiring managers, and recruiters, so that they can notice you.

Why create an online resume

A resume is relevant for every professional.

Your resume as a website makes it easy for others to access and view your resume.

It can be used to E.G. get a job, freelancing gig, consultancy engagement, or apply to a school.

Having it online makes it possible for people from all over the world to find you.

The design of the resume gives the reader an impression of who you are. Make sure that it appears in a good and presentable way!

What do I need to know to create my resume as a website?

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

You can come a long way just using these three!

• Create the structure with HTML. The first thing you have to learn, is HTML, which is the standard markup language for creating web pages.
• 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.
• Make it interactive with JavaScript. After studying HTML and CSS, you should learn JavaScript to create dynamic and interactive web pages for your users.

How to create a resume step-by-step

Follow the steps to create your online resume 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.

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

All set up. Lets go!

Advertisement

Step One: Add a Website Layout

Create a responsive website from scratch.

Read here for how to create a website layout: How to create a Website Layout

A resume can be created in different ways.

There is not a one-size fits all .

Keep in mind why, how, and what , you are building it for.

Build the resume that is right for you.

Step Two: Plan your content

Think about how you want to design your resume.

• What information do you want to include?
• What impression do you want to give the reader?
• How do you as a professional want to be presented?

Step Three: Add content

Include the essential sections:

• Contact Information section
• Key Summary section
• Education section
• Work Experience section

Check out our How To library for more code snippets: How To Library

1. Contact Information section.

Add your name and contact information.

The contact information section lets the reader know how to get in touch with you.

2. Key Summary section.

Write a short summary that highlights your experience, competence, and skills.

Personalizing the text can make you stand out.

The key summary helps the reader to get an understanding of who you are as a professional.

Keep it short and simple.

3. Education section.

Give an overview of your educational background.

Include details such as the institution, degree, and year.

Professional courses and certifications can also be listed as education.

4. Work Experience section.

List the jobs that you have had.

Add details to each job, which includes what year, your role, and your responsibilities.

Other experiences such as projects and freelancing gigs can also be a part of this list.

We have made you a template that you can use and build with.

You can load the CV template in W3Schools Spaces . Get started with publishing your online resume in a few clicks.

* no credit card required

CV Template

W3Schools Spaces

Build and publish your online resume with w3schools spaces..

COLOR PICKER

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail: [email protected]

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail: [email protected]

Top Tutorials

Top references, top examples, get certified.

30+ Perfect HTML Resume Templates (Free Code + Demos)

This huge 100% free and open source collection of html and css resume templates is sure to impress recruiters and help you land your dream job. enjoy, 1. html and css resume, 2. sample resume idea, 3. responsive resume template.

Responsive resume template, you just need to fill out the content with your own.

4. HTML Resume

5. resume concept.

Draco is a free PSD & HTML resume template.

7. Simple HTML Resume

8. minimal css resume, 9. codepen resume header background.

I made this header in a resume format that lists my development & design skills. The thought process was that potential clients and employers would be visiting my CodePen account so make it pop. I thought it would be nice to have a creative, organized way to display my relevant skill set... Read More

10. Dark Theme HTML Resume

11. responsive css resume.

Responsive Resume built in Sass

12. Interactive CSS Resume

Played a little bit of hide and seek with my resume. Used the code for the flashlight effect from here:http://codepen.io/arroinua/pen/bBxgm

13. CSS3 Creative Resume

I thought this would be a perfect project to use LESS mixins in. Designed by: Pixeden: http://www.pixeden.com/resumes-templates/creative-resume-template-vol-1 Librarian Image is from Dribbble: http://dribbble.com/shots/271458-Librarian by talented "Artua"

14. Live Resume Concept

15. html/css resume template, 16. my cv - made using html and css.

This is my first implementation. I learnt CSS on 15 Jun 2013 at Codecademy.com and as a final project titled "Build your resume!" I took it seriously and decided to go on creating my own Resume using my CSS / HTML knowledge so far (whatever gained from Codecademy.com)

17. Dark HTML Resume

Inspired from the design made by 'Teodora': http://www.webdesignerforum.co.uk/files/file/63-free-psd-cv-template/ https://dribbble.com/shots/1141520-PSD-CV-template?list=searches&offset=17 Dark-wall pattern: http://subtlepatterns.com/dark-wall/ Lato Font: https://www.google.com/fonts/spec... Read More

18. Printable Diner Menu Resume

Live at https://jubishop.com/resume.html

19. Pure CSS Resume

A pure CSS resume to showcase your interactive resume!

20. RWD Resume

Thanks to xichen. This artwork is based on https://codepen.io/xichen/pen/wzpZrr. I add some animation on skill section and make it more responsive.

Задание по вёрстке для первой ступени Школы редакторов Бюро Горбунова

22. Personal Resume With Bootstrap4

This is my Personal Resume developed by using HTML, CSS, Bootstrap and Font-Awesome.

23. Thiago Braga | English Resume

Updated at 20/04/2020 - 22:24 (Brazilian time)

24. Personal Portfolio

Resume Portfolio

25. Profile Template

HackerRank Profile Template For Resumé.

26. Responsive Education Timeline

Fully responsive education timeline built with HTML, SCSS, Bootstrap 4 and font awesome for icons.

Development Soft Skills

8 minute read

19 Free HTML Resume Templates to Help You Land The Job

Nick Mertens

Facebook Twitter LinkedIn WhatsApp Email

Do you know a little HTML? Do you want to impress at your next job interview? Of course, you do! Well, you've come to the right place. Today we will be looking at a variety of free HTML resume templates (written in HTML and CSS).

They will range from your usual Word-doc-like collection of work experience and key skills to fully-fledged websites you can customize to your heart's content.

If you find you need a little refresher on your HTML knowledge, check out our  Introduction to HTML course , which shows you how to build your own professional resume website in two ways - with templates like we have below, or with the handy Bootstrap framework. And to take things further, we've also got courses on  CSS  and  JavaScript !

Take a sip of your coffee, and let's dive straight in.

Plain HTML templates

The following couple of templates are great for quickly getting a CV written up and sent out. They're written in HTML and CSS so you can host these on your website or send them in a ZIP file by email.

Get your free HTML resume templates

Ready to rock your resume game? Then download these free resume templates!

1. Responsive HTML & CSS CV Template

For a stylish but straightforward template, check out  this CV template by Thomas Hardy . It's written in plain HTML and CSS and has a subtle fade-in effect that's rather pleasing to the eye.

2. DIY HTML CV Template

That's a lot of acronyms in a row, but if you're looking for a one-pager that's sure to impress, have a look at this  DIY HTML CV Template by SRT . Just make sure you add a link to a PDF version or remove the button in the header. The simplest way to generate it is to print the page in Chrome and change the printer to "Save as PDF."

Website resume templates

If you have a little more time on your hands, we recommend checking out the following templates. They've been designed a little more, so they're quite lovely to read and navigate.

Built with Bootstrap 3, this is a robust theme for beginners and pros.  I AM X  also comes with documentation, so you'll know exactly how to use it.

4. Scribbler

For those developers with us: first of all, fist bump! Second of all, you might enjoy this  code-focused template . If you want to show off your portfolio in code, this is the one for you. If you're applying for a developer role, it'll likely go down well!

Great for a visual CV,  Miller  has a nice, smooth feel to it as you scroll down, and has space for a big image of you or your work on one side of the template.

This beautifully designed website template will make you stand out for sure.  Hola  has distinct sections for you to fill out and includes a contact form & download option.

7. Kelvin Resume Template

The big splash image in the  Kelvin Resume Template  will help grab their attention, so they scroll down and read all about your education, work experience, skills, and portfolio.

8. Creative CV Website Template

If you're after something a little more flashy, give this  Creative CV Website Template  a go, created by TemplateFlip. As the name reveals, it's a website template that shows off your creative side. It's a little more engaging than a simple static page, and it suits job applications related to creative industries or web developers.

Another template by the great people at Styleshout,  Kards  has timeline items, stats section, skill bars, working ajax form, frontend form validation, a portfolio section to showcase your works, and many more.

This One  (see what we did there) is clean and dark - great for the minimalist in you. Easy on the eyes and easy to edit, give it a try!

11. Infinity

"To  Infinity  and beyond!"

Sure, it's not specifically a CV template, but just like Toy Story, with a little imagination, it could be! You can quickly transform it into a website that shows off  your  work instead of a company's.

If your portfolio is the main attraction,  check out Pixfly . If you have enough images to show off, this template can pop off the screen.

13. Responsive Resume

Sitting somewhere in between a plain CV template and a CV website, this  Responsive Resume Template by Philip Davis  could work for you. It has a bit more room for customization than some of the others listed above. It even includes it's own grid, letting you rearrange parts of the template easily.

14. Industrious

Industrious  is the only one on this list with a video background in the header, something you can use to grab their eye! As some of the templates before this one, it's not solely focused on CVs or resumes, but with a little elbow grease, we know you can make it work in your favor!

Far from gritty, cleaner and to the point,  Grit  will work well for a CV with your usual suspects, a portfolio and a blog.

WordPress CV Templates

For the most impressive online CV, create a free  WordPress  account and pick one of the many great CV and Resume templates. Fully customizable, they are fully hosted websites, so it will take a little longer to set up. It's worth it, however, for the impression you'll make.

This  beautiful dark theme  is responsive, fully customizable, and even has the option to display content in various languages!

17. Personal

With space for past experience, portfolio, and even a blog, this  Personal WordPress theme  could be your living, dynamic CV website. Keep it updated regularly, and you'll be sure to stand out.

18. Proper Lite

As the title of the page suggests, this one is made for creatives. If you have a lot of visual work to show off - designs, photos, etc. - then  Proper Lite might be the theme for you .

While not a template that's necessarily pitched as a CV or resume template,  Argent  is very flexible and could easily be transformed into a resume and portfolio hybrid.

Thanks for reading

Whether you're new to the world of web or an experienced veteran, we hope you have found the template for your next CV. If you have any templates you like, be sure to leave a comment. For extra help in setting them up, check out our Intro to HTML course which shows you how to modify your template, step by step.

And with such a professional looking resume, you'll probably want to brush up on some common interview questions for your field. So check out our guides below, which will help you put your best foot forward:

13 Most Helpful HTML Interview Questions & Answers

20 Most Helpful CSS Interview Questions and Answers

Startup Interview Questions: 8 Things Founders Will Ask You

6 Most Helpful Soft Skills Interview Questions and Answers

11 Key Graphic Design Interview Questions and Answers

The Top 7 Project Management Interview Questions and Answers

Learn in-demand skills

Take your career to the next level with GoSkills coding courses

Loved this? Subscribe, and join 460,397 others.

Get our latest content before everyone else. Unsubscribe whenever.

Nick is a web developer, focusing on front end development and UX, as well as dabbling in any new technologies or frameworks that catch his eye. In his free time, he enjoys playing video games, listening to metal, and being an all-round geek.

Recommended

Why Employers Will Value Soft Skills Over Tech in the Age of AI

As AI becomes ubiquitous, it's becoming increasingly difficult to stand out. Learn how to use your soft skills in a tech-saturated environment.

How to Hire the Right Candidate for the Right Job

When using the right strategies, hiring the right job candidate can be seamless and effective.

7 Essential Skills To Help Startups Meet New Challenges

Startups and SMEs face specific challenges that threaten their survival. Make sure your business' growth doesn't lead to its downfall with these 7 tips.

© 2024 GoSkills Ltd. Skills for career advancement

🍪 This website uses cookies to improve your experience.

Learn more about our cookies Accept cookies

DEV Community

Posted on May 15

Creating a Professional CV in HTML: A Comprehensive Guide

In today's competitive job market, having a standout CV is crucial for showcasing your skills, qualifications, and experiences to potential employers. While traditional paper resumes are still prevalent, creating a digital CV using HTML offers several advantages, including customization, interactivity, and easy sharing. In this comprehensive guide, we'll walk through the process of creating a professional CV in HTML step by step, using examples and explanations to help you craft an impressive resume.

Setting Up the HTML Document:

Example 1: Basic HTML Structure

Setting up the HTML document is the first step in creating a well-structured webpage. In Example 1, we begin with the essential components: the <!DOCTYPE html> declaration, which tells the browser to interpret the document as HTML5, followed by the <html> element, enclosing the entire document. Inside the <html> tags, we have the <head> section, where metadata like the page title is defined using the <title> element. This title appears in the browser's title bar and search engine results, providing a concise description of the page's content. Additionally, the <body> section contains the main content of the CV, structured using semantic elements like <table>. Within the table, we use <tr> and <th> tags to define table rows and headings, respectively, ensuring a clear and organized layout. The use of attributes like bgcolor, border, align, and width further customizes the appearance and alignment of elements within the document, enhancing its visual presentation. Overall, setting up the HTML document lays the foundation for building a well-designed and accessible webpage, ensuring optimal readability and user experience.

Personal Information Section

In the personal information section of your resume, it's essential to provide comprehensive details that give a clear picture of who you are. Start with a <h2> tag to prominently display your name, ensuring it stands out as a key element. Next, include a professional photograph using the <img> tag, setting attributes like src for the image path, alignment for placement, and height and width for dimensions, which enhances your resume's visual appeal.

Directly beneath your name, list your professional title and company affiliation using bold tags (<b>) for emphasis. This highlights your current role and company in a clear and impactful manner.

Then, provide your contact information, including your mobile number and email address, formatted with line breaks (<br>) to maintain a clean and organized appearance.

The section continues with another <h2> heading for "Personal Information", followed by an unordered list (<ul>) of additional details such as your father's name, religion, national identification number (CNIC), date of birth, nationality, and marital status. Each piece of information is enclosed in a list item (<li>) , which helps in structuring the data clearly and making it easy for readers to scan.

Including this detailed personal information in your HTML resume ensures that potential employers or clients can quickly learn important aspects about you, enhancing your professional presentation.

Adding Qualifications:

Example 3: Qualifications Section In the qualifications section, it is crucial to present your educational background clearly and systematically. Using a table to organize this information ensures that it is both easy to read and professionally presented.

Begin with a heading (<h2>) titled "Qualifications" to clearly define this section. Then, create a table (<table border="1">) to list your educational achievements. The border attribute helps delineate the table, making it visually distinct and easier to follow.

The table starts with a header row (<tr>) containing column titles for "Examination," "Division," and "Board/University," each enclosed in a header cell (<th>) . These headers provide context for the data that follows.

Subsequent rows (<tr>) detail your qualifications. Each qualification is listed in a separate row, with details of the examination (e.g., Matric, B.Sc, MAS), the division or grade achieved (e.g., 1st), and the name of the board or university (e.g., Rocwes Company Board, Egerton University), all enclosed in data cells (<td>) .

By structuring your qualifications in this manner, you ensure that potential employers or academic institutions can quickly and easily assess your educational background. This format not only highlights your achievements but also maintains a clean, professional appearance, enhancing the overall readability and effectiveness of your resume.

Highlighting Certificates and Skills:

Highlighting certificates and skills is essential to showcase your expertise and competencies. Use the heading (<h2>) to clearly label this section. An unordered list (<ul>) is an effective way to organize and present each certificate and skill. Each item (<li>) should detail a specific certificate or skill, providing a clear and concise summary of your qualifications. This format ensures that key competencies are easy to read and stand out, making a strong impression on potential employers. Example 4: Certificates and Skills Section

• Showcasing Work Experience: When showcasing your work experience, it's important to present it in a clear and organized manner. Start with a heading (<h2>) titled "Experience" to highlight this section. Use an unordered list (<ul>) to list each job, ensuring a clean and structured format.

Each list item (<li>) should include your job title, the company name, and the dates of employment. Listing work experience in reverse chronological order (most recent job first) allows potential employers to quickly see your latest and most relevant positions.

This approach ensures that your work history is easy to follow and effectively communicates your career progression and stability. Including specific job titles and dates also helps to highlight your professional development and the duration of your roles, providing a comprehensive overview of your experience. Example 5: Work Experience Section

Highlighting Language Proficiency:

Highlighting language proficiency is essential, especially if you are applying for international job opportunities. Begin with a heading (<h2>) titled "Languages" to clearly define this section. Use an unordered list (<ul>) to present each language you are proficient in. Each list item (<li>) should simply state the language, ensuring clarity and ease of reading.

You may also consider adding additional details to each language, such as proficiency level (e.g., fluent, intermediate, basic) or specific certifications (e.g., TOEFL, DELF) if applicable. For instance:

Example 6: Language Section

This additional information can provide more context to potential employers about your language skills, demonstrating your ability to communicate effectively in different languages and environments. This section not only showcases your linguistic abilities but also highlights your adaptability in diverse professional settings.

Adding Additional Sections:

Adding additional sections to your resume can provide a more comprehensive picture of your qualifications and accomplishments. The "Awards and Achievements" section is an excellent way to highlight significant recognitions that showcase your skills and contributions. Use an unordered list (<ul>) to detail each award or achievement, including the title, organization, and year. This format makes your accomplishments stand out and easy to read.

The "References" section is also important. While specific references can be included directly, it is often sufficient to note "Available upon request." This indicates that you can provide references if the employer requests them, maintaining privacy for your contacts while signaling your preparedness.

These additional sections help differentiate you from other candidates by showcasing unique accomplishments and providing further evidence of your professional capabilities and integrity. They add depth to your resume, demonstrating not only your experience and skills but also the recognition and trust you have earned in your career.

Example 7: Additional Sections

When you run the HTML code snippets provided in this article, you will generate a comprehensive and visually structured CV (curriculum vitae). This CV showcases various sections, including personal information, qualifications, work experience, language proficiency, and additional sections like awards and references. Here’s an output of the code when you run:

Creating a professional CV in HTML allows you to customize and present your skills and experiences in a visually appealing and structured format. By following the steps outlined in this guide and customizing the examples provided, you can create an impressive digital resume that effectively showcases your qualifications to potential employers. Remember to regularly update your CV with new experiences and skills to keep it relevant and up-to-date in the ever-evolving job market. With a well-crafted HTML CV, you'll stand out from the competition and increase your chances of landing your dream job.

Top comments (0)

Templates let you quickly answer FAQs or store snippets for re-use.

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink .

Hide child comments as well

For further actions, you may consider blocking this person and/or reporting abuse

How Does Apple’s Strategy Differ From Other Tech Giants?

Tim J. White - Aug 20

DolphinDB to Offer Access to ICE Consolidated Feed and Historical Tick Data

DolphinDB - Aug 20

Mastering VPC Peering: A Comprehensive Guide to Secure and Scalable Cloud Networking

Hammad Khan - Aug 20

Enhance Your Website Hosting with Free SSL Certificates: Benefits and Implementation

WeWP - Aug 20

We're a place where coders share, stay up-to-date and grow their careers.