Webbo3 Frontend Development · Month 1 · Lesson 8

Your Online Presence: LinkedIn and GitHub

Learn how to create a developer LinkedIn and GitHub profile README that showcases your skills and experience, helping recruiters find you.

As a beginner in the world of frontend development, you're likely to have spent a lot of time learning new skills and building projects, but have you thought about how you're going to showcase your work to potential employers? When recruiters are searching for new talent, they often turn to online platforms to find candidates, and if you don't have a strong online presence, you could be missing out on opportunities. You might be wondering how you can make yourself stand out in a crowded job market and get noticed by recruiters who are looking for someone with your skills.

By the end of this lesson, you'll be able to present yourself online in a way that makes a recruiter stop scrolling. You'll learn how to create a professional LinkedIn profile that highlights your skills and experience, and how to use GitHub to showcase your projects and demonstrate your coding abilities. You'll also learn how to customize your GitHub profile to make it look professional and showcase your best work. This will give you a strong foundation for building your personal brand and establishing yourself as a frontend developer.

Having a strong online presence is crucial in today's job market, and it's not just about having a profile - it's about having a profile that showcases your skills and experience in a way that resonates with recruiters. By the end of this lesson, you'll have a clear understanding of how to create a strong online presence that will help you get noticed by recruiters and take your career to the next level. You'll be able to create a GitHub profile that shows real work, and a LinkedIn profile that tells your story and highlights your achievements, giving you the confidence to showcase your skills to the world.

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 Recruiter Actually Reads on LinkedIn and in What Order

Understanding the Hiring Process

When a recruiter looks at your LinkedIn profile, they are looking for specific information to determine if you are a good fit for a job opening. The order in which they read your profile is important. Typically, a recruiter will start by looking at your headline, then your current and past work experience, followed by your education and skills.

What to Include in Your LinkedIn Profile

It's essential to make sure your LinkedIn profile is complete and up-to-date. This includes having a professional profile picture, a clear and concise headline, and a detailed work experience section. Your work experience should include specific examples of your accomplishments and the skills you used to achieve them.

Why a GitHub Profile README Exists and What to Put in It

Purpose of a GitHub Profile README

A GitHub profile README is a Markdown file that allows you to introduce yourself and showcase your projects to others. It's a great way to demonstrate your skills and experience as a developer. The README file should include information about who you are, what you do, and what you're interested in. You can also include links to your other social media profiles or personal website.

Creating a GitHub Profile README

To create a GitHub profile README, you'll need to create a new repository with the same name as your GitHub username. Then, create a new file called README.md in the root of the repository. In this file, you can add Markdown text to introduce yourself and showcase your projects.

# Hello, I'm [Your Name]
I'm a frontend developer with a passion for creating responsive and user-friendly interfaces.
## My Projects
* [Project 1](https://github.com/your-username/project-1)
* [Project 2](https://github.com/your-username/project-2)
## Get in Touch
You can find me on [LinkedIn](https://www.linkedin.com/in/your-username) or [Twitter](https://twitter.com/your-username)

In this example, the `#` symbol is used to create a heading, and the `*` symbol is used to create a list item. The `[text](url)` syntax is used to create a link.

Common Mistake: Incorrect Markdown Syntax

One common mistake beginners make when creating a GitHub profile README is using incorrect Markdown syntax. For example, using `**` instead of `#` to create a heading. To spot this mistake, look for text that is not being formatted as expected. Make sure to use the correct syntax for headings, lists, and links.

The Difference Between an Empty Profile and a Quiet One

Empty Profile

An empty profile is one that has little to no information. This can make it difficult for recruiters to determine if you're a good fit for a job opening. An empty profile may have a username, but no bio, no work experience, and no skills listed.

Quiet Profile

A quiet profile, on the other hand, is one that is complete, but not overly active. This means you may not be posting updates or sharing content regularly, but your profile is still up-to-date and showcases your skills and experience. A quiet profile is not necessarily a bad thing, as it can indicate that you're focused on your work and not just trying to build a personal brand.

• An empty profile says "I'm not taking this seriously"
• A quiet profile says "I'm professional and focused on my work"

It's essential to have a complete and up-to-date profile, even if you're not actively posting updates. This will help recruiters and others find you and determine if you're a good fit for a job opening or collaboration.

Writing a Headline that Says What You Do

Why Your Headline Matters

Your LinkedIn headline is often the first thing people see when they visit your profile. It should clearly state what you do, not what you want. For example, "Frontend Developer" is a good headline, while "Looking for a job as a Frontend Developer" is not. The latter headline focuses on what you want, rather than what you can offer.

A good headline should be short, clear, and descriptive. It should also include relevant keywords that people might use when searching for someone with your skills. For example, if you're a frontend developer who specializes in React, your headline might be "Frontend Developer | React Expert".

Examples of Good and Bad Headlines

Here are a few examples of good and bad headlines:

• Good: "Frontend Developer | JavaScript Expert"
• Bad: "Want to be a Frontend Developer one day"
• Good: "Full Stack Developer | Node.js and React"
• Bad: "Looking for a job in tech"

As you can see, the good headlines clearly state what the person does, while the bad headlines focus on what they want or are vague about their skills.

Pinning Repositories and Writing a README

What is a README?

A README is a file that explains a project to a stranger. It should include information about what the project does, how it works, and how to use it. A good README can help others understand your project and even contribute to it.

In GitHub, you can pin your best repositories to the top of your profile, so they're the first thing people see. This is a great way to showcase your work and attract potential employers or collaborators.

Writing a Good README

A good README should include the following elements:

• A brief introduction to the project
• Instructions on how to use the project
• Information about the technologies used
• A link to a live demo or example

Here's an example of a simple README for a frontend project:

# To-Do List App
A simple to-do list app built with HTML, CSS, and JavaScript.

## How to Use
1. Open the `index.html` file in a web browser.
2. Click the "Add Task" button to add a new task.
3. Click the "Delete" button to delete a task.

## Technologies Used
* HTML
* CSS
* JavaScript

## Live Demo
You can see a live demo of the app here.

## Example Code
Here's an example of the JavaScript code used to add a new task:
function addTask() {
  const task = document.getElementById("task").value;
  const taskList = document.getElementById("task-list");
  const newTask = document.createElement("li");
  newTask.textContent = task;
  taskList.appendChild(newTask);
}

In this example, the README includes a brief introduction to the project, instructions on how to use it, information about the technologies used, and a link to a live demo. The example code shows how the `addTask` function works.

A common mistake beginners make when writing a README is to include too much code or technical detail. Remember, the purpose of a README is to explain the project to a stranger, not to show off your coding skills. Keep your README concise and focused on the essential information.

Another mistake is to forget to update the README when the project changes. Make sure to keep your README up-to-date, so it accurately reflects the current state of the project.

The About Section as a Short Story with Evidence

Why Your Story Matters

Your online presence is crucial in today's digital age, and your About section is often the first thing people read about you. It's your chance to tell a short story about who you are, what you do, and what you're passionate about. A good About section should be concise, clear, and authentic.

Think of your About section as a brief introduction to your professional brand. It should include evidence of your skills and experience, such as links to your projects or testimonials from previous clients or colleagues.

Writing Your Story

To write a compelling About section, start by brainstorming the key points you want to cover. What are your strengths and weaknesses? What motivates you? What do you want to achieve in your career? Use specific examples and anecdotes to illustrate your points, and make sure to include relevant keywords that will help people find you online.

For example, if you're a frontend developer, you might mention your experience with HTML, CSS, and JavaScript, and include links to your GitHub projects or a personal website. Be honest and authentic in your writing, and don't be afraid to show your personality.

Commit Messages as a Professional Signal

What is a Commit Message?

A commit message is a brief description of the changes you've made to your code. It's a way to communicate with your colleagues and future self about what you've done and why. A good commit message should be clear, concise, and descriptive, and should follow a standard format.

Writing Good Commit Messages

A good commit message should include a brief summary of the changes you've made, followed by a blank line, and then a bulleted list of the specific changes. For example:

git commit -m "Fix bug in login form
* Changed input type to 'email'
* Added validation for empty fields"

In this example, the commit message includes a brief summary of the changes ("Fix bug in login form"), followed by a blank line, and then a bulleted list of the specific changes. This format makes it easy to scan and understand the changes you've made.

A common mistake beginners make is to use vague commit messages, such as "Fixed some bugs" or "Updated code". These messages don't provide any useful information about what was changed or why. To spot this mistake, look for commit messages that are too short or don't include any specific details about the changes. Instead, use a standard format like the one above, and make sure to include relevant keywords and descriptions.

Using Commit Messages in Your Workflow

Commit messages are an essential part of your workflow as a developer. They help you keep track of the changes you've made, and communicate with your colleagues about what you've done. By writing good commit messages, you can make your code more maintainable, and make it easier for others to understand and build on your work.

For example, you can use commit messages to track the progress of a feature or bug fix, and to identify areas of the code that need more work. You can also use tools like GitHub to browse your commit history, and see how your code has evolved over time.

// Example of a simple JavaScript function
function calculateArea(width, height) {
  // Calculate the area of a rectangle
  return width * height;
}

// Commit message for the above code
git commit -m "Added calculateArea function
* Created a new function to calculate the area of a rectangle
* Added example usage to the README file"

In this example, the commit message includes a brief summary of the changes, followed by a bulleted list of the specific changes. The code itself is a simple JavaScript function that calculates the area of a rectangle. The commit message provides context and explains why the code was written.

Do this now

It's time to create your online presence. This exercise should take about 30 minutes to complete. Follow these steps:

1. Log in to your LinkedIn account and update your headline to clearly state the path you're on, for example "Aspiring Frontend Developer" or "Junior Web Developer". Keep it short and descriptive.
2. Create a GitHub account if you haven't already, then go to your GitHub profile page. Click on the "README" tab and create a new file named README.md. Write a brief introduction about yourself in the first section, including your name and what you do.
3. In the second section of your README, describe what you're learning and what you hope to achieve. Be honest and keep it concise.
4. In the third section, list any relevant projects or repositories you have, even if it's just one. This will help others see what you're working on.
5. Finally, go to your first repository and pin it to your profile so it's prominently displayed.

Be careful not to confuse your LinkedIn headline with your LinkedIn summary, and make sure your GitHub README is written in a clear and easy-to-read format.

How to know you got it right

To verify that you've completed the exercise correctly, go through this checklist:

• Your LinkedIn headline clearly states your path or profession.
• Your GitHub README has three sections: introduction, goals, and projects.
• Your first repository is pinned to your GitHub profile.

If you've completed all these steps, you've successfully updated your online presence and are one step closer to showcasing your skills to others.

Common mistakes

• Incomplete LinkedIn profiles: missing experience, skills, and education. This happens because beginners underestimate the importance of a complete profile. Fix: dedicate an hour to filling out every section, including a professional headshot and header image.
• GitHub repositories with no meaningful content: empty or unorganised code. This occurs when beginners don't understand the purpose of GitHub. Fix: create a repository for a real project, like a personal website, and regularly update it with new features.
• Not connecting LinkedIn and GitHub: missing opportunities for visibility. This mistake happens due to a lack of awareness about the benefits of linking the two. Fix: add your GitHub link to your LinkedIn profile and vice versa, to showcase your work to potential employers.
• Not regularly updating online presence: outdated information and stale content. This error occurs when beginners set up their profiles and then neglect them. Fix: schedule regular updates, like monthly, to refresh your content and show continuous growth and learning.

Questions students ask

1. What if I don't have any work experience to put on LinkedIn? Start by adding any relevant projects, volunteer work, or education, and highlight transferable skills. This will help you establish a foundation for your profile.
2. Do I need to pay for a GitHub account to use it effectively? No, a free GitHub account is sufficient for most users, and it allows you to create public repositories and collaborate with others.
3. How do I know what to post on LinkedIn to get noticed? Share updates about your projects, ask for feedback, and engage with others' posts by commenting and liking, to build your professional network and increase visibility.

Next lesson: Introduction to CSS and the Cascade.