This device is not compatible.


Creating an Online CV with HTML and CSS

In this project, we’ll craft an interactive online CV by leveraging HTML and CSS, resulting in a captivating and personalized digital resume presentation.

Creating an Online CV with HTML and CSS

You will learn to:

Create an online CV using HTML and CSS

Design an interactive and visually appealing layout

Showcase relevant work history, education, and skills

Incorporate semantic HTML and responsive design

Deploy the CV to the internet

Receive emails via an HTML form


Web Development

Front-end Development


Basic knowledge of HTML

Basic knowledge of CSS

Basic knowledge of Git and GitHub




GitHub logo


Project Description

This project is designed to help us develop our skills in HTML and CSS by building an online CV. It’s divided into four categories, each with multiple tasks that will guide us through creating a professional CV.

First, we’ll set up the basic HTML structure for an online CV and add headings, paragraphs, and lists. We’ll also use semantic HTML tags to improve accessibility and search engine optimization.

Then, we’ll design the CV layout using CSS. We’ll create a stylesheet for the online CV, define the box model and layout properties, and use typography, colors, and backgrounds to enhance the visual appeal of the CV. We’ll also incorporate responsive design techniques to optimize the layout for different screen sizes.

Next, we’ll add personal information to the CV, including name, contact information, professional summary, work history, educational details, skills and proficiency, and a list of projects. We’ll also use forms to gather additional information from the visitors.

Finally, we’ll learn how to deploy the online CV by using the free service provided by GitHub called GitHub Pages. By the end of the project, we’ll have a professional online CV that we can show to potential employers.

Project Tasks



Task 0: Get Started


Setting Up the HTML Structure

Task 1: Create the Basic HTML Structure for the Online CV

Task 2: Add Headings, Paragraphs, and Lists to the Structure

Task 3: Use Semantic HTML Tags to Improve Accessibility


Designing the Layout with CSS

Task 4: Create a Stylesheet for the Online CV

Task 5: Define the Box Model and Layout Properties

Task 6: Use Typography, Colors, and Backgrounds

Task 7: Incorporate Responsive Design Techniques


Adding Personal Information

Task 8: Collect and Add Personal Information

Task 9: Include Relevant Work History

Task 10: Include Educational Details in the CV

Task 11: Include Skills and Their Proficiency in the CV

Task 12: Include a List of Projects in the CV

Task 13: Use Forms to Gather Additional Information


Deploying the Online CV

Task 14: Upload the code to GitHub

Task 15: Enable GitHub Pages