Webbo3 Frontend Development · Month 1 · Lesson 17

Your Portfolio Is Your CV

Learn to create a developer portfolio and CV with no experience, showcasing projects to attract employers and pass automated screening.

You've built several projects now, but how do you show them to potential employers? You want to make a good impression, but you're not sure how to present your work in a way that will grab their attention. You've heard that a portfolio is important, but you're not sure what that means or how to create one. You're also worried about your CV - you've heard that many companies use automated systems to screen out candidates before a human even sees their application. You want to make sure your CV is written in a way that will get you past those automated systems and in front of a real person. By the end of this lesson, you'll be able to present your projects in a way that will make sense to potential employers. You'll know how to write a clear and concise description of each project, and how to choose the most important details to highlight. You'll also learn how to write a CV that is optimized for automated screening systems, so you can be sure that your application will make it past the initial screening and into the hands of a real person. This will give you a much better chance of getting an interview and ultimately landing a job. You'll learn how to tailor your portfolio and CV to the specific job you're applying for, and how to use language from the job posting to describe your skills and experience. This will help you stand out from other candidates and show the employer that you have the skills and experience they're looking for. By the end of this lesson, you'll have a clear understanding of how to present your projects and yourself in a way that will appeal to potential employers, and you'll be ready to start applying for jobs with confidence.

What you need before starting

Everything from the previous lesson, and the project folder you have been building in. Work along in your own editor as you read — this lesson is written to be typed, not skimmed.

What a Beginner Portfolio Must Prove and What It Cannot Fake

Proving Your Skills

A beginner portfolio must prove that you have the skills to build real-world projects. It's not just about showcasing your projects, but also about demonstrating your problem-solving skills, attention to detail, and ability to write clean, maintainable code. Your portfolio should show that you can take a project from start to finish, and that you're not just copying code from tutorials. For example, let's say you're building a simple calculator. You can prove your skills by writing a complete, functional calculator, like this:

function calculate(num1, operator, num2) {
  if (operator === 'add') {
    return num1 + num2;
  } else if (operator === 'subtract') {
    return num1 - num2;
  } else if (operator === 'multiply') {
    return num1 * num2;
  } else if (operator === 'divide') {
    if (num2 !== 0) {
      return num1 / num2;
    } else {
      return 'Error: Division by zero';
    }
  }
}

console.log(calculate(10, 'add', 5));  // Outputs: 15
console.log(calculate(10, 'subtract', 5));  // Outputs: 5
console.log(calculate(10, 'multiply', 5));  // Outputs: 50
console.log(calculate(10, 'divide', 5));  // Outputs: 2
console.log(calculate(10, 'divide', 0));  // Outputs: Error: Division by zero

This code defines a function `calculate` that takes two numbers and an operator as input, and returns the result of the calculation. The code also includes example use cases to demonstrate how the function works. A specific mistake beginners make here is not handling edge cases, such as division by zero. To spot this mistake, look for error handling code, such as if-else statements or try-catch blocks.

The README as the Real First Impression

Writing a Clear and Concise README

The README file is often the first thing people see when they visit your portfolio, so it's essential to make a good impression. A clear and concise README should explain what your project does, how it works, and what technologies you used to build it. It should also include instructions on how to run the project, and any other relevant information. For example, a README for the calculator project might look like this:

# Calculator Project
This project is a simple calculator that takes two numbers and an operator as input, and returns the result of the calculation.

## Technologies Used
* JavaScript
* HTML
* CSS

## How to Run
1. Clone the repository to your local machine
2. Open the `index.html` file in a web browser
3. Enter two numbers and an operator in the input fields
4. Click the "Calculate" button to see the result

A specific mistake beginners make here is including too much unnecessary information in the README. To spot this mistake, look for long, rambling paragraphs or unnecessary details.

Writing Experience When You Have No Job History

Focusing on Personal Projects

If you don't have any job history, don't worry! You can still write about your experience by focusing on personal projects you've worked on. Emphasize what you learned, what you achieved, and what skills you developed. Be specific about the technologies you used, the challenges you faced, and how you overcame them. For example, you might write: "I built a personal website using HTML, CSS, and JavaScript. I learned how to create a responsive design, how to use CSS preprocessors, and how to implement interactive elements using JavaScript. I also developed problem-solving skills, as I had to debug and troubleshoot issues that arose during the development process." A specific mistake beginners make here is being too vague or general. To spot this mistake, look for phrases like "I learned a lot" or "I gained experience". Instead, look for specific details about what was learned, what was achieved, and what skills were developed.

Choosing Three Projects Over Ten

Quality Over Quantity

When it comes to creating a portfolio, many beginners make the mistake of thinking that more is better. They try to showcase as many projects as possible, often ending up with a portfolio that has ten or more projects. However, this approach can be overwhelming for potential employers and may not effectively demonstrate your skills. Instead, it's better to focus on three high-quality projects that showcase your expertise. For example, let's say you're trying to demonstrate your skills in HTML, CSS, and JavaScript. You could create a simple to-do list app that uses all three technologies. Here's an example of what the HTML code for this app might look like:

<html>
  <head>
    <title>To-Do List App</title>
  </head>
  <body>
    <h1>To-Do List App</h1>
    <input id="todo-input" type="text" placeholder="Enter a task">
    <button id="todo-button">Add Task</button>
    <ul id="todo-list"></ul>
    <script src="script.js"></script>
  </body>
</html>

In this example, the HTML code sets up the basic structure of the app, including an input field, a button, and an unordered list to display the tasks. The JavaScript code, which we'll look at next, will add functionality to this structure. Many beginners make the mistake of including too much code in their HTML files. They might include CSS styles or JavaScript code directly in the HTML file, which can make the code harder to read and maintain. To spot this mistake, look for CSS styles or JavaScript code that's included directly in the HTML file. Instead, it's better to keep each type of code in its own separate file.

What ATS Screening Actually Does to a CV and How to Survive It

How ATS Screening Works

Applicant Tracking System (ATS) screening is a process used by many companies to filter out unqualified job applicants. When you apply for a job, your CV is often scanned by an ATS system, which looks for keywords and phrases that match the job requirements. If your CV doesn't contain these keywords, it may not make it past the ATS system and into the hands of a human recruiter. To survive ATS screening, it's essential to include relevant keywords and phrases in your CV, especially in your portfolio. For example, if you're applying for a frontend developer job, you should include keywords like "HTML," "CSS," "JavaScript," and "responsive design." Here's an example of how you might include these keywords in a JavaScript file for the to-do list app:

// Get the input field and button elements
const todoInput = document.getElementById("todo-input");
const todoButton = document.getElementById("todo-button");
const todoList = document.getElementById("todo-list");

// Add an event listener to the button
todoButton.addEventListener("click", () => {
  // Get the input value
  const todoText = todoInput.value;

  // Create a new list item element
  const todoItem = document.createElement("li");
  todoItem.textContent = todoText;

  // Add the list item to the list
  todoList.appendChild(todoItem);

  // Clear the input field
  todoInput.value = "";
});

In this example, the JavaScript code uses the `document.getElementById` method to get references to the input field, button, and list elements. It then uses the `addEventListener` method to add a click event listener to the button, which adds a new list item to the list when the button is clicked. A common mistake beginners make when writing JavaScript code is forgetting to clear the input field after adding a new task. This can cause the input field to retain the previous task's text, which can be confusing for the user. To spot this mistake, look for code that adds a new task to the list but doesn't clear the input field.

The Projects Section as Your Experience Section

Why Projects Are Important

When it comes to demonstrating your experience as a frontend developer, your projects section is just as important as your work experience section. This is because your projects showcase your skills and abilities in a concrete way, allowing potential employers to see what you can do. To make the most of your projects section, focus on showcasing a few high-quality projects that demonstrate your skills and abilities. Include a brief description of each project, including the technologies used and your role in the project. You should also include a link to the project's GitHub repository or a live demo, so that potential employers can see the project in action. For example, you might describe the to-do list app like this: * Project: To-Do List App * Technologies: HTML, CSS, JavaScript * Description: A simple to-do list app that allows users to add and remove tasks. * Link: GitHub Repository By following these tips, you can create a strong projects section that showcases your skills and abilities as a frontend developer. Remember to focus on quality over quantity, and to include relevant keywords and phrases to survive ATS screening.

Writing a Project Description that Leads with the Problem

When describing a project in your portfolio, it's tempting to start with a list of technologies you used. However, this approach can make your project sound like a laundry list of buzzwords rather than a meaningful achievement. Instead, start by describing the problem you were trying to solve. This will help potential employers understand the context and value of your work.

Problem-First Approach

For example, instead of saying "I built a website using HTML, CSS, and JavaScript", say "I built a website to help local businesses promote their events to the community, using HTML, CSS, and JavaScript to create a user-friendly interface". This approach shows that you understand the purpose of the project and can communicate its value effectively.

Code Example

Let's consider a simple example of a project that solves a real-world problem. Suppose we want to build a webpage that calculates the total cost of items in a shopping cart. We can use JavaScript to create a simple calculator:

function calculateTotal(prices) {
  let total = 0;
  for (let price of prices) {
    total += price;
  }
  return total;
}

let prices = [10.99, 5.49, 7.99];
let total = calculateTotal(prices);
console.log("Total cost: $" + total.toFixed(2));

In this example, the `calculateTotal` function takes an array of prices as input and returns the total cost. The `prices` array contains the prices of the items in the shopping cart, and the `total` variable stores the calculated total cost. The `console.log` statement prints the total cost to the console. A common mistake beginners make is to try to calculate the total cost by concatenating the prices instead of adding them. For example, `total += price.toString()` would result in a string like "10.995.497.99" instead of the correct total cost. To spot this mistake, look for the use of `toString()` or string concatenation operators like `+` when working with numbers.

Formatting Rules that Keep a CV Parseable

When formatting your portfolio, it's essential to follow rules that make it easy for others to parse and understand. This includes using clear headings, concise bullet points, and proper grammar and spelling.

Clear Headings

Use clear and descriptive headings to separate sections of your portfolio. For example, "Project Description", "Technologies Used", and "Achievements" can help potential employers quickly scan your portfolio and understand the content.

Concise Bullet Points

Use bullet points to break up large blocks of text and make your portfolio easier to read. However, be sure to keep each bullet point concise and focused on one key point. Avoid using bullet points that are too long or contain multiple ideas.

What to Leave Out

When creating your portfolio, it's just as important to know what to leave out as what to include. Avoid including unnecessary details, such as:

Irrelevant Projects

Only include projects that are relevant to the job or industry you're applying to. Including irrelevant projects can make your portfolio seem unfocused or lacking in direction.

Personal Details

Avoid including personal details such as your age, marital status, or hobbies, unless they are directly relevant to the job or industry. Keep your portfolio professional and focused on your skills and experience. By following these guidelines, you can create a portfolio that effectively showcases your skills and experience, and helps you stand out as a strong candidate in the job market. Remember to focus on the problems you've solved, format your portfolio for easy parsing, and leave out unnecessary details.

Do this now

To demonstrate your skills and experience, you'll create a README for your best project and draft a one-page ATS-readable CV. This exercise should take about 2-3 hours to complete, depending on the complexity of your project and the details you include in your CV. Break down the task into the following steps:

1. Choose your best project, one that you're proud of and that showcases your skills. This could be a personal project, a contribution to an open-source project, or a project you completed for a client.
2. Write a README for your project using the problem-approach-result structure. Describe the problem your project solves, the approach you took to solve it, and the results you achieved.
3. Draft a one-page ATS-readable CV. Focus on the skills and experience you have that are relevant to the job you're applying for. Use clear and concise language, and use bullet points to make your CV easy to scan.
4. Save your README as a file named README.md and your CV as a file named CV.pdf. Make sure your CV is in a format that can be read by applicant tracking systems (ATS).

How to know you got it right

To verify that you've completed the exercise correctly, check the following:

• Your README is written in the problem-approach-result structure and is easy to understand.
• Your CV is one page long, ATS-readable, and focuses on the skills and experience relevant to the job you're applying for.
• Both files are saved with the correct file names (README.md and CV.pdf).
• Your CV is in a format that can be easily read by ATS, such as a PDF with clear headings and bullet points.

Common mistakes

When building a portfolio, beginners often make the following mistakes:

• Insufficient project details: This looks like a portfolio with only images or links, but no descriptions of the projects. It happens because beginners focus on showcasing their work without explaining the process and challenges. The fix is to add a brief description of each project, including the technologies used and the problems solved.
• Overemphasis on design: This looks like a portfolio with flashy animations and graphics, but lacking in substance. It happens because beginners think a portfolio should be visually stunning, but forget that the content is more important. The fix is to balance design with content, making sure the projects and skills are clearly showcased.
• Including irrelevant projects: This looks like a portfolio with projects that are not relevant to the desired job or industry. It happens because beginners want to showcase all their work, without considering the audience. The fix is to curate the projects to only include those that demonstrate relevant skills and experience.
• Not keeping it up-to-date: This looks like a portfolio that is outdated, with old projects and technologies. It happens because beginners forget to update their portfolio after it's built. The fix is to schedule regular updates, adding new projects and removing old ones, to keep the portfolio fresh and relevant.

Questions students ask

Here are some common questions students ask about building a portfolio:

1. What if I don't have any projects to include? Start by building small projects, even if they are simple, to demonstrate your skills and learn as you go.
2. How many projects should I include? Include 3-5 projects that showcase your best work and most relevant skills, and remove any that are outdated or irrelevant.
3. Should I use a template or build from scratch? Start with a simple template to get started quickly, but customize it to fit your needs and brand, and learn to build from scratch as you gain experience.

Next lesson: What Tailwind Is and Why It Exists.