Skip to content

First Project

A Personal CV & Portfolio ✍🏼

For your first project, you will create a personal website that serves as both a digital CV and a portfolio. Having your own website is a valuable asset when applying for jobs or internships – it helps you stand out and showcase your skills. Unfortunately, many students underestimate the importance of this early on. This is your chance to get a head start. If you put in a bit of effort now, it could make a real difference in the future!

Requirements:

  • Include at least three separate pages:
    • About Me – A brief introduction with your name, background, interests, and a profile image.
    • CV – A clearly structured overview of your education, work experience, certifications, languages and volunteer work.
    • Portfolio – Showcase at least five projects, each with a name, short description, technologies used, a project link, and an image.
  • Include a consistent navigation bar visible on all pages.
  • The layout must be responsive and adapt well to at least the following screen widths: 375px, 768px and 1024px.
  • Use Grid, Flexbox and media queries to construct the layout. Find at least one good use case for each.
  • Style the layout using only external CSS.
  • Use semantic HTML elements when possible.
  • Ensure consistent design, typography, and layout across all pages.
  • Organize files into folders (e.g. /images/) and use lowercase, hyphenated file names (e.g. about-me.html).
  • Your code must pass HTML and CSS validation.

Don’t worry if you don’t have much content yet — feel free to use placeholder images and fictional examples to help design and structure your CV or portfolio. The focus is on practicing what you have learned so far.

You are more than welcome to get creative and add more requirements, but we are focusing on learning the fundamentals, so don't use JavaScript or any external libraries or frameworks (e.g., Bootstrap and Tailwind) yet.

Tips

  • The projects will be discussed at the exam. Focus on applying what you’ve learned to make it easier to explain and showcase your skills. A more interesting project might lead to a more interesting discussion.
  • Plan before you code! Sketch the website (at various screen sizes) and come up with a good layout approach before you start the implementation. It is often easier to start with the mobile layout first (mobile-first design) and only introduce media queries when needed.

Submission📤

This is an individual project. The deadline can be found on itslearning. Hand in before the deadline if you want feedback.

You must host the website using GitHub Pages and submit the link to the site using the handin slot on itslearning.