We just published a course on the freeCodeCamp.org YouTube channel that is designed to guide aspiring software engineers through the job-hunting process.

Lane Wagner developed this course. Lane is a senior back-end engineer who has worked as a hiring manager and head of engineering. He is the founder and lead instructor of Boot.dev.

The course is full of insights and practical steps for those looking for a programming job. Here's a snapshot of what the course covers:

Strategy: The course begins by setting the right mindset for job searching. It provides strategies and tips on how to approach the job market with confidence and clarity.

Projects: The second module focuses on honing and refining portfolio projects. This is crucial for demonstrating your skills and creativity to potential employers.

GitHub Profile: A standout GitHub profile is a must in today’s tech job market. This section guides you through optimizing your GitHub presence, ensuring that your coding prowess shines through.

LinkedIn Profile: Your LinkedIn profile often serves as your first impression. This module helps you curate a profile that truly reflects your professional brand and attracts the right kind of attention.

Resume: Perhaps one of the most critical tools in your job search arsenal, the course teaches how to craft a resume that stands out and avoids common pitfalls that could lead to it being overlooked.

Applying: This part of the course delves into the intricacies of the application process, offering insights into how to effectively get your resume in front of the right people.

Networking: Networking is key in the tech industry. Learn how to navigate local meetups and events to build valuable connections that could open doors to new opportunities.

Interviewing: Interviews can be tricky. This module prepares you for common interviewing scenarios, helping you avoid mistakes and make a lasting impression.

Relocation: Finally, the course touches on the often-overlooked aspect of job searching – relocation. Understand the pros and cons, and how to make an informed decision if a job opportunity in a new location arises.

Whether you're completely new to the field or looking to make your next big career move, this course will give you the knowledge and tools needed to navigate the tech job market.

Watch the full course on the freeCodeCamp.org YouTube channel (4-hour watch).

A promising career is one where you enjoy most (if not all) of your daily work. You see your personal, professional, and financial growth and gradually define what success means to you.

A lousy career is just the opposite. It may pay your bills, but you need more work satisfaction, and measuring your progress and growth becomes hard.

Several factors define a career: promising versus lousy, good versus bad, and successful versus failed. A few of them we can not control – but, we can avoid some career mistakes to build a better career path.

I have spent more than 18 years in Software Engineering and have seen a lot of ups and downs, including in my own career and those of my colleagues. In this article, I will discuss ten career mistakes you should avoid.

Usually, I share knowledge on technical topics like JavaScript, web development, React, Node, Next.js, and so on. But this time, let's connect on essential tips for our Career Development.

If you like to learn from video content as well, this article is also available as a video tutorial here: 🙂

A Few Things Before We Start

You may or may not agree with all the points. That's fine with me, because what I'm planning to share here is based on my own experiences.

You may strongly agree or disagree with my conclusions, but if there are any additional points that you think I still need to include, please let me know. You can contact me on the social handles I mention at the end of this article.

Also, this article is not only meant for working professionals. All these mistakes we will discuss are relevant for everyone, including students, people seeking jobs, or anyone getting ready for tomorrow in the software industry or any industry.

All set? Let's get started.

1. You Don't Set Realistic Goals

One of the biggest mistakes most of us make in our careers is not having a goal. What exactly is a goal? It is something like a target.

Let's take an example. Let's say you're going shopping to buy something. You usually have a list of items that you want to get. You don't randomly pick things and come home and feel like, "Oh, it was a complete waste of time and money". So, if that list is your shopping goal, why not have something like this for your career?

Usually, we have a lot of short-term goals, for example,

• I have to fix this bug today.
• I have to build this project this week.
• I have to get a promotion this year.

These are great goals to have. But we need to have long-term goals as well. Like, what do you want to be in the long-term in your career. How do you plan every steps to achieve that goal?

Say you are in mechanical engineering, but your heart is in software engineering (mechanical engineering is excellent – I'm just taking this as an example). In that case, you should have a goal for the next few years to translate yourself into a software developer and try to seek more roles more opportunities in the software industry.

I can tell you my story, as I think it'll help give you some perspective. I set myself a long term career goal to transition from my regular multi-national corporation job and start my career full time as an independent teacher and content creator. It took me four years to realize it, but without that goal it would have been impossible for me to chase my passion.

You may ask, will I be able to fulfill all the goals in my life? Well, maybe not. Still, it's important to have some and prioritize the most important ones. That way, even if you can't achieve some, you may identify a few more new goals along the way.

You may have a different way of going about it. But, if you don't have a starting point, you do not have anything to work toward and chase. Your career may become stagnant.

If you don't have any career goals for yourself right now, take some time to come up with a couple realistic goals. Here's some advice on how to set SMART goals you can actually achieve.

2. You Fail to Recognize Your Potential

Human potential is the capacity for humans to improve themselves through studying, training, and practice, to reach the limit of their ability to develop aptitudes and skills. – Definition of Human Potential from Wikipedia.

For us, the software developers, is about improving ourselves through practice, training, and study to reach the heights of our ability. But many of us do not know our potential at the start our careers. We figure it out gradually, and when we become aware of it, this helps us improve our careers.

When you know your potential, someone else will not dictate how to shape your career. Instead, you will be able to identify what would be good for you based on your strengths and where you need to bridge the gaps.

But you may ask, "How do I know my potential?". That's where having a goal and working towards it helps. Say you have a goal of mastering machine learning and data science to have a career as a data scientist. As you work towards this goal, you will find the areas where you excel, and other areas where you need to work especially hard. You figure out your potential as you work towards this goal.

Also, try not to settle for unimportant things. Constantly challenge yourself to produce better and more significant outcomes. When you do so, you discover your true potential in a much better way.

3. You Don't Take the Time to Network

Hey, we're gonna talk about something other than computer networking here. We will focus on human-to-human networking. We are going to talk about socializing. But why?

Networking or socializing with like-minded people, talking to them, and getting inspired by their work are as important as learning to code in programming. You might be a great programmer and fantastic coder. But suppose you do it in a silo. In that case, no one knows you or what you're capable of, so you will most likely lose out on more significant opportunities in your career.

When you socialize and network with others in the tech space, you may find a meaningful community to join. You'll be able to discuss important topics with like-minded people who have interests similar to yours – and this can help you multiply your growth by many times.

This is one mistake I made in my career for several years, as I was unaware of its vast potential. Be active on platforms like LinkedIn, follow people you'd like to connect with on tech Twitter (now X), and make authentic connections with them. Spending mindful time on these platforms, and at in-person events as you're able, can really help boost your career.

Check out the You Miss Out on Learning Opportunities section below for some real-life tips on how to reach out and connect with people.

4. You Waste Your Precious Time

"Wasting time" means not effectively utilizing your time. Would you agree that time is precious? Using and managing your time properly will help your career and life in general.

To clarify, watching a movie, going out with your friends and family, participating in festive activities, and so are not wasting time. You need these to balance out the time you spend working.

Rather, I'm more concerned about the tasks you may have to perform that take away from your "focus time" at work.

Let me walk you through a few situations:

You are working on a task, and here comes some notifications on your phone. You pause whatever you are doing and jump on your phone to see what's happening on that side of the world. The notification may take you 10-15 seconds to read, but you then spend 10 minutes browsing the phone.

This is a habit many of us have built in recent times. And then when you get back to your work, your brain has to recalculate and bring you back to the topic at hand – where you were, and what you were doing – and get you started with the task gain. This context switching is costly, and the same amount of focus may not be possible.

The best way of tackle a situation like this is,

• Switch off the phone's internet while you're working if you do not need it. You can switch it on when you take breaks, maybe at lunch time.
• You can also set your phone in "Do Not Disturb" mode while your work needs your utmost attention. Just make sure you add some of your family and friend's contacts as emergency contacts so that only a limited set of people can reach out to you during those times in case of any emergencies.

Let's talk about another situation. Suppose you need to prepare and send a design doc to a senior dev for review. But instead, you spend time on something low priority or some little luxury that delayed preparing the doc. You keep postponing until it's become an urgent thing that you'll have to do within a limited time.

This act of delaying something knowingly is called procrastination, an ultimate way to kill time. There are some well-known and proven methods to tackle procrastination.

• The first step is to realize and admit to yourself that you procrastinate.
• Then list out your distractors. This list may vary from person to person. Remove these distractors. It could be your phone, TV, novels, anything.
• Break down your deliverables into smaller tasks. Achieve them one by one and give yourself a pat on your back once you've finished each small task.
• Take small breaks and come back to the point where you left off on your task to continue with a fresh brain.

Instead of finding yourself in these types of situations, use your time wisely. If you have to get something done, get it done. When you're procrastinating, something that depends on one task may also get delayed, creating a cycle of time waste, frustrations, and complicated situations.

5. You Neglect Upskilling

Upskilling means getting better at your current skill or acquiring relevant new skills. It is essential to upskill at any and all stages of your career.

One of the common mistakes we make is that we stop upskilling after a few years in our professional life. We get used to the projects, domains, technologies, and environments that create a comfort zone around us. Upskilling is always about coming out of that comfort zone.

Here are a few common excuses we give to ourselves when it comes to upskilling:

• I already have a lot of work at the office or assignments in university.
• I need to have a personal life.
• I am happy with whatever I know now, and my work only demands so much.
• There is so much to learn and it is never ending (sigh!).

But you really don't need that much time in a week to up-skill. You just need to have a plan and to stay consistent in executing it. Set just 1 hour aside in your day. Fork it out from any non-urgent activities and plan your learning schedule in that one hour.

In this one hour, here are some things you can do:

• Assess the gaps, weaknesses, and strengths in your technical and non technical abilities.
• List them out in a place where you can easily get back to them and make modifications.
• Prioritize them based on your current needs and near future goals.
• Time-box each of the items so that you can get something tangible within a specified duration. For example, you want to do a certification on cloud computing within a month, or the Responsive Web Design course from freeCodeCamp over the next few weeks, and so on.
• Start working on these defined tasks. You may find many resources on internet. Glance over them to create an index of resources that you can understand easily and relate to well.
• Read and watch tutorials, but also practice hard.
• Finally, recognize your progress.

You may ask, is that one hour really enough? And I will tell you – it works like magic if you keep it up. Upskilling is not a race or sprint. It needs time, consistency, and perseverance to get from the one end to other.

Have you heard about the power of tiny gains?

Credit: James Clear

It is a strategy of being just 1% better every day. If you continue to do that for a year, you get almost 38% better at the end of the year. Being 1% worse does the opposite. The strategy was represented in mathematical graphs by James Clear in explanation of Continuous improvements and how it works.

Upskilling can also help you out a lot if you're preparing for the job search. The way the tech industry is moving, we may not be able to avoid layoffs – but we can be better prepared to get our next job faster. And that becomes much more attainable when you stay relevant and continue learning new things.

6. You Don't Ask for What You Want

Let me start by sharing an experience of mine. Back in the early 2000s when I was a fresher, I had to attend a meeting with some of the project leads and the manager. We were discussing how to modernize our product with HTML5 features.

I was aware of HTML5, and every time a discussion point was raised, I thought of adding to it, but I didn't. I thought of asking some valuable questions, but I didn't. I felt that in order to ask something in a meeting, I needed a lot of guts! I was wrong.

Oftentimes in your career journey, if you do not ask, you simply won't get what you want or deserve. If someone has some knowledge and you lack it, ask about it. If you have a questiona bout something, ask before you commit to the work. Ask about your promotion, a salary hike, career growth, and anything that is related to your career. There is no such thing as a silly question when it comes to your career growth.

7. You Only Focus on the Money

Come on, money is important. But is it the only important thing, especially in the context of switching jobs or working towards your career goals? No, certainly not.

When you plan to switch jobs, you also need to look into other factors like work culture, the amount of time you need to spend at the office working, whether it's going to be more stressful compared to the compensation you'll be getting, and so on.

I would certainly look into the following factors along with the compensation (the money part) to make an informed decision about my job switching:

• What will be my technical growth and learning opportunities?
• What will the work environment be like? Remote/Work From Office/Hybrid? How will that impact me?
• What skills (both tech and soft) will I be able to learn in the new position?
• What kind of employee benefits will I get compared to my current organization?
• Will my work-life balance be impacted positively?
• What are the company's vision, culture, and values?

Then when you're considering the salary, be careful and make sure you understand the breakdown. What percentage of the CTC comes from any bonus? Is it inclusive or exclusive of CTC? How does the bonus payout happen? If the company doesn't do well in a fiscal year, will you get paid less? Are there stock options or other benefits they pay out instead of cash? All this matters.

The mistake people often make is that they see only the money figure as the most important part of a job offer. Make sure you talk to someone from the company, do your research, and learn about what else they're offering as we mentioned above.

8. You Neglect Work-Life Balance

Another mistake you might make is not balancing your work and life. The last thing you want is to burn out at the cost of things you love the most, like your friends, family, and long-term career.

We must learn to prioritize things, and this includes both work and personal life. Your priority list for the day should not have only work related items. While it's important to ship a bug fix, it is also essential to accompany your kids to their soccer games or school plays, or make time to go on a date with your partner, or do something nice for yourself.

Do not be afraid to say "No". At the same time, don't be arrogant when you accept or decline tasks. This is important to keep a healthy work-life balance. When you already have plenty on your plate, trying to accommodate more or do more will only spill over and negatively affect your work-life balance.

So say no when you need to, communicate your intentions ahead of time when possible, and proactively ask for what tasks you'd like to work on when your plate has room for more.

For a long time in my career, I attended meetings late at night to match the timezones of my customers and other colleagues. Then, slowly, it started affecting my health and productivity.

When I thought about it more carefully, I discovered a couple of things. First, I realized that I didn't have to attend all the meetings, and that I could request that they take place in my clients' evenings sometimes. That way we'd both be taking turns compromising. And it worked.

At times, our habits drive us towards the work-life imbalance. For example, staying late at office while the same work can wait till the next morning is a classic example of a habit that may lead to health issues and frustrations in a long run.

We all need to find a way to sustain both work and life. So plan ahead, and stick to your schedule as much as possible. There might be exceptions where you have to give one thing priority above another – but do not allow the exception to become the norm.

9. You Miss Out on Learning Opportunities

If you have the opportunity to learn from a person who specializes in a particular field, grab it. If you use social media platforms like LinkedIn and X/Twitter wisely, it can lead you to the people who share great insights about subjects you're interested in.

A quick tip for you:

When you send someone a connection request on LinkedIn/X, take some time to introduce yourself. Things that you can mention briefly:

• What did you find unique about the person you want to connect to?
• A bit about yourself, introducing some of your uniqueness, too.
• Why do you want to connect?

Build authentic connections to get the best out of it. Then once you're connected, here are a few things you can do:

• Show interest in their posts.
• Engage with discussions by commenting or sharing posts.
• Repost with your thoughts
• Exchange ideas, or even build things together!

A strong social connection may help you in getting information faster. You may learn about a new release of a library/framework/product, how an industry is moving, how certain technologies might impact your work, and so on.

Apart from learning a lot, you may also get to know about job openings, hirings, and references. After all, companies have also started recruiting talent from social media pages.

Also, being part of a forum like the freeCodeCamp forum can be helpful for networking and learning as well. It is also a place for you to share solutions to a problem, talk about what you've learned, and make yourself visible gradually.

When we learn from someone, we not only come to understand what they've achieved or how they did it, but we also learn about the struggles, failures, and how they made the turnaround. Learning from someone else's experience can help accelerate your career journey. Don't make the mistake of living in a silo and missing out on these opportunities.

10. You Can't See the Bigger Picture

By Big Picture(or Bigger Picture), I mean understanding and developing a wider perspective on your career as a whole. It is about your ability to consider and assess many different aspects of a situation, rather than focusing on just the minute details.

As developers, we're supposed to implement features, do bug fixes, maintain code, and deliver quality software to our end-users. That's great!

But, we need to think beyond the individual tasks assigned to us. Our understanding of the overall project goals, the user acceptance criteria, delivery mechanisms, and perspectives of other engineers is key. And so is judging the impact of our work, as it will help us get the big picture of a project.

Suppose your product manager wants your team to build user interfaces that also cater to the needs of specially-abled and visually challenged users. In this case, you and your team members must see the bigger picture around Accessibility.

If your designer doesn't define the site's colors accordingly, or the developers do not implement keyboard accessibility along with ARIA roles and attributes, then they're missing the bigger picture.

Another example could be over-optimizing performance while your users do not care about it. Your users may be waiting to get a feature ASAP so it can help them achieve their business goals. But by addressing unnecessary optimizations, you may be delaying that release and missing crucial deadlines.

Missing the bigger picture may lead to a lack of synergy in your organization. It can also result in software products that need multiple iterations to meet customer needs because those needs weren't understood at the beginning. This can cause you to miss deadlines and do more work, and can greatly increase the cost to your client.

Along with understanding "what" tasks you need to perform, also ask "why" your tasks are important and how they will impact the rest of the project or other people's work.

Irrespective of what you build, how big or small it is, how glorified or dull is the outcome, you need to know the impact of it on end users and your internal customers (like product/project managers, quality assurance team, documentation team, whoever).

Once you look at the bigger picture and act accordingly, your margin of error reduces automatically.

Some More Advice and Wrapping Up

I wanted to share all this career advice with you because I have been on the other side and learned the hard way. Before I move on to write my next article or record my next video, one more quick tip for you: make sure you work to build up your finances.

Financial independence brings peace and the mental stability to think wildly about things you want to pursue in your career. But getting to the point of financial stability is not an overnight thing. You need to plan, save, and invest wisely such that your money grows faster than your age.

I am not a finance expert, but I relied on some good ones and took their suggestions early on. If you have the opportunity and mindset to build your finances for the future, the time is now.

That's all for now. I hope you found this article informative and insightful. I regularly publish meaningful posts on my GreenRoots Blog, you may find them helpful, too.

Let's connect.

• I am an educator on my YouTube channel, tapaScript. Please SUBSCRIBE to the channel if you want to learn JavaScript, ReactJS, Next.js, Node.js, Git, and all about Web Development in the fundamental way.
• Follow me on X (Twitter) or LinkedIn if you don't want to miss the daily dose of Web Development and Programming Tips.
• Find all my public speaking talks here.
• Check out and follow my Open Source work on GitHub.

See you soon with my next article. Until then, please take care of yourself, and stay happy.

If you're new to AWS, you can probably appreciate the sense of overwhelm that comes from trying to understand all the different services (seriously, like, hundreds of them). What are they all for, and how do they work together?

And then once you've conquered some basic skills, the next challenge is how to demonstrate those skills to a potential employer. What kind of a project can you highlight on your résumé or CV, without breaking the bank?

In this hands-on tutorial, you'll get help with both of those things by building your actual résumé/CV on AWS, by following these steps:

• Write code for your résumé using HTML, CSS and JavaScript
• Upload your files to a Simple Storage Service (S3) bucket that you configure for static website hosting, with public access
• Use Route 53 to set up a custom domain for your résumé
• Set up a TLS/SSL certificate with AWS Certificate Manager (ACM)
• Create a CloudFront distribution (that points to the files in S3) where you can apply the certificate.

Here's what we'll build:

Sample resume on AWS, using S3, CloudFront, Certificate Manager and Route 53

By the end of this tutorial, you'll have more than just an online résumé. You'll have a real-world project that you can use to dazzle your friends, family, network, and potential employers.

For a live walk-through of the project, check out this video:

Table of Contents

• What you need to follow along
• But first, what will this cost?
• Create the code (HTML, CSS, JavaScript) for your résumé
• Create an S3 bucket and configure it for static website hosting and public access
• Domain name option 1: Register a new domain name with Route 53
• Domain name option 2: Use a domain name from a third-party provider
• Create an A Record with an alias to point to the S3 website
• Create a public TLS/SSL certificate using AWS Certificate Manager
• Create a CloudFront distribution
• Update Route 53 to point to the CloudFront distribution
• Behold the final result
• IMPORTANT! Delete your resources
• Wrapping up

What You Need to Follow Along

To successfully complete this tutorial, you'll need the following:

• An AWS account: You can set one up for free (though it does require a credit card for validation).
• Basic experience: Having some basic AWS experience will make the tutorial easier, but you should still be able to follow along if you're a total newbie.
• Appropriate permissions: I'd suggest logging in as an IAM user with administrator privileges, or using your root account (though I'm obliged to say that working in your root account day-to-day is not recommended/not a best practice).

But First, What Will This Cost?

Before we get too far along, let's break down the different services and what they'll cost.

If you want to delete everything after the tutorial, be sure to see that section towards the end of this article. I'd also recommend setting up an AWS Budget so you can put a limit on spending and be notified if you're going to exceed it (no surprise bills, please!).

• S3: Used to host website files. If you're still in the AWS Free Tier, there should be no cost. Outside of the Free Tier, the cost should be minimal, as in cents.
• Route 53: If you decide to purchase a domain name through Route 53 (optional – you can also "bring your own" domain name from another provider), it will cost $10+. You'll also need a hosted zone, which will run you 50 cents per month. And Route 53 queries (when someone visits your domain) will cost 40 cents per million queries.
• AWS Certificate Manager: A TLS/SSL certificate through ACM is free.
• CloudFront: Inside the Free Tier, there is no cost. Outside of the Free Tier, it will depend on traffic, but for our purposes, it will likely only cost cents. See the full pricing page for more info.

Create the Code (HTML, CSS, JavaScript) for Your Résumé

This section is where you can let your creativity (and your coding skills) fly. Nothing here is specific to AWS – it's just good ol' web development.

You'll eventually be using an S3 bucket to host your résumé files (HTML, CSS and JavaScript). S3 can only host a static website, meaning you can't include anything that requires server-side code. But front-end stuff all day long.

I won't be too prescriptive for the code you use here – this is your résumé, after all. But you'll want to highlight the "usual" résumé things: employment history, education, skills/certifications, and maybe things like honors/awards or hobbies to make you seem more human.

If you want to list skills of HTML, CSS and JavaScript on your résumé, you'll ideally want to code this part by hand (wink, no ChatGPT help!), but you're also welcome to use my code below as a starting point.

index.html file

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Online Resume - Your Name</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <header>
            <img src="headshot.jpg" alt="Headshot" class="headshot">
            <h1 id="name">Name</h1>
            <p id="contactInfo">Location | Email</p>
        </header>
        <section id="employmentHistory">
            <h2>Employment History</h2>
            <div id="timeline"></div> <!-- Placeholder for the JavaScript array -->
        </section>
        <section id="education">
            <h2>Education</h2>
            <ul>
                <li>Degree | University (Year)</li>
                <li>Degree | University (Year)</li>
                <!-- Add more list items as needed -->
            </ul>
        </section>
        <section id="skills">
            <h2>Skills/Certifications</h2>
            <ul>
                <li>Skill 1</li>
                <li>Skill 2</li>
                <li>Skill 3</li>
                <li>Skill 4</li>
                <!-- Add more list items as needed -->
            </ul>
        </section>
    </div>
    <script src="script.js"></script>
</body>
</html>

styles.css file

/* Base reset for padding and margin for all elements */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

/* Body styling */
body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    background-color: #f4f4f4;
}

/* Container for centering the content */
.container {
    width: 80%;
    margin: auto;
    overflow: hidden;
    padding: 20px;
}

/* Header styling */
header {
    background: #333;
    color: #fff;
    padding: 20px;
    text-align: center;
}

/* Header image and name styling */
.headshot {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    display: block;
    margin: 20px auto;
}

header h1 {
    margin-bottom: 10px;
}

/* Contact information styling */
#contactInfo {
    font-size: 1.1em;
    margin-bottom: 20px;
    color: #fff; 
    padding: 15px;
}


/* Section styling for employment, education, and skills */
section {
    background: #fff;
    margin: 20px 0;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

section h2 {
    margin-bottom: 10px;
}

/* Timeline styling */
#timeline .entry {
    border-left: 3px solid #333;
    margin-bottom: 5px;
    cursor: pointer;
}

#timeline .entry-header {
    background: #e2e2e2;
    padding: 10px;
    margin-left: -3px; 
}

#timeline .entry-header:hover {
    background: #ccc; 
    color: #333; 
}

/* Style for the job description content */
#timeline .entry-content p {
    padding: 5px 10px;
    background: #f9f9f9;
    border-left: 3px solid #333;
    display: block; 
}

/* List styling for education and skills */
section ul {
    list-style: inside square;
    padding: 0 20px;
}

section ul li {
    padding: 2px 0;
}

/* Adjustments for active class */
.entry.active .entry-header {
    background-color: #e2e2e2; 
    color: #333; 
}

.entry.active .entry-content {
    display: block; 
}

/* Visual cue for clickable items */
.entry .entry-header:after {
    content: ' (click to expand)';
    font-size: 0.8em;
    color: #666;
}

.entry.active .entry-header:after {
    content: ' (click to collapse)';
    font-size: 0.8em;
    color: #666; 
}

script.js file

// Used on the résumé to make the employment history interactive (each job is clickable)
document.addEventListener('DOMContentLoaded', function () {
    // Placeholder array with employment history data
    const employmentHistory = [
        { id: 1, title: 'Job Title', company: 'Company Name', years: 'Year - Year', description: 'Description of what you did' },
        { id: 2, title: 'Job Title', company: 'Company Name', years: 'Year - Year', description: 'Description of what you did' },
        { id: 3, title: 'Job Title', company: 'Company Name', years: 'Year - Year', description: 'Description of what you did' }
        // Add more entries as needed
    ];

    const timeline = document.getElementById('timeline');

    // Create timeline entries
    employmentHistory.forEach(job => {
        // Entry container for job
        const entry = document.createElement('div');
        entry.className = 'entry';
        entry.id = 'entry-' + job.id;

        // Title header for job
        const header = document.createElement('div');
        header.className = 'entry-header';
        header.innerText = job.title;

        // Content container for job, initially hidden
        const content = document.createElement('div');
        content.className = 'entry-content';
        content.innerHTML = `<strong>Company:</strong> ${job.company}<br>
                             <strong>Years:</strong> ${job.years}<br>
                             <p>${job.description}</p>`;
        content.style.display = 'none';

        // Append header and content to the entry
        entry.appendChild(header);
        entry.appendChild(content);

        // Event listener to toggle content visibility
        header.addEventListener('click', function () {
            // Check if the clicked header's content is currently shown
            const isContentShown = content.style.display === 'block';
            // Hide all open contents
            document.querySelectorAll('.entry-content').forEach(el => {
                el.style.display = 'none'; // Hide content
            });
            // Deactivate all headers
            document.querySelectorAll('.entry').forEach(el => {
                el.classList.remove('active'); // Remove active class
            });

            if (!isContentShown) {
                // If it was not shown before, display it
                content.style.display = 'block';
                entry.classList.add('active');
            } // If it was shown, it will be hidden as part of the above loop
        });

        timeline.appendChild(entry);
    });
});

Create an S3 Bucket and Configure it for Static Website Hosting and Public Access

Now that you have your three code files (plus don't forget a "headshot.jpg" to display your smiling face), you need somewhere to put them.

In AWS, S3 is a great option for inexpensive object (read: files) storage. And if you're only using client-side code like you are, then you can configure S3 for static website hosting.

Create an S3 bucket

In the AWS Management Console, navigate to S3.

Navigate to S3

Click Create bucket.

Create a new bucket

Enter the details for your bucket.

• Bucket name: IMPORTANT! If you plan to use a custom domain for your résumé, then this bucket name should match the domain name exactly. For example, I'll be using "amberaws.com" so my bucket name needs to be "amberaws.com". If you use a different name, you'll run into trouble when you get to the Route 53 part of the tutorial.
• AWS Region: You can choose any region you'd like, but I'd recommend going with the one closest to you.
• Object Ownership: Leave the default of ACLs disabled (recommended).

Enter bucket name, region, and object ownership

Scrolling down, deselect the setting for Block all public access. NOTE: In most scenarios, this is not recommended, as you'll see from the warning you receive when you disable it. But because you're creating a public résumé that you DO want to be open to the world, then disabling this is appropriate.

Deselect the option to block all public access, then acknowledge the setting

Use the defaults for the rest of the bucket settings and then click Create bucket.

Select defaults for the rest of the bucket settings, then create bucket

Now you have an empty bucket, but it's not quite ready for primetime in terms of website hosting. You'll need to make a couple more updates.

Enable static website hosting

For S3 to be able to serve your files up as a website, you'll need to enable that on the bucket.

Click into the bucket you just created and go to the Properties tab.

Navigate to the Properties tab for the bucket

Scroll all the way down to the bottom of the page, and in the Static website hosting section, click Edit.

Edit the static website hosting setting

Select Enable. This will open additional options.

Enable static website hosting

For the Index document, enter index.html. This specifies the default home page for the site (your HTML code for your résumé). Then click Save changes.

Specify the default home page (index.html) and save changes

Add a bucket policy to allow the contents of the bucket to be publicly accessible

When you created the bucket, you said you didn't want to block all public access. But even with that setting, the default behavior of S3 is to "deny" everything. So if you don't explicitly say that people can access the files in your bucket, they won't be able to. You'll grant read permissions with a bucket policy.

At the top of the page, click the Permissions tab.

Click the Permissions tab of the bucket

Scroll down to the Bucket policy section, and click Edit.

Edit the bucket policy

Copy the following bucket policy (JSON code).

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject"
            ],
            "Resource": [
                "arn:aws:s3:::Bucket-Name/*"
            ]
        }
    ]
}

Paste the code into the Policy section in the AWS console. This policy says to "Allow" everyone (the Principal of "") to take the action of "GetObject" (basically "read") on all files in your bucket ("Bucket-Name/").

IMPORTANT: Update "Bucket-Name" with the name of your bucket. Then click Save changes.

Paste the JSON code for the bucket policy, updating "Bucket-Name" to your own

You've now got a bucket that's configured for static website hosting, and you've applied a policy that will let people access the site. Now it's time to add your impressive code files that you created earlier.

On the top of the page, click the Objects tab.

Click the Objects tab on the bucket

Click the Upload button.

Click the Upload button to upload your code files

Drag and drop your four files to the browser. This should include index.html, styles.css, script.js and headshot.jpg.

Drag and drop your four files (code and headshot.jpg)

After the files have uploaded and all four display in the Files and folders section, click the Upload button.

Upload the files

Now it's time to test that your résumé loads. To do this, you'll need to get the S3 bucket website endpoint.

Navigate to the Properties tab of the bucket.

Navigate to the Properties tab

Scroll all the way down to the bottom of the page, to the Static website hosting section. Click on the Bucket website endpoint link (it will open in a new tab).

Click the bucket website endpoint to view your resume (in a new tab)

If everything worked, you should see your handiwork displayed in the browser. Yay!

It works! Your resume being served up by S3.

Congrats on getting your résumé hosted in S3 with public access! But as impressive as it is, it would be even more impressive if it were using a custom domain. Currently, it's using the S3 website URL, formatted as [bucketname].s3-website-[regionname].amazonaws.com.

The resume would be much cooler with its own custom domain name

Let's work on the domain name next, using Route 53, which is Amazon's domain name and DNS service.

Domain Name Option 1: Register a New Domain Name with Route 53

If you don't already have a domain name, then you can register one with AWS, using Route 53. (If you already have a domain name with another provider, I'll give you some general guidance on using that in the next section.)

Navigate to Route 53.

Navigate to Route 53

On the Route 53 Dashboard, simply enter the domain name you're interested in, then click Check.

Check availability of a domain name

If the domain name is available, you'll be able to Select it (and if it's not available, you'll see some alternate names). Selecting it will add it to your cart, take you through a checkout process, and then the charge will show up on your AWS bill.

Select the available domain or choose alternatives

After you purchase the domain, it will automatically create a hosted zone for you. You can think of a hosted domain as a container for records and rules that control how traffic is routed.

A public hosted zone (which you'll be working with) controls traffic from the internet. A private hosted zone controls traffic internal to an AWS Virtual Private Cloud (VPC).

You can view your hosted zones by clicking on Hosted zones on the left navigation, then click into the zone that matches the domain name you purchased ("amberaws.com" in my case).

Select the hosted zone for your domain name

Domain Name Option 2: Use a Domain Name from a Third-Party Provider

So, you already have a domain name from somewhere else, like GoDaddy, Namecheap, Google Domains or the like. It's totally possible to use Route 53 as your DNS service (which has a lot of benefits, and is easy to integrate with other AWS services), while still keeping the domain name with your other provider.

The details of each registrar are slightly different, so I'll give some general guidance here. Also know that propagation of DNS changes will take longer with an external provider, and if things go wrong, you'll probably need to work with them directly. But I'll get you started!

Create a hosted zone and get your name servers

Even if you aren't using a domain name from Route 53, you'll still need a hosted zone (again, this holds the records and rules that control how traffic is routed).

Click on Hosted zones on the left navigation, then click Create hosted zone.

Create a hosted zone for your external domain name

Enter the domain name from the third-party provider, select Public hosted zone, then click Create hosted zone.

Fill in the details for the public hosted zone

Once your public hosted zone is created, you'll see four name servers listed. Make a note of these.

Make a note of your name servers so you can enter them with the third-party provider

Next, go to the DNS settings for your current domain provider. Find your name server settings, and replace them with the name servers from Route 53.

For more specifics, here are guides from some of the more popular domain name providers:

• GoDaddy
• Namecheap
• Google Domains
• Hostgator

After you've made the updates on the third-party site, and changes have propagated, you should be good to follow along with the rest of this article.

Create an A Record with an Alias to Point to the S3 Website

Now that you have a public hosted zone, you need to create a record that says how traffic should be routed when someone goes to your domain name.

Click into your hosted zone, and then click Create record.

Create a new record

NOTE: If you get the "wizard" view below, click Switch to quick create. (If you don't see this "tile" view, then you're already in quick create mode.)

Switch to quick create view

Fill out the details for the record.

• Record name: Leave the subdomain blank, and just go with the root domain (like "amberaws.com").
• Record type: A
• Alias: Toggle this on. An alias lets you route to AWS resources like S3, CloudFront, Elastic Beanstalk and so on.

Fill in the domain, record type and then toggle Alias to on

Now fill in the details of where to route traffic. You can type into these dropdowns to filter the values.

• Alias to S3 website endpoint
• Your region (I'm using US West (Oregon))
• The final dropdown should automatically populate with your S3 website. NOTE: If nothing shows up here, it's likely because you didn't name your bucket the same as your domain name. D'oh! You'll need to recreate the bucket with the exact name of your domain.

Fill in the details for traffic routing

For Routing policy, select Simple routing. For Evaluate target health, leave the default of Yes, then click Create records.

Choose routing policy, target health, and then create record

It can take up to 60 seconds for your changes to take effect. You can view the status of propagation by clicking on the handy View status on top of the page.

View the propagation status of your changes

After the Status changes from PENDING to INSYNC, then you should be good to test out your changes.

Make sure the status says INSYNC before testing things out

Now let's test! If everything worked, then when you type your domain name into a browser (like amberaws.com), Route 53 should direct you to the S3 website, which means you should see your (awesome) résumé.

It works! Your domain name should now display your resume.

Congratulations! You've made a ton of progress. The last piece is to get a secure connection (HTTPS, with a TLS/SSL certificate) working so you can get rid of that pesky "Not secure" message from your browser.

Let's tackle that piece next, using AWS Certificate Manager.

Create a Public TLS/SSL Certificate using AWS Certificate Manager

If you need a refresher on certificates, these help ensure a secure connection between users and the server they're making a request to.

If I'm sending bank information across the internet, for example, I want to know that it's going to a server that's reputable, and that the connection is encrypted. And even for something as "simple" as a résumé, a secure connection will give viewers confidence that they haven't ended up on a sketchy website.

Why we need certificates

In AWS land, certificates are created and managed in AWS Certificate Manager (ACM). (You can also import existing certificates from another authority if you have them.)

Navigate to Certificate Manager.

Navigate to Certificate Manager

IMPORTANT! For this section, you need to switch your region to us-east-1 (N. Virginia). If you create a certificate in another region, you won't be able to use it with CloudFront (where you'll eventually end up).

Change region to us-east-1 (N. Virginia)

From the Certificate Manager landing page, click Request a certificate.

Request a certificate

Select Request a public certificate and then click Next.

Select a public certificate and then click next

Enter your domain name (like "amberaws.com"), leave the rest of the options as defaults, then click Request.

Enter your domain name and then request

The request was successful, but it will have a "pending validation" status until you validate DNS. Click View certificate.

View the certificate to take additional actions

Before a certificate can be issued, Amazon needs to confirm that you own this domain and that you're able to modify DNS settings (in Route 53). To start this process, click Create records in Route 53.

Create records in Route 53 to validate DNS

There are various filters applied to this next screen, checking for validation status and whether your domain is found in Route 53. From here, you can click Create records, which will actually – wait for it – create a record in Route 53 for you.

Create records, which will create a CNAME record in Route 53

If the record creation was successful, you should see a message to that effect.

Successfully created a record in Route 53 to validate DNS

The record was created in Route 53. So navigate to Route 53, to your hosted zone you were working in earlier. You should see a new CNAME record that was created from Certificate Manager.

View the new CNAME record in Route 53

Great! You have a TLS/SSL certificate, but what do you do with it now?

Your website files are currently hosted in S3, but unfortunately, you can't use a certificate on an S3 bucket.

Certificates don't work with S3

What you need instead is a CloudFront distribution that points to the S3 bucket. And then the certificate is applied to the CloudFront distribution.

CloudFront is the solution!

You know what that means, right? It means we need to head off to CloudFront next!

Create a CloudFront Distribution

CloudFront is Amazon's content delivery network, or CDN. It's used to get content to users faster by caching it at "edge locations" around the world. This works great for things like videos and images, making them faster to load.

For your simple résumé, because the files are so small, you won't notice much of a performance difference. But it is the way you'll be able to apply the TLS/SSL certificate you created in the last section.

Navigate to CloudFront.

Navigate to CloudFront

On the CloudFront home page, click Create a CloudFront distribution.

Create a CloudFront distribution

The origin domain is where your website files live, which is in S3. If you type in S3 to filter, it should pull up your bucket.

Filter by S3 to find your bucket as the domain origin

But wait! You get a message about using the website endpoint rather than the bucket endpoint. Yes, that's what you want! Click Use website endpoint, and AWS will update the endpoint for you.

Use the website endpoint, not the bucket endpoint

There are gobs of settings on the rest of this page, but you only need to update a few of them.

Scroll down to the Default cache behavior section, then under Viewer, select Redirect HTTP to HTTPS.

Redirect HTTP to HTTPS

Scroll down to Web Application Firewall (WAF) and select Do not enable security protections.

Do not enable WAF

In the next section, Settings:

• For Alternate domain name (CNAME), enter your domain name (like "amberaws.com").
• For Custom SSL certificate, select the certificate you set up earlier. NOTE: if you set it up in a region other than us-east-1 (N. Virginia), it won't show up here. D'oh! You'll need to recreate it in us-east-1.

Enter an alternate domain name and the custom SSL certificate

Scroll to the bottom of the page.

For Default root object, enter index.html (your default home page) and then click Create distribution.

Set the default root object as index.html and then create distribution

It will take several minutes for the CloudFront distribution to finish deploying (even if it says "Successfully created" at the top of the page). You'll know it's done when the Last modified value shows a date and time.

The deployment is done when a date/time appear in "Last modified"

To test that everything is working with CloudFront and the TLS/SSL certificate, copy the Distribution domain name. Open a new tab in the browser and navigate to that address.

Copy the distribution domain name and open it in a new tab

If everything worked, you should now see the all-important padlock icon in your browser, indicating that you're on a secure connection using the certificate set up through Certificate Manager.

The TLS/SSL certificate is working with CloudFront!

Awesome! But before you get excited thinking we're done, remember that you ultimately want to go to your custom domain name to load the résumé, not to this lengthy CloudFront distribution domain name.

Update Route 53 to Point to the CloudFront Distribution

At the moment, the A Record in Route 53 is pointing to the S3 bucket, like this...

Route 53 currently points to the S3 bucket

Instead, we want Route 53 to point to the CloudFront distribution, which then points to S3, like this...

Route 53 should point to CloudFront, which then points to S3

Navigate back to Route 53, to the hosted zone you've been working with. Select the A Record, then on the right of the screen, click Edit record.

Edit the Route 53 A Record

Instead of routing traffic to S3, update the three dropdowns to point to your CloudFront distribution.

• Alias to CloudFront distribution
• US East (N. Virginia) (this option is selected for you and grayed out)
• Choose your distribution (it should automatically populate in the third dropdown)

Click Save.

Update the A Record to route traffic to CloudFront

Behold the Final Result

And now the moment of truth: if everything worked, you should be able to navigate to your custom domain name and have it load your résumé on a secure connection.

Final résumé loading on a custom domain name over a secure connection

And VOILÀ! It works.

The résumé files (coming from S3 via CloudFront) load on the custom domain name (from Route 53) over a secure connection using the TLS/SSL certificate (from Certificate Manager). Nice work.

Here's what you've built:

A diagram of the final project

IMPORTANT! Delete Your Resources

At the beginning of the article, I covered the costs for the services. If you choose to leave them running, it shouldn't cost you a fortune (unless, of course, your résumé goes viral and you're suddenly paying for a ton of Route 53 and CloudFront traffic...maybe a good problem?).

But definitely set up an AWS Budget to be notified when charges reach a certain threshold.

For those of you who want to delete everything you built, let's do that now.

Disable and delete the CloudFront distribution

Navigate to CloudFront and select your distribution. Before you can delete it, you first have to Disable it.

Disable the CloudFront distribution

This will take several minutes to complete, and it has to finish before you can delete some other things. So let it run. When it's done, you should see a date and time in the Last modified column.

Ensure the CloudFront distribution is disabled

Once the distribution is disabled, select it and then click Delete.

Delete the CloudFront distribution

Delete records from the Route 53 hosted zone

Navigate to Route 53 and the hosted zone you've been working in. Records won't cost any money, but if you don't plan to use them, it's a good idea to delete them to avoid confusion in the future.

Select the A Record and the CNAME Record and then click Delete records.

Delete the A Record and CNAME Record from Route 53

Delete the hosted zone (optional)

You can also choose to delete your hosted zone in Route 53, but if you do, your domain might become unavailable on the internet.

If you plan to use your domain name at some point in the future, I'd recommend keeping the hosted zone (I've chosen to keep mine). Keeping the zone will cost you 50 cents per month.

But if you'd like to go ahead with deletion, just select the hosted zone and click Delete.

Delete the Route 53 hosted zone

Confirm that you've completed the actions in this warning message, type "delete," and then click Delete.

Confirm deletion of the Route 53 hosted zone

Delete the certificate from Certificate Manager

Navigate to Certificate Manager. Select the certificate you created, then click Delete. (If the CloudFront distribution hasn't been disabled yet, you'll get an error on this step saying the resource is still in use.)

Delete the certificate from Certificate Manager

Empty the S3 bucket and then delete it

Navigate to S3, to the list of all your buckets. Select the bucket and then click Delete.

Delete the S3 bucket

Before you can delete a bucket, you must first delete the files in it. AWS provides a handy link to do that. Click the link to empty bucket configuration.

Empty files from the S3 bucket

Confirm that you want to permanently delete the files (you do) by typing "permanently delete" and then clicking Empty.

Confirm deletion of files

Now that the bucket is empty, you can delete it. And in the success message at the top of the screen, there's a convenient link to do so. Click delete bucket configuration.

Delete the S3 bucket

Confirm this action by typing in the name of your bucket, then clicking Delete bucket.

And that's it! The resources have been deleted, and you shouldn't incur any additional charges.

Wrapping up

Congratulations on making it all the way to the end! I hope you were able to successfully build out a résumé, and at the same time cement some of your AWS skills for the future. Feel free to share it with the world, and best of luck in your job search.

_For more tutorials on AWS and other tech, head to Tiny Technical Tutorials on YouTube._

In this article, I'll share the insights I've gained to help you optimize your profile so that you can achieve similar success.

Hello, my name is Michael. Like many others, I am a self-taught web developer on a journey to transition from my current career into the tech industry.

Although I haven't finished learning front-end web development, I am already earning side income by writing articles and providing code reviews. How did I accomplish this? One of the ways is through an optimized LinkedIn profile, which helps bring monetary opportunities directly to me.

In this article, I will share with you what I learned from having my LinkedIn profile reviewed by employees from LinkedIn and Microsoft, recruiters, and a tech celebrity during livestream events. 📺

Why should you optimize your LinkedIn profile?

Having a LinkedIn profile in today's industry is arguably just as important as having a resume/CV.

By optimizing your LinkedIn profile, you will not only stand out from the crowd of other web developers but also help attract recruiters, hiring managers, and additional opportunities directly to you. 💸

How you should treat LinkedIn

Unlike other platforms, LinkedIn is a professional work-related platform, and it should be treated as such. Refrain from posting personal social content, your opinions on controversial subjects, and anything else that may hinder your reputation.

You have a right to voice your opinions, but you should consider posting them on other social media platforms. It is not in your best interest for potential hiring managers to dismiss you from employment opportunities simply by judging you based on your posted content. 😬

LinkedIn Profile Sections

To optimize your LinkedIn profile, I will guide you through each of the following LinkedIn profile sections:

• How to Optimize your LinkedIn Profile Picture and Banner
• Open to Work Banner
• Headline Section
• Location Setting
• Featured Section
• Activity Section
• Summary (About) Section
• Experience Section
• Education Section
• Licenses and Certifications Section
• Projects Section
• Skills and Endorsements Section
• Recommendations Section
• Honors & Rewards (Accomplishments) Section
• Creator Mode

Additional tips:

1. Post external links in the comments
2. Change the default profile URL to your name
3. Separate Profile for separate languages
4. LinkedIn Learning
5. LinkedIn Skill Assessments

💡 Tip: Did you know many recruiters are not programmers? Keep this in mind to better optimize your LinkedIn profile.

How to Optimize your LinkedIn Profile Picture and Banner

In this section, you'll learn how to optimize your profile picture and banner on LinkedIn to make your profile look more professional.

How to Optimize your Profile Picture

Your profile picture is easy, so we'll start with that. Since the absence of a picture or an avatar in its place may be perceived as a red flag to hiring managers, use a real picture of yourself (don't be shy). 😏

Use a close-up picture of yourself in professional clothing, as you would in an interview, from the shoulder area up, and a professional-looking or blank background.

How to Optimize your Banner Image

For your banner, your goal is to convey a clear picture of your desired job role.

When creating a custom banner, here are things to consider:

• The banner image should reflect your desired job role, not contradict it.
• Other people viewing your profile may not be programmers.
• Everyone will not recognize tech icons without the corresponding names.
• Add contact information as an alternative method to be reached.
• Incorporate a hobby to spark conversation.

Banner Image

An unintentional mistake I made was to use on my blog's logo as a banner, which included the word "self-taught" in big letters. Danny Thompson brought to my attention during a livestream review that it wasn't in my best interest to broadcast that I am a self-taught developer, as it can be seen as a red flag to hiring managers.

Other banner image mistakes include unrelated tech images such as nature scenery or having no banner at all. Remember, you want your banner to reflect your desired job role.

Another thing to remember is that other people viewing your profile may not be programmers, so including icons alone without corresponding names, such as HTML, CSS, JavaScript, and React logos, may not be recognized by everyone.

Adding contact information

Another thing I learned while having my profile reviewed is that recruiters have a limited number of monthly LinkedIn InMail credits available to reach out to potential candidates. So, adding your contact information to your banner, such as your website, email, and phone number, creates an alternative means of reaching you without having to utilize their InMail credits.

Conversation starter

This will not be for everyone, but it is definitely worth mentioning. Recruiter Taylor Desseyn told us of a developer who incorporated his time as a sound engineer for the Backstreet Boys in his LinkedIn banner. This caught the attention of a recruiter who contacted the developer due to their music industry experience, ultimately securing them a tech job. So, if you have a personal, non-tech-related experience or hobby that could potentially spark a conversation, consider including it.

💡 Tip: Recruiters have a limited number of InMail credits, which they use to reach out to potential candidates. Providing your contact information in your LinkedIn banner provides an alternative method for others to get in touch with you.

Open to Work Banner

If you are feeling brave, you can display an "OPEN TO WORK" banner that proudly displays your availability to everyone.

However, since this is a delicate topic, and everyone's situation varies, there is an option that allows you to maintain the privacy of your open-to-work status. There will not be a displayed banner, but recruiters will know you are available to work. 🤫

To set the "Open to Work" banner on LinkedIn, follow these steps:

1. Log in to your LinkedIn account and navigate to "Edit job preferences."
2. Fill in the fields, such as job titles, location types, start date, and employment types.
3. Now, for visibility, choose whether to share your open-to-work status with all LinkedIn members or only with recruiters. Selecting the first option will display the "Open to Work" banner on your profile picture, while the second option keeps it private.
4. Click "Save" to apply the changes.

Note: Please proceed with caution when selecting your open-to-work status, regardless of whether you choose to display the banner or not, as LinkedIn has a disclaimer stating they cannot guarantee complete privacy. Use this feature at your own risk.

Headline Section

In your headline section, briefly describe yourself by adding keywords that match the job role you seek and your skill sets. In my case, I entered "Technical Writer | Front-End Web Developer | React | JavaScript | CSS | HTML | Scrimba Code Reviewer."

Of course, you can get more descriptive and tell a little about yourself, but the main goal is to provide specific keywords.

The reason for including keywords related to your skills and desired job role in your headline ensures that you appear in relevant search results of recruiters and employers.

Location Setting

For my LinkedIn location setting, I initially set it to Brooklyn, New York, which is where I am based. When LinkedIn employee Austin Henline reviewed my profile, he explained that setting my profile to Brooklyn limits the searches I appeared to just Brooklyn.

By modifying my LinkedIn location from Brooklyn to the New York City Metropolitan Area, which includes Brooklyn, I substantially expanded the range of job searches in which I appear.

To optimize your LinkedIn location setting most effectively, select the broadest range that encompasses the specific location where you live or desire to work.

How to change the location setting on LinkedIn:

1. Click on your profile picture or the "Me" icon at the top of the LinkedIn homepage.
2. Click "View Profile" to access your profile page.
3. In the "Intro" section, click the pencil icon to edit your information.
4. In the "Location" field, enter the desired location or select from the suggested options.
5. Click "Save" to apply the changes.

💡 Tip: Optimize your LinkedIn location setting by choosing an area that covers a broad radius, ensuring your profile appears in more job searches.

Featured Section

The Featured section is the place to proudly display your achievements, awards, best original projects (not direct copies of tutorial projects), and similar content to showcase yourself in the spotlight. This section is arranged horizontally, scrolls like a carousel, and enables you to rearrange and pin your most recent content to the beginning/top.

Examples of content to feature include:

• Testimonials received
• Awards or recognitions received
• Published articles or blog posts
• Appearances (such as Livestream events)
• Presentations or conference talks

Keep in mind that others viewing your work might not be developers, so be sure to provide clear descriptions and context for each featured item, including the technologies used if applicable (such as React, Tailwind, JavaScript, and so on).

You can optimize your Featured section by including all relevant materials that demonstrate your skills and experience. Additionally, include content that you believe will effectively grab the attention of recruiters and hiring managers.

I display all of my colorful article thumbnails with external links to each, in the Featured section, transforming it into a visually appealing scrolling magazine rack. 📰

💡 Tip: Showcase your best content in the Featured section to capture the attention of recruiters and hiring managers, and remember to update it frequently.

Activity Section

It's vital for you to keep your LinkedIn profile active because a profile without activity will display a "hasn't posted lately" message in the Activity section. Recruiters and hiring managers are hesitant to reach out to profiles without activity because they are uncertain whether their attempts to make contact will be successful.

You can keep your profile active by:

• Creating posts: Share updates, articles, or insights to showcase your expertise and engage with your network.
• Leaving comments on posts: Interact with others by providing valuable feedback, asking questions, or sharing your thoughts on their content.
• Sharing posts: Amplify the reach of interesting content with your network, helping spread valuable insights and knowledge.
• Attending LinkedIn Livestream events: Participate in live video events hosted by industry experts, companies, or influencers to learn, network, and engage with others (Taylor Desseyn has great ones).
• Publishing articles: Write long-form content on LinkedIn to demonstrate your knowledge, share your experience, and establish yourself as a thought leader in your field.

Having an active profile will increase your visibility to recruiters and hiring managers, and since they know you frequently use the platform, they will not be hesitant to reach out to make contact with you.

💡 Tip: Keep your profile active to avoid the "hasn't posted lately" message in the Activity section, which may discourage recruiters and hiring managers from attempting to contact you.

Summary (About) Section

Everyone seems to have various opinions about what to put in your About section. From what I gathered through my profile reviews and research of LinkedIn documentation, the overall idea is to craft it like an elevator pitch.

So, what is an elevator pitch? An elevator pitch is a short speech briefly describing your background, skills, goals, and unique value, typically around 30 seconds to 1 minute (the length of time spent in an elevator with someone).

If you alternatively prefer a more detailed approach to crafting your About section, I recommend following the guidance of LinkedIn employee, Austin Henline. He advises providing five paragraphs that contain the following:

1. A hook: A captivating opening statement that grabs the reader's attention.
2. Your past: A brief overview of your previous experiences and accomplishments.
3. Your present: A description of your current role, responsibilities, and ongoing projects.
4. Your future: A statement outlining your career goals and aspirations.
5. Your skills: A list of your relevant technical and soft skills showcasing your expertise.

To further optimize your About section and make it more visible in search results of potential employers, be sure to incorporate plenty of relevant keywords, as this section is also keyword-searchable. You can incorporate web developer keywords such as HTML, CSS, JavaScript, React, responsive design, UX/UI design, accessibility, performance optimization, etc.

The Mistakes I made

To further improve your LinkedIn About section, consider the constructive feedback I received from recruiter Molly-May Gallagher. Enhance your LinkedIn summary by clearly stating desired work, highlighting key technical skills, focusing on relevant experiences, detailing current role technologies, and removing unrelated information for a concise, impactful summary.

Also, be sure to clarify your desired job roles to avoid confusion. Alishah Novin from Microsoft pointed out that listing multiple roles, like technical writing and front-end development, as I did, can make your true passion unclear, leading to potential missed opportunities.

💡 Tip: Include keywords relevant to your industry and desired job role in your About section to increase search results visibility.

Experience Section

To best optimize the Experience section of your LinkedIn profile, list your experiences relevant to the job roles you are currently seeking (not all of your unrelated tech roles). For each experience listed, be sure to include details for each, including company name, duration, and a brief description of your responsibilities and achievements.

For example, I will share a tech-related experience I included. Since I work part-time remotely as a paid code reviewer for Scrimba, in addition to a detailed description of the job role, I added the following keyword searchable skills: React, JavaScript, CSS, HTML, and Teaching. I also linked to a playlist of my recorded code reviews so that others can see a demonstration of my skills.

💡 Tip: If you are currently in college or recently graduated and lack work experience, you can highlight your volunteer experience, club experiences, and projects in your profiles Experience section.

Education Section

In the Education section, list the degrees and diplomas you have earned, along with the schools, colleges, or universities you have attended. You also have the opportunity to include any additional relevant information, such as participation in activities, societies, or honors you have received.

To best optimize the Education section, emphasize relevant coursework, highlight achievements, and explain the impact of education on your career trajectory as it relates to computer programming.

💡 Tip: If you have a time gap between jobs due to a career transition or break, you can create a positive spin on it by adding supplemental work experience such as completing Bootcamps, earning certificates, studying, and freelancing.

Licenses and Certifications Section

This section lets you showcase your professional certifications, licenses, and achievements. As a web developer, I'm sure you have completed many online courses that issued certificates from schools such as freeCodeCamp, Scrimba, Sololearn, and similar. You can add each of your earned certificates in this section and link to them (I have my linked certificates stored on GitHub).

To add a certification, go to your LinkedIn profile, click "Add profile section," select "Licenses & certifications," and enter the required details such as certification name, issuing organization, issue date, expiration date, and associated credential ID.

Projects Section

As a developer, you are definitely going to want to utilize this elusive yet extremely valuable LinkedIn feature, the Projects section. I wasn't even aware this section existed until LinkedIn employee Austin Henline revealed it during a YouTube Livestream.

The Projects section allows you to showcase your work, giving you an opportunity to demonstrate your skills and expertise. For each project, be sure to include a brief description and the technologies used _(remember, not all recruiters and hiring managers are programmers)_. You can also provide a link to the deployed project or repository, which allows others to view it.

I decided to showcase my deployed Tetris project. I followed freeCodeCamp's game tutorial, taught by Ania Kubow, and took it to the next level by adding styling, sounds and music, a scoring system, and more.

When users click on the link to the deployed project directly within the LinkedIn app, they are instantly mesmerized as they suddenly take control of the falling tetrominoes trying to clear completed solid rows. My hope is that they become momentarily lost in the game, and when it ends, they click back to my profile and think, "We have to hire this guy!"

To access the LinkedIn Projects section and add projects:

1. Click on "Add profile section".
2. Click on "Recommended".
3. Choose "Add projects".
4. Fill in the project details, such as the project name, description, and date.
5. You can add your top 5 skills used in this project.
6. You can add media such as images, documents, sites, or presentations
7. Click "Save" to add the project to your profile.

💡 Tip: To best optimize your LinkedIn profile, include unique projects in your Projects section that will captivate and draw the interest of recruiters and hiring managers.

Skills and Endorsements Section

The Skills section enables you to showcase your abilities, such as HTML, CSS, and JavaScript and allows others to endorse each skill mentioned.

Be sure to add skills that are most relevant to the job roles you are seeking, and prioritize obtaining endorsements for them. The more endorsements you accumulate, the more credible you and your profile appear to potential employers.

Recommendations Section

Be sure to utilize the Recommendations section of your profile by asking others you have worked with to provide them. Just like receiving endorsements for your skills, having recommendations will also help increase your credibility and will make your profile more appealing to recruiters and hiring managers.

You can also write and provide recommendations for fellow LinkedIn members in your network.

Honors & Awards (Accomplishments) Section

In your LinkedIn profile's Honors & awards section, you can showcase your achievements, awards, and recognitions. Be sure to add ( and earn ) relevant honors and awards, as this section demonstrates additional credibility to potential employers, further optimizing your LinkedIn profile.

Honors & awards may include:

• Coding competition awards
• Scholarships and grants
• Community leadership roles
• Technical writing achievements
• Speaking achievements
• Mentorship roles

Creator Mode

If you are a content creator, turning on LinkedIn Creator mode provides additional tools such as a "Follow" button, analytics, profile topics, and a set of creator tools that you can use to optimize your LinkedIn profile further.

Follow button

The Follow button provides LinkedIn members with an alternative option to connect with you. Once you surpass five hundred connections, a "500+ connections" displays, whereas there is no limit to the number of displayed followers.

Analytics

Analytics includes your post impressions, profile views, followers, and your search appearances. You will gain insights into your content's performance by selecting date ranges from a week to a year and choosing from a list of demographics. This information will help you clearly understand who is engaging with your content, allowing you to make informed decisions about your content strategy.

Profile topics

Creator mode allows you to showcase five "Profile Topics" that highlight your expertise, making it simpler for audiences to understand your focus, enhancing credibility, and attracting a targeted audience.

Creator tools include:

• Collaborative articles: Jointly written articles by multiple authors on LinkedIn.
• LinkedIn Live: Real-time video streaming feature on LinkedIn for engaging audiences.
• Audio Event: Virtual audio-based discussions or presentations on LinkedIn.
• Newsletters: Periodic publications sent to subscribers, sharing updates and insights.
• Follow link: Button on LinkedIn profiles for users to follow and receive content updates.

The collaborative article is a new feature where the LinkedIn team creates an AI article, and invites select members to participate by adding their valuable insights.

As an active LinkedIn member, I was recognized and invited to participate. As I continue to add value to these collaborative articles, I currently have a "Top Writing Voice" badge displayed. However, I hold this badge for a minimum of 60 days, and if LinkedIn members stop finding my insights valuable, they will take the badge away. (No pressure, right? 😅)

At this time, collaborative articles are by invitation only, but they mentioned LinkedIn members who engage with them by liking or reacting to them will be considered.

Attribution: LinkedIn logo by LinkedIn Corporation, used under fair use for informational purposes.

Additional tips

In this section, I included a few additional LinkedIn tips I have learned that are worth sharing with you.

They include:

1. Post external links in the comments

When sharing content that is located on other platforms using links, do not put the link directly in your LinkedIn post. Instead, add external links in the comments of your LinkedIn post. This tip came from a LinkedIn employee who explained that doing this significantly improves your post's reach/performance on the platform.

2. Change the default profile URL to your name

For a more professional URL, you have the option to change the default one created to your name. My original URL was "https://www.linkedin.com/in/michael-larocca-9315a3202/". I have since changed it to "https://www.linkedin.com/in/michaeljudelarocca"

Here are the steps to changing your profile URL:

• Click on your profile picture or the "Me" icon at the top of the LinkedIn homepage.
• Click "View Profile" to access your profile page.
• In the "Intro" section, click the pencil icon to edit your information.
• Scroll down to "Edit public profile & URL" on the top right and click it.
• On the new page, under "Edit your custom URL," click the pencil icon next to your current URL.
• Enter your desired custom URL and click "Save" to apply the changes.

3. Separate Profile for separate languages

If you speak more than one language, you may be filling out your profile multilingually. Doing so will quickly deplete your allotted character limit for each section and may cause confusion for others viewing your profile.

As an alternative, you can create separate profiles for each language. Maintaining a profile for each language provides the advantage of personalizing them to attract diverse job opportunities in their respective languages.

Here are steps to add a profile in another language (desktop/laptop version only):

• On the top right, click on "ME."
• Then click on "View Profile."
• Finally, on the right, click on "Add profile in another language."

4. LinkedIn Learning

With a premium membership, you can access LinkedIn Learning, an online educational platform offering a wide range of courses. Upon completing these courses, you will receive LinkedIn Learning certificates, which optimize your LinkedIn profile by displaying your skills and professional development to prospective employers and connections.

You can take advantage of a free trial period to explore the platform by signing up for a one-month LinkedIn Premium membership. _(You can take LinkedIn Learning courses from Dylan Israel, a successful graduate of freeCodeCamp and a LinkedIn Learning instructor.)_

5. LinkedIn Skill Assessments

Skill Assessments are FREE tests offered by LinkedIn to evaluate your proficiency in various skills. A corresponding badge will be added on your profile when you pass a Skill Assessment test. If you fail the test, no worries! You are allowed to retake them after three months.

LinkedIn advertises that candidates who complete Skill Assessments are 30% more likely to get hired, so they are definitely worth trying to attain. Programming LinkedIn skill assessments you may be interested in include HTML, CSS, JavaScript, React.js, Angular, jQuery, and Vue.js.

To get an idea of what taking these tests are like, you can watch Kyle Cook's (Web Dev Simplified) recorded Livestream YouTube videos taking them.

Kyle Cook (Web Dev Simplified) LinkedIn Skill Assessments:

• LinkedIn HTML Quiz
• LinkedIn CSS Quiz
• LinkedIn JavaScript Quiz
• LinkedIn React Quiz

Special thanks

Special thanks to Scrimba and the industry experts who reviewed my LinkedIn profile and provided valuable, constructive criticism, which enabled me to optimize it, resulting in a continual flow of opportunities coming directly to me:

• Danny Thompson - Tech Celebrity!
• Austin Henline - LinkedIn
• Taylor Desseyn - Recruiter
• Alishah Novin - Microsoft
• Molly-May Gallagher - Recruiter
• Leanne Rybintsev - Scrimba Livestream host

Conclusion

As a web developer, having a LinkedIn profile is equally important as having a resume. Creating and optimizing a LinkedIn profile will help you stand out from the competition, draw the attention of recruiters and hiring managers, and attract a wealth of opportunities directly to you.

Once you have created and optimized your LinkedIn profile, you must stay active on the platform, as inactivity can be seen as a red flag for recruiters and hiring managers. You can stay active by interacting with posts through creation, commenting, and sharing them. You can also attend and participate in LinkedIn Livestream events to keep your account active.

Remember, LinkedIn is a professional platform and should be treated accordingly. Refrain from posting, commenting, or engaging in any form of communication that could potentially damage your reputation.

You can further enhance your LinkedIn profile by increasing your credibility. Make sure to include your honors and awards, consider taking LinkedIn Skill Assessments and courses, and ask for endorsements and recommendations from your network. Also, be on the lookout for new features you can take part in to boost your credibility, such as collaboration articles that award exclusive badges.

Most importantly, don't just take my word for it: regularly update your profile, discover what works best for you, and also observe how others have effectively optimized their LinkedIn profiles. If you or someone else has further optimization tips that I haven't covered, please share them so that we can all have the best-optimized profiles, leading to daily opportunities coming directly to each of us.

Other articles I've written related to LinkedIn

• LinkedIn Profile Optimization With Austin Henline
• Revamp Your Resume and LinkedIn Profile: Expert Tips to Get Noticed and Hired
• LinkedIn Review with Danny Thompson
• Create a LinkedIn profile that gets noticed by tech recruiters
• How to use LinkedIn as a developer to get a job in tech

Let's connect! I'm active on LinkedIn and Twitter.

You can read all of my articles on selftaughttxg.com

As the world continues to adapt to the new normal of remote work, the demand for remote developers has never been higher.

Companies are now realizing the benefits of hiring remote workers, including cost savings and access to a wider pool of talent.

If you're looking for a remote developer job, here are some tips to help you land your dream remote developer job.

I have been working remotely as a developer for many years now. In this article I'll share my experiences and advice with you so you can take advantage of the latest remote work trend.

Focus on Networking

Network, network, network. Networking is key to finding any job, and remote developer jobs are no exception.

Join online communities, attend virtual events, and reach out to people in your network to let them know you're looking for a remote developer job.

Photo by Unsplash

I have done this countless times throughout my carer. Attending meet ups has brought me great success, and helped me get my latest developer role as a Software Engineer at a remote blockchain start-up. I even got to go to Italy for an off site meet up (where I enjoyed lots of good food and drink).

If you have a limited network, I can't stress enough the value in reaching out to start up founders on platforms such as LinkedIn. It is literally there for the purpose of professional networking, yet hardly any developers I have met use it for this.

Key Networking Takeaways

• Networking can significantly increase your chances of finding a remote developer job.

• Use platforms such as LinkedIn and meetup.com to start out on your networking journey.

Brush Up on Your Skills

As with any job – and even more so with tech – staying current with the latest technologies and trends is essential to landing a remote developer job.

Consider taking online courses or earning certifications to demonstrate your commitment to staying up-to-date.

Photo by [Unsplash](https://unsplash.com/@timmossholder?utm_source=ghost&utm_medium=referral&utm_campaign=api-credit">Tim Mossholder / <a href="https://unsplash.com/?utm_source=ghost&utm_medium=referral&utm_campaign=api-credit)

It can also benefit you if you add some projects to your portfolio that utilise the skills you learn along the way. You can use these to sell yourself when it comes to interviews.

For example, I have built out a few projects lately that use Prisma, which is becoming a popular ORM for working with Postgres and NodeJS. I used the projects to sell myself during interviews and highlighted how I can use it, what I learned, and how I can add value to the company that is interviewing me immediately.

To find out what the latest tech trends are, note down the most common requirements in job descriptions. Go through a few interviews and see what they want to talk about, then simply adapt once you discover what those in-demand skills are.

This is helpful, because while there are a lot of cool technologies out there, many of them might not be helpful when it comes to getting a job. Most companies primarily use tried-and-true solutions that have been around a while. Even when they do use new tools, it's rarer.

By learning these key new skills, not only will it benefit you immediately but it will show any company looking to hire you that you have a desire to learn and constantly improve. This is something that will seriously help your chances of securing a remote position as a software engineer / developer.

Key Skills Takeaways

• Learning the most in-demand tools and technologies and keeping up to date will significantly enhance your chances of getting a remote developer job.

• Create projects that you can use to sell yourself and talk about. This is so valuable when it comes to showcasing the value that you can bring to a company.

Customize Your Résumé and Cover Letter

When applying for remote developer jobs, it's important to tailor your résumé and cover letter to the specific job and company you're applying to. Make sure to highlight any relevant experience you have and how it makes you a good fit for the position.

Photo by [Unsplash](https://unsplash.com/pt-br/@vantaymedia?utm_source=ghost&utm_medium=referral&utm_campaign=api-credit">Van Tay Media / <a href="https://unsplash.com/?utm_source=ghost&utm_medium=referral&utm_campaign=api-credit)

To customize your résumé and cover letter, you should first research the company and position you are applying for. Look at the job description and requirements, and make sure that your résumé and cover letter highlight your relevant skills and experiences that match what the company is looking for.

Additionally, use language and terminology that is specific to the industry or field you are applying for. You may also consider including specific examples or accomplishments that demonstrate your qualifications for the position.

For example, if you are applying for a remote job at Stripe, you need to go and do some research on the tech stack, values, basic info, vision and mission of Stripe. Really get to understand the company you are applying for as this will come across in your résumé and cover letter.

Aside from this, think about what the person reading your résumé is looking for. Not only do they want to see your skills, values, and carer highlights but they also are going to be looking at how hiring you will mitigate the risks that come with hiring engineers.

Recruiting talent is expensive for a company, so as a result they want to know that hiring you is not going to be a big risk. So make sure that you present the relevant details in your résumé / cover letter.

Finally, think about the core aspects of remote work and how soft skills such as communication, ability to work independently, and honesty are of huge value. Try to demonstrate these traits during interviews.

Key Résumé and Cover Letter Takeaways

• Tailor your résumé and cover letter for both remote work and the company you are applying to.

• Highlight points and skills that will help the employer see how hiring you will be a low risk investment.

• Cover how you can add value straight away.

Use Developer-Focused Job Boards

Job boards are a great way to find remote jobs. But most of them out there are tailored to a broader audience, so sometimes they can make it harder to filter out jobs you don't want.

Not only this, but the competition is higher. Instead, using niche job boards for developers is a great way to lower the completion you will be facing but also find incredible opportunities at the same time.

I personally use a variety of different job boards to help me find roles. Here is a quick list of the job boards I use and recommend:

1. Devremote (Every type of developer job)

2. Web3.career (Web 3 specific)

3. 4dayweek.io (In the name, four days a week jobs)

4. remotefrontendjobs (Frontend only jobs)

5. RubyOnRemote (Ruby jobs)

6. jobsinjs (JavaScript jobs)

All of these job boards are awesome and I love using them.

Quick tip here - I recommend finding the jobs using these job boards, then searching for the company on LinkedIn and contacting the CTO / People in charge of recruitment. This can help you get yourself ahead of everyone else. I do it all the time and it works really well, as very few people do this kind of thing.

Key Job Board Takeaways

• Use niche job boards with a developer focus. They provide much better opportunities and have filters that are aimed at engineers/developers.

• Reach out to people in charge of recruitment via LinkedIn.

Conclusion

Utilising the ideas in this article has helped me land many interviews and job offers from remote-first tech companies over the last four years. I would recommend them to anybody who is serious about getting a remote developer position.

Don't get me wrong, getting a remote developer job can be challenging. But given the way the world is heading and the eagerness of companies to cut costs where possible, remote work is here to stay. That is welcome news for us developers who now have more opportunities than ever to build a flexible and awesome life.

If you are a programmer, then this is something you should do for yourself. Programmers need to deal with all sorts of problems almost every day.

Most importantly, solving problems in an efficient manner can make you much more productive. And solving challenging problems helps us do that.

You can watch this complete video on YouTube as well if you like 🎥

Why Should You Develop Your Problem-Solving Skills?

These days, technology is developing rapidly, and we are seeing some amazing changes and improvements almost every day.

Whenever we talk about technology, a buzzword appears in our mind – and that is coding or programming. Now, coding/programming isn't just about solving different kinds of problems using different programming languages, but it's a large part of what you'll do as a developer.

The fields of Web development, Machine Learning, Artificial Intelligence, Augmented Reality, App Development, and many others require strong problem-solving skills.

There are many popular websites that help you do that by providing various types of problems where you need to apply your analytical and mathematical skills to solve each problem using programming languages.

I am going to provide you with a list of coding challenge websites that will help you become more advanced day by day.

Keep in mind that these websites are useful for everybody, whether you are new to coding challenges or you are a professional programmer and so on.

Contents

1. beecrowd
2. HackerRank
3. Codeforces
4. LeetCode
5. Kaggle
6. CodeChef
7. AtCoder
8. Topcoder
9. Coderbyte
10. Project Euler
11. Codewars
12. SPOJ
13. CodinGame
14. GeeksforGeeks
15. Toph
16. LightOJ
17. Exercism
18. Online Judge
19. HackerEarth
20. Code Jam - Google's Coding Competitions
21. ICPC

Best Coding Challenge Websites

1. beecrowd (Formerly URI)

beecrowd is perfect for those who have just started solving coding challenges and are looking for a beginner-friendly website. It used to be named URI, so there is a chance that you are already familiar with this site as URI.

If you want to solve problems in a specific category, then you're in luck as this website also offers that.

Here is an image of a Strings problem set. You can also filter the problems by the ID (#), name (NAME), Subject (SUBJECT), solved (SOLVED), and so on. Beginners like these features very much.

On this website, you can also take part in different programming contests, and check your global ranking, country-wide ranking, and university-wide ranking.

Also, you can check your progress, how many days have passed after signing up, how many problems you have solved, how many points you have got, and more.

You will also get a nice profile page that looks beautiful as well. 😊 I used to practice solving problems on this website when I was just starting out my CP (Competitive Programming) journey. Not to mention, I got the 3rd position among 1250 students back then at my university. 🎉

You can also check out my beecrowd profile here.

2. HackerRank

HackerRank is one of the most popular coding practice websites out there. This is a nice platform for everyone, especially beginners.

The website looks nice and polished, and the users who come here the first time don't struggle when navigating throughout the website, so that is definitely a positive thing here.

HackerRank offers different portals for companies and developers. If you are learning to solve problems, then you will choose the For Developers section.

If you want to learn any specific topics or programming languages, then this website is the perfect place to get started in that. You can prepare yourself by topics. You can also take their certification exam and stand out from the crowd. I have already passed their Python (Basic) certification exam.

You can also choose preparation kits from there, and prepare yourself before your interview if you want. Moreover, you can take part in programming contests.

Here, you will also get a nice personal profile page. You can check out my profile from HackerRank here.

3. Codeforces

Codeforces is one of the most used and well-known coding challenge and practice websites in the world, and it is sponsored by Telegram. Especially if you know about CP (Competitive Programming), then there is a high chance you have heard a lot about this website.

Although the website might look a little bit different to newcomers, you won't need much time to get used to it. You can train yourself by solving problems of different categories, difficulty levels, and so on.

Competitive programmers have ranks based on their successful results in programming contests. If you have heard about the RED coder / PURPLE coder, etc, then it is definitely from Codeforces.

You can get the idea of the ranking system on Codeforces from the image above. For more details, you can check out this blog entry.

Codeforces arranges contests regularly each week, and they are categorized into div 1, div 2, div 3 and div 4. They also arrange global round and educational round contests. You can get the timeline of the contests directly from here.

Codeforces also provides a nice user profile on their website. You can check mine here as well.

4. LeetCode

If you are familiar with the FAANG (Facebook, Apple, Amazon, Netflix, Google) buzzword, then you should definitely know about this website! If you want to practice for your coding interview for the big giant tech companies like FAANG, then they all do leetcoding.

You might think that I have made a typo in the above paragraph. No, I didn't. LeetCode has become this popular among people who target FAANG and those who are working on their problem solving skills. Taking part in contests on LeetCode has become common, and people call it leetcoding!

Here, you can solve a lot of problems, and filter the problems by the lists, difficulty levels, status, and tags.

You can also choose problems regarding Arrays, Strings, Hash Tables, Dynamic Programming, and many other categories.

As I mentioned above, you can also take part in programming contests. The only thing that makes LeetCode different is that it is based on Algorithm practice. Yeah, LeetCode is not like any other coding website, because it focuses on algorithm practice alone.

You do not need to provide the full code for solving a problem here, you just need to crack the solution by providing a valid algorithm using any popular language that can solve the problem.

You also get to see how your code performs among others, how much space and time it takes, and so on.

Most importantly, LeetCode has an amazing discussion group where people talk about their problems, solutions, how to improve their algorithms, how to improve the efficiency of their code, and so on. This is one of the most powerful features of LeetCode.

One sad part about LeetCode is that you will not get every feature for free! Yeah, it's true. You have to pay for it monthly or yearly to unlock all its features. There are a lot of problems you will find locked on the website. You can not unlock them if you do not purchase the premium plan.

If you are just starting your algorithm journey on LeetCode, then actually you don't need to worry about their premium plans as the free version will be more than enough for you.

Later, if you want to become more serious, then paying for their premium subscription will be a big deal actually as you'll get a ton more features. This is very much helpful, and includes things like top interview questions, top FAANG questions, video explanations, and more.

You also get a nice profile page on LeetCode. You can check out mine here.

5. Kaggle

I was pretty confused before writing this section, as Kaggle is not a typical website for coding practice. This website is basically for Data Science, and it's one of the most popular websites out there for this.

Kaggle is an online community platform for data scientists and machine learning enthusiasts.

It is a popular crowd-sourced platform to attract, nurture, train, and challenge Data Science and Machine Learning enthusiasts from all around the world to come together and solve numerous Data Science, Predictive Analytics, and Machine Learning problems.

So if you are interested in Data Science, then you should check this website. Here you can check others' notebooks, submit your notebook, join in the contests, improve datasets, and so on.

Kaggle allows users to collaborate with other users, find and publish datasets, use GPU integrated notebooks, and compete with other data scientists to solve data science challenges.

Also, if you are interested in data science, but don't know where to start, then don't worry! Kaggle has got you covered. You can check their learning section where they have many free courses which will teach you a lot of stuff from the beginning.

✨ BONUS: If you want to learn more then I'd suggest that you complete the data science playlist from freeCodeCamp's YouTube channel.

Kaggle also provides rankings and a nice user profile. You can check out my profile here.

6. CodeChef

CodeChef is another popular Indian website like HackerRank where you can solve a lot of problems, take part in contests, and so on.

You can filter the problems based on different categories and solve them using any of the most popular programming languages.

They also have a learning section on their website where you can learn how to solve problems in a systematic way. This is super helpful, especially for beginners.

In their learning section, you can choose self-learning, mentored learning, and doubt support. Some of them are free of charge, but in some courses, you have to pay before you can start them.

This website also provides user ranking including the global ranking and country-wide ranking. They also provide a user profile on their website. You can check out mine here although I am not active on most of the websites right now. 😅

7. AtCoder

AtCoder is a programming contest website based in Japan. Makoto Soejima (rng_58) who is one of the former admins and problem writers from Topcoder is a founding member of AtCoder.

On this website, you can take part in different programming contests. They held regular programming contests on Saturdays and Sundays. Also, you can solve problems from previously held programming contests.

I have seen a lot of people regularly participate in the programming contests and solve problems previously used in the contests regularly by solving problems on AtCoder. I also tried that for a while to check the efficiency, and truth to be told, it was really effective.

Here you can also check the global ranking. Here you will also get your own profile page where you and others can see your global ranking and so on.

8. Topcoder

Topcoder (formerly TopCoder) is a crowdsourcing company with an open global community of designers, developers, data scientists, and competitive programmers. Topcoder pays community members for their work on the projects and sells community services to corporate, mid-size, and small-business clients.

Here you can earn, learn, and do a lot more in their MVP program. For earning, you can participate in five different tracks, become a copilot, become a reviewer, and also get a freelance contract gig through Topcoder Gig Work.

Personally, I feel this website is a little bit overwhelming for beginners. You can get more details in the YouTube videos I have made for you.

9. Coderbyte

Coderbyte has a huge collection of problems that you can solve. They also offer a challenging library, starter courses, interview kits, career resources and so on.

To get all the features, you need to buy a subscription plan from them. I personally liked their interview kit a lot.

Here you will also get a personal profile page.

10. Project Euler

Project Euler is a series of challenging mathematical/computer programming problems that will require more than just mathematical insights to solve.

Project Euler is a great website for solving mathematical challenging problems. But solving a problem on this website requires more than just simple mathematical knowledge.

If you want to solve mathematical problems in a more analytical way, then this website will come in handy.

11. Codewars

Codewars is a coding challenge website for people of all programming levels. It claims to have a community of over 3 million developers.

One of the biggest benefits of this website is that it is highly focused on algorithms like LeetCode. Moreover, if your goal is to get very good at writing clean and efficient programs, then this website can be a great asset to you.

In Codewars, you will see Kata and Kyu a lot.

Kyu (or Kyū) indicates the number of degrees away from master level (Dan). This is why they count downward. Once you reach master level, we count upward. Black belts in martial arts are Dan level.

On Codewars, kata are code challenges focused on improving skill and technique. Some train programming fundamentals, while others focus on complex problem solving. Others are puzzles meant to test your creative problem solving, while others are based on real world coding scenarios.

If you want to know more about how the ranking system works on Codewars, then simply check their docs here.

On Codewars you will also get a nice profile page like mine. Keep in mind that I haven't solved that much on this website; therefore my profile page would seem empty. 😅

Additionally, I find their leaderboard page quite amusing.

12. SPOJ

SPOJ is a website that contains huge problems for solving. It claims to have 315,000 registered users and over 20,000 problems.

According to GFG,

You can start solving problems with maximum submission and follow or check the submission of good coders here. Once you solved around 50-70 problems and build some confidence, you can participate in different contests.

Their problem set is also quite amusing.

You will also get a nice user profile page here which you can use to showcase your problem solve skills.

13. CodinGame

In CodinGame, you can improve your coding skills with fun exercises in more than 25 programming languages.

It is a good website for intermediate and advanced software engineers to have fun while continuing to keep their skills sharp. Also, the challenges are gamified and the multiplayer access means that users can challenge friends and coworkers.

14. GeeksforGeeks (Popularly known as GFG)

You might wonder why I am including GFG in this article as it only provides algorithms, tutorials, and so on.

Well, that's not all they offer. Yes, GFG is pretty popular for its tutorials, algorithms, and so on, but they also provide a nice problem-solving platform here.

You can also filter the problems as you see fit for yourself.

You will also get your profile page where you can show your progress in problem solving on the GFG website.

15. Toph

Competitive programmers participate in programming contests and solve many problems on this website. This website is kind of special to the Bangladeshi people as the Bangladeshi universities arrange many programming contests through it.

You can solve problems in different categories on this website, and they also offer you a nice profile page. They also provide rankings based on your performance in the programming contests.

If you are a complete beginner in problem solving, then this website can help you a lot in starting your problem solving journey.

16. LightOJ

In LightOJ, you can solve a lot of categorized problems. It is highly based on solving algorithmic problems. Their problems are categorized as below:

• LightOJ Volumes
• Warm-Up
• Advanced Search Techniques
• Database
• Data Structures
• Divide And Conquer
• Dynamic Programming
• Fast Fourier Transform
• Flow/Matching
• Game Theory
• Geometry
• Graph Theory
• Greedy
• Math
• Matrix
• Parsing/Grammar
• Recursion/Branch and Bound
• String

They also provide you with a nice profile page where you can see your activities. It might seem odd, but sometimes I find this website better than LeetCode in some cases. Moreover, everything you do on this website is completely free of cost!

17. Exercism

You can develop your programming fluency in 57 different programming languages with their unique blend of learning, practice and mentoring.

Exercism is completely free of cost, and it's built by people like us. You can also contribute or donate to them to support their amazing service for free.

They also provide a very nice user profile page which also shows everything you have done on their website, starting from publishing to maintaining.

On their tracks page, you will get a list of 57 different programming languages where you can start your practice.

Solving problems on their website seems super fun to me. I really liked the way they manage their website.

18. Online Judge (Commonly known as UVa)

This is one of the oldest websites out there for solving programming-related problems. I still find it to be a very hard website for beginners. The UI and navigation of the website are also very old.

All of the questions come with a PDF here. You need to download the PDF file of the problem if you want to solve problems as they do not offer a direct preview of the questions.

They have a lot of problemsets on their website. I still find a lot of users using this website nowadays. Therefore, I mentioned it here.

19. HackerEarth

HackerEarth is an Indian software company headquartered in San Francisco, US, that provides enterprise software that helps organisations with their technical hiring needs. HackerEarth is used by organizations for technical skill assessment and remote video interviewing.

You can practice your problem solving skills from their practice page. Also, you can participate in programming challenges and hackathons from their challenges page.

Their interview prep section is quite amazing. You can take part in the mock assessments for the Adobe Coding Test, Facebook Coding Test, and Amazon Coding Test.

They also provide a nice user profile for everyone.

20. Code Jam - Google's Coding Competitions

Google Code Jam is an international programming competition hosted and administered by Google. The competition began in 2003. The competition consists of a set of algorithmic problems which must be solved in a fixed amount of time.

If you are interested in taking part in the Code Jam contests, then their archive section is full of amazing resources for you where you can get the earlier questions and practice them.

They also offer a lot of prize money in their contests. An example can be:

Out of thousands of participants, only the top 25 will head to the World Finals to compete for the title of World Champion and cash prizes of up to $15,000. And there will be plenty of other prizes to go around — the top 1,000 competitors will win an exclusive Code Jam 2022 t-shirt.

21. ICPC - International Collegiate Programming Contest

ICPC is one of the most prestigious programming contests in the world.

The International Collegiate Programming Contest, known as the ICPC, is an annual multi-tiered competitive programming competition among the universities of the world.

Who is eligible for ICPC?

ACM/ICPC is a team-based competition with certain requirements to the participants: only post-secondary students and first-year post-graduate students no older than 24 are eligible; each team consists of three members. One can participate in the finals no more than twice and in the regionals no more than five times.

Personal Opinion

If you are a complete beginner, then start with beecrowd. If you want to start problem solving along with learning a specific programming language, then start with HackerRank.

After solving almost 50+ problems on beecrowd or HackerRank, start solving problems on Codeforces. The first time, you won't be able to do that well in the programming contests on Codeforces, and that is completely okay – it is natural. You just need to try regularly. The questions might seem pretty hard to you, but it'll become easier day by day after solving problems continuously.

You can participate in AtCoder the day you start solving problems on Codeforces. You can also try CodeChef, but I find Codeforces is enough in this case.

This will prepare you for the ICPC and Code Jam. Don't forget to solve the earlier questions on Code Jam.

If you want to gain expertise in Data Science, then simply go for Kaggle.

If you want to gain expertise in Algorithms, then LeetCode, and LightOJ are your only places. GeeksforGeeoks will also help you in this aspect.

For LeetCode, get some help from Nick White. His LeetCode Solution playlist has 189 videos as of today, and you will learn a lot from him, trust me!

Another good resource is Neetcode where you can get curated problems and their solutions from LeetCode. The official YouTube channel of Neetcode is also a great channel.

Additional Websites

You might find the websites below useful too!

⭐ StopStalk

This website retrieves your friends' recent submissions from various competitive websites (Such as Codeforces, SPOJ, HackerRank, Timus, and so on) and shows all of them in one place. You can check my StopStalk profile from here.

⭐ CodersRank

This is a platform made to help developers in job-seeking and professional growth. Here, your CodersRank profile serves as a proven track record of your coding knowledge.

You have to connect your private and public repositories here from GitHub to generate your true CodersRank profile. You can also check my CodersRank profile from here.

Conclusion

Thanks for reading the entire article. If it helps you then you can also check out other articles of mine at freeCodeCamp.

If you want to get in touch with me, then you can do so using Twitter, LinkedIn, and GitHub.

You can also SUBSCRIBE to my YouTube channel (Code With FahimFBA) if you want to learn various kinds of programming languages with a lot of practical examples regularly.

If you want to check out my highlights, then you can do so at my Polywork timeline.

You can also visit my website to learn more about me and what I'm working on.

Thanks a bunch!

A popular Chinese proverb says: “The best time to plant a tree was 20 years ago. The second best time is now.”

The same applies to acquiring new tech skills. No matter if you’re a junior developer or a seasoned software engineer, there is always something you can work on and improve.

But how do you choose this “something” that might help you advance your career in the IT industry? With plenty of online courses and new IT skill sets demanded by employers, you can easily get dizzy.

Don't worry – DevSkiller is coming to the rescue with data-backed insights based on the findings from the 2022 edition of our Top IT Skills Report. We’ve arrived at these insights by analyzing thousands of coding tests sent to candidates from 191 countries through our TalentScore tech screening solution by companies recruiting for IT-related positions.

Based on our proprietary data, we’ve compiled a set of useful tips on what to learn. This is based on what job you hope to get in the future.

Choose wisely and remember that the IT industry is waiting not only for seasoned developers but also for greenhorns. As the data from the DevSkiller platform show, around 40% of technical test invitations are for junior developer roles.

If you want to grow together with the market

You've likely heard that “data is the new oil”. But only a handful of the big tech companies have figured out how to extract this "oil" and process it in order to be able to fuel their businesses.

This has brought about the accelerating demand on the job market for data-related roles like data scientists, data analysts, or data engineers.

If the thought of organizing random numbers in a set of structured tables or charts positively tickles your mind, a data-related role might be the right fit for you.

Just keep in mind that the market of data-related positions is not as structured as the dashboards you might be expected to create. As the market develops and gets more mature, you might be expected to learn new skills which we can’t even imagine right now.

Having said that, the reward for this flexibility and eagerness to learn may be huge.

According to the insights from the latest edition of the DevSkiller report, data science tops the ranking of in-demand IT skills of the future. The popularity of recruitment tasks from this area grew in 2021 by 295% on a yearly basis.

If you want to enter the IT job market ASAP

Another big thing as far as in-demand IT skills of the future go is Python. But this demand isn't the only advantage when it comes to your choice of programming language to learn.

The data we compiled for our Top IT Skills Report show that Python – with a 54% ratio of test invites for junior roles – was the most sought-after technology among developers beginning their careers in the IT industry.

Given the fact that Python is relatively easy to learn in comparison to other programming languages, it might be a perfect choice to speed up your entrance to the IT job market. Just remember that the fastest way is not always the most satisfying one.

If you want to work in a big company

Trying to find your place on the job market may be compared to driving a car. Some people like to drive fast and reach their destination quickly, but others prefer to move forward slowly but securely.

If you’re in the latter group, you should consider learning one of the most mature and popular programming languages like Java or SQL. This can help you land a job in one of the large corporations. This may be not as exciting as working for a cool ever-pivoting startup, but it'll provide you with a certain level of stability and security you might find appealing.

As the data compiled from the DevSkiller TalentScore show us, both Java and SQL are in the top of the ranking of IT skills sought after by hiring companies. Each of those languages was seen in 19% of coding test invites sent by tech recruiters via our platform.

It's worth mentioning that there seems to be a shortage of those skills on the market. From the insights in our report, Java and SQL developers wait the longest to complete their coding tests in comparison to specialists with other tech skills.

One of the reasons behind this trend is that the recruitment pool is shallow and companies are competing for the same limited set of candidates.

In 2021, the average time to submit a Java coding test by a recruited candidate amounted to 4 days and 11 hours while in the case of SQL it was 3 days and 6 hours. The industry average for all languages in 2021 was 2 days and 16 hours.

If you want to unleash your creativity

Do you consider yourself to be a creative person who cares not only about how things work but also how they look? If that’s the case, you should consider pursuing a career as a front-end developer.

Maybe you won’t enjoy as much artistic freedom as a graphic designer, but rest assured that if you supplement your bias towards aesthetics with the practical coding skills, you’ll find a job you enjoy.

If that sounds appealing to you, remember that the front-end development is not just about HTML or any single language anymore. You’ll probably need to be able to surf across at least a couple of technologies during any given project.

Through the findings from our report, the 5 most commonly paired IT skills tested by recruiting companies nowadays are JavaScript and HTML, JavaScript and TypeScript, JavaScript and CSS, JavaScript and Angular, and CSS and HTML.

If you don’t want to code (or only a little bit)

Given the rising popularity of low-code/no-code platforms and tools, you no longer have to become a full blown software engineer in order to land a job in the IT.

Sure, in this industry, you will always be expected to possess a certain level of computer literacy and understand the key concepts of software development. But you no longer have to actually code in order to be an attractive candidate for employers.

The rising popularity of low-code/no-code is reflected in the dynamic growth of the number of tests checking the skills related to Salesforce available on DevSkiller TalentScore. Since 2020, it has grown by a whooping 1300% in response to the needs of our customers, that is hiring companies.

And keep in mind that Salesforce is just one of plenty low-code/no-code platforms used by your potential employers.

If you want to help others enter the IT industry

Last but not least, maybe after careful consideration of your skills and preferences, you’ll decide that you’re more of a people person, and solving technical problems on a daily basis is not for you. Or you might be burned out in your current role and would like to try something new.

Don’t worry, the IT industry is not only about 0s and 1s and there are a number of options available for you to land your dream job that don’t require learning coding skills.

One of them is related to helping others find a well-suited job – that is, becoming a tech recruiter.

If this sounds like a good fit, you can start developing in this direction by acquiring the industry-recognized DevSkiller Tech Recruitment Certification. Even though it may not look very difficult at first glance, our data show that only 61% of users pass our certification exam in the first attempt.

The digital skills gap is working to your advantage

As software has been eating the world for quite some time now, the IT industry has become one of the main drivers of job opportunity growth in the global economy.

In the European Union alone the gap between the supply and demand of IT specialist has been estimated at a minimum of 500,000 vacancies. And this doesn't include all of the IT-related roles like tech recruiters and other positions that require at least some level of digital skills.

So if you're hesitant whether your upskilling or reskilling efforts will pay you off, the answer is: yes. The probability that you'll get a raise or move to a better paid job is close to 100%. The worst-case scenario? You'll simply find joy in learning something new.

Coding is fun, after all.

After spending 15+ years developing software, releasing products, managing teams, clients, and expectations, I had a bagful of thoughts to share with the younger generation.

Fortunately, I was able to summarize everything in eight high-level points without making my audience bored with it.

I will share those points in this article to help you better prepare for the upcoming opportunities and challenges. All the points mentioned in the article apply to everyone, irrespective of their current experience in the industry.

Wherever I mention the term "industry" in this article, I mean the "Software Industry" as my experience relates directly to it. Happy reading!

There are Three Types of People in the Industry

We can categorize people working in the software industry into three major groups.

• Following: People who need career guidance and a path defined to accomplish their career goals. They are seeking feedback and validation from people already doing the required things to grow in the industry.
• Doing: This set of people is already doing things needed to grow in the industry. They stay relevant to the latest and greatest things out there. They sharpen their skills periodically and help their followers grow by sharing knowledge and information. There are fewer people in this category than in the Following category.
• Doing + What's Next?: This set of folks are not only doing things but also creating specialities for the future. They cultivate visions of what's next? and work towards it with a lot of passion. Their efforts don't necessarily have to result in some extraordinary output, but they keep trying. Again, fewer people are in this category than we discussed previously in the Doing category.

Please note that these categories don't determine who is senior or junior in the industry or the organization. Instead, these categories exist in all job grades, levels, and work functions.

Also, the exciting thing is that a single person can play their part in all three categories based on situation, skill, and context.

For example, Ms X is doing an excellent in web development technologies, solving problems, and creating tools to help things in the future. She is now starting her blogging journey to share her knowledge widely. She is learning from the technology blogging community by following established bloggers.

So how do we make sure that we constantly build our presence in these categories and move the needle to get into the Doing and Doing+ What's Next phases?

8 Tips to Help You Advance Your Coding Career

Yes, I want to summarize my tips into eight crucial points to focus on. You may be doing some or all of these already or haven't started on them. Either way is fine, and I hope it encourages you to step up further from here.

1. Build Habits

Our habits drive us in our life. We build many of them unknowingly, and we have to build some consciously.

A good habit helps you develop the right attitude towards solving problems, handling challenging situations, and making better decisions. It helps you set rational targets and get close to them. People with good habits are organized, thoughtful, approachable, and have a positive mindset.

So what are some of the good habits? There are plenty, and here are some basic ones.

• Reading
• Writing, taking notes
• Physical exercise
• Setting a schedule
• Getting organized
• Saving money
• Learning

Build habits, good ones. It will set the stage for you to decide between good and bad, short term and long term, dos vs don'ts, and right vs wrong.

But, how do we build good habits? Well, I can write a few articles on this topic alone, but I'll emphasize these points for now:

• Find a habit and a reason why you want to build it. What's the end goal?
• Find a trigger for it. A trigger motivates you to start and pushes you to stay on it. For example, listening to music could trigger starting physical exercise.
• Plan for it knowing your limitations and all the chances you have of failing.
• If you failed to sustain the habit, think about what went wrong. Do you need it? Readjust, replan and start again.

2. Find Your Passion

Your passion keeps you going and helps you live a motivated professional and personal life. Passion is an "individual" thing that may impact many people in your circles. You can be passionate about technology, health, writing – anything that you love to do constantly.

However, one piece of advice I got early in my career was, "don't follow your passion blindly". The passion should be linked with your goals, career, and work. It is essential to find the difference between a hobby and a passion. You may have a hobby unrelated to your career, but your passion should relate to it.

It is essential to identify your passion, fuel it with a lot of practice, and renew it from time to time.

3. Connect with People

Social networking for developers and the developer communities are influential in building your career. You get to meet like-minded people, find role models, get opportunities to collaborate, learn, and find jobs.

Whether you are a student, a fresher, or a veteran professional, social networking for developers is undoubtedly a great option to consider. The platforms like Twitter, LinkedIn, Showwcase, and Polywork are great ones to check out. You can connect with people of interest, learn from them, and contribute.

Learning and sharing is a wonderful cycle that builds knowledge. It grows when we come out of silos and learn in public. Also, learning from the experience of others will accelerate our growth. So, connect.

4. Stay Curious

Curiosity is the desire to learn something new. Stay curious and be open to learning. Curiosity brings questions and doubts to mind. The fun is in finding the answers.

So, please ask questions when you have doubts, don't be shy thinking about whether it is a silly question, what people will think, and so on.

Staying curious will help you find how things work under the hood. There are many benefits of knowing the internals of things when it comes to programming. So, stay curious, and keep exploring.

5. Develop Side Hustles

Here comes my favourite point, Side Hustles. When you build a habit of doing things, fuel your passion directed towards the career goal, look to learn new things, and connect with people, you have an ocean of opportunities for side hustles.

But wait, what are side hustles, and why are they needed? Don't we have enough things to do already? Yes, very practical questions. Let's get to them one by one.

Side hustles are anything you do outside of your regular job to earn knowledge, reputation, money, and growth. There are various form of side hustles like,

• Contributing to the open-source projects
• Writing articles on a blog
• Mentoring
• Teaching
• Freelancing
• Community Building
• Releasing books, e-books
• Speaking at conferences
• Creating video content...and many more

Now all these need time, and of course, you might have something called a "primary" job to take care of. However, most of the above don't need a massive amount of time or dedication. Also, all of these can be the by-product of your "primary" job.

Let's take a few examples:

• Have you solved a technical problem at work? Write about it as an article. Create a video explaining the steps and upload it on YouTube. Share about it on StackOverflow, the Showwcase community, Twitter, and LinkedIn.
• Do you have expertise in specific areas and have taken many notes on problem-solving? Move them to a doc and release them as an e-book. Don't worry about who will make use of them. There is always a great demand for quality content.
• Do you love to teach? Spend 1 hour over weekends interacting with people interested in your areas of expertise. Speak about the topic at a conference.

It is the right thing to do if you can manage side hustles without burnout. I have captured some of my personal experience doing side projects as a developer here.

6. Don't Neglect Soft Skills

Soft skills are all about how humans interact with other human beings at work, in personal life, anywhere in the world, and in any possible modes (physically, remotely, virtually). Unlike technical skills, soft skills are less about learning and more about realizing.

Here are a few soft skills that need special attention,

• Patience
• Empathy
• Problem solving
• Communication (not just the spoken or written language – it includes body language, confidence, resolving conflicts, and more)
• Teamwork
• Owning up to your mistakes or accountability
• Time management - we will talk about it in a while.

Some classes and courses teach you many of these soft skills. But you need to work on closing the gap yoursef and improve upon these skills gradually.

7. Manage Your Time

Let me start with a confession. I'm still learning how to manage time, but the good news is that I'm getting better at it.

Each of us has 24 hours in a day. So we need to manage all our activities in that duration. However, the problem comes with too many things to fit in that duration.

Here are some practices (principles too) I've been following and seeing good results.

• Everything is not crucial to us every day. The tricky part is that we assume that something is essential until we give enough thought to it.
• So, we need to think and prioritize. It also includes regular activities like sleeping, exercise, eating food on time, health, family care, and so on.
• Do not focus on things that are of lower priority priority or can wait for the next day or week.
• Do not multi-task. It only increases stress and reduces productivity in the long run. Take up a task, focus on it in a time-boxed manner, complete it, and then get to the next one.
• Take breaks between task switches. Rejuvenate and energize yourself.
• If something is taking more time than anticipated, accept that it happens. You may not meet your time management plan every day.

I hope these pointers help you with enough thought processes to start managing time better.

8. Find a Mentor

Do yourself a favour. Find a good mentor. Learning from someone's knowledge and experience is immensely beneficial. So let's understand who a mentor can be, what their role is, and how we can benefit as mentees.

A mentor is a person who provides guidance and advice to you to make your aspirations a reality. It could be for career-building, learning a new area, understanding the business processes, and many more.

A mentor may help share experiences and resources, provide motivation, and set and track individual and project goals. A mentor can also be a teacher, but in most cases, teaching focuses on "how," and mentoring focuses on "why".

A mentee is a person who is being mentored, guided, and advised by a mentor. A mentee approaches a mentor with aspirations, ambition, and desire. The mentor guides the mentee to help them achieve their goals.

The mentee drives it to success with the mentor's help in a mentoring program. The mentee decides how much help and guidance they need to achieve the mentorship goal.

A mentor and mentee relationship should be beyond just the technology and project knowledge sharing. It is also about understanding each other's emotional space to achieve the mentoring goals.

Now the most crucial part is finding a good mentor. Several platforms offer mentorship. There are some great mentors creating values for many aspiring people. You can always try your luck and find the best connection. I feel it is more authentic if you find someone from your network or community circle whom you know personally. That may even work out much better.

In Summary

To summarize, focus on these points with all the pointers we have discussed in this article:

• Build good habits.
• Find your passion carefully.
• Connect with like-minded people and build your network.
• Stay curious, and keep learning.
• Use side hustles to grow.
• Soft skills are essential.
• Learn to manage your time.
• Find a mentor.

Before We End...

I hope you found this article insightful and that it helps you to prepare better in your career. If you want to discuss further or just want to have a career chat, you can ping me with a DM on Twitter or LinkedIn.

Let's connect. I share my learnings on JavaScript, Web Development, Career, and Blogging on these platforms as well:

• Subscribe to my YouTube Channel
• Follow me on Twitter
• Side projects on GitHub
• Connect on LinkedIn

See you soon with my next article. Until then, please take care of yourself, and stay happy.

And as a developer, working on projects can improve not only your skills but also your résumé – which can increase your chances of getting that dream job.

Have you ever come across a job description that requires candidates to have a certain numbers of years of experience? I have – actually almost every job advert that I come across. These job descriptions can lower your self-esteem and make you feel underqualified, especially if you're a fresh graduate or just learning to code.

So, what happens when you don't have any work experience in the tech industry and you want to apply for a job? Well, the answer is simple – your portfolio is everything. You just have to use your past projects (and maybe build some new ones) to help you stand out.

In this guide, we will go through how to use experience from your projects to help you with your job applications. Our focus will be on some of the major Python projects that can help boost your résumé in a job environment.

Why Build Projects in Python?

You can use Python in many ways, including software and web development, machine learning, data analytics, and more. Knowing Python is a valuable skill for a coder. But if you're new to coding, it can be difficult to demonstrate your expertise on a résumé when you are applying for jobs.

Completing Python projects that you can clearly describe and that a hiring manager can look at is a great way to showcase your skills

If you aren’t sure how to write a résumé or your résumé needs a complete revamp, there are multiple resources online to help you out:

• Here's a handy resume template where you can easily input your details and add your Python projects as you complete them
• Here's a guide on How to Write a Résumé – Practical Guide with Example Résumé

Now, here are some ideas for Python projects that you can showcase on your résumé.

Python Project Ideas

1. Server Status Checker

A server status checker is a script that will let you monitor if your server is active and running. It can show you how much downtime your server has had and give you regular updates of its performance. It'll also send immediate alerts when server is down.

Some of the tools that come in handy when developing such a script include:

• Socket - helps with connection to different servers.
• SSL - required for wrapping the socket connection.
• Date & Time - Check what time server is active or went down.
• smtplib - Send email alerts when the server is down.
• Pickle - Saves the history of the server perfomance.

To give you an idea how to get started with such a project, here's some info to get you started.

2. URL Shortener

A URL shortener is a program that takes long URLs and converts them into shorter ones that users can easily remember. Some of the the most common sites offering such services include Bit.ly and Cuttly.

This is a functional, useful tool that a hiring manager can easily test out in order to verify your Python skills such as use of APIs.

Although there are many such tools out there already, you can build one that offers a specific feature like customizable short URLs.

Almost everyone has come across a long, clunky URL that isn’t user-friendly or easy to remember, so creating a URL shortener shows that you can identify common problems and engineer a solution.

To help you get started with the idea and concept check out this repo here.

3. Content Aggregator

This is a tool that gathers information such as articles, social media posts, videos, images and so on. Then it displays all that information under one page. This means that users don’t have to manually search each website for what they are looking for.

Creating one is another good way to showcase how you can use your Python expertise to create a useful tool. Content aggregators can be used for many purposes, but they essentially search large swaths of the internet to find specific pieces of information.

You could develop a general content aggregator or a more specialized one. For example, you might create a weather aggregator that pulls weather data from several of the top sources in your region to present a comprehensive weather report.

Working on a project like this you should be comforatble with concepts like:

• Python Basics
• How to make use of virtual environments
• Django fundamentals
• Basics of HTML, CSS and JS

4. Desktop Assistant

When speaking about an assistant, think about Alexa, Siri and Google's virtual assistant. Lately there have been a rise in development of smart assistants, take a look at your favorite website chances are very high it has a bot that answers common question asked regularly.

Some common tasks that can be handled in your local machine with the help of an assistant include:

• Open and close any application on your system.
• Search anything on Google, Youtube, Wikipedia and so on
• Get weather updates for any location asked.
• Tell current time & date
• Give calendar reminders on upcoming events.
• Send email through voice commands.
• Play or Stop music in our system.
• Solve any algebraic and mathematical problems.
• Restart, Sleep or Shut Down the system.

In order to build a desktop assistant, you might need some modules to help out. Some of the key ones include: Pyttsx3, Speech Recognition, Twilio, Subprocesses, Wikipedia, and a web browser.

A desktop assistant can perform a single task or a variety of tasks, depending on the complexity of your coding. The more advanced your assistant is, the more impressive it will be to potential employers.

Speaking from experience, this can be a really amazing project to work on. Although I wasn't able to explore more functionalities, check out my idea for a Desktop Assistant and implement more by adding your own ideas for features.

5. Task Automator

A task automator can be similar to a desktop assistant. But it can also be more specialized for specific tasks. To give an idea of how developers utilize Pytho,n here are some of the most common automations:

• Performing automated market tasks
• Sending out, replying to, and sorting emails
• Filling out PDFs and Excel files
• Converting images, renaming files
• Performing math equations
• Calculating exchange rates

You can use Python to do alot of more tasks, too – just think of the tasks you do on daily basis, not only on your computer but at home too. You just have to figure out the correct tools you’ll need, and how to write and run the script.

When we talk of tools, since Python is an open-source language, it means we have a ton of tools at our disposal, as well as many libraries and frameworks to help us get started. Some great tools that can help you out include:

• Selenium
• Beautiful Soup
• SMTPlib

A good resource to help out in the automation journey is the amazing book on how to Automate the Boring Stuff with Python. It is a practical guide on how to use various programming tools.

Again, the more unique and advanced your task automator is, the more impressive it will be.

6. Games or Apps

Python has many libraries available to help you build games, as well as cross-platform libraries for creating Android and iOS apps. Some of the common game library include Pygame, Pyglet, Panda3D, Pykyra, Ursina Engine, and many more.

Both games and apps can range from very simple to highly sophisticated, and creating either one can be a great way to display your personality, creativity, and Python skills.

If you want to be able to develop projects on this scope, you will need to make use of some Python modules and libraries. The most common ones include:

• Kivy - It is the most evaluated module for developing mobile applications using Python.
• Game development modules like Pygame, PyKyra, Pyglet, PyOpenGL and others.

Some skills you will be able to demonstrate after building this project include: mobile app programming and development, UI/UX, & API

To help you get started with this idea, here is a link to some of the most common games developed with python: Python Games.

7. Algorithmic Trader

Algorithmic or Algo traders can not only showcase your Python skills, but they can also make you money - if you write a good script, that is.

This is a more advanced project that will likely not be suitable for beginner coders. You’ll need to write a script that analyzes past and present stock values, and uses machine learning to predict future values.

Then, your trader will automatically buy or sell shares based on those predictions.

In order to work on such a project, getting comfortable with Python and some of it's major topics like Data Structures and Object-Oriented Programming will be necessity. Also knowing how to use external libraries like Pandas, NumPy, and SciPy will be helpful.

To help you get started with this knowledge, check out this course, Algorithmic Trading Using Python (and it includes some sample repos as well.

8. Sudoku Solver

A sudoku solver is another project that’s easy for a hiring manager to see and test. While of course the intent of sudoku puzzles is for users to solve them with brainpower, an automated sudoku solver demonstrates your thorough command of Python.

To work on this particular kind of project, being comfortable working with Python algorithms is really essential. These include:

• list comprehension
• recursion
• indexing and how to make use of loops.

9. File Manager

Another good project idea is to code a file manager that renames or organizes files, archives unused files, or otherwise automates tedious file management tasks.

This type of project is fairly easy, and it can be a good way to get started in Python.

Working with files and documents can vary with different projects, so you can build different scripts, like:

• A script to Auto Move Files,
• A script that will enable you to get folder/file sizes,
• A script to Delete duplicate files

To develop this kind of project, here are some of the modules you should know and keep in mind:

• Tkinter
• Shutil
• Os
• easygui
• Filedialog
• Imageio

So there are some ideas to get you started.

Below is a Twitter thread with more projects ideas that you can work on that will help boost your résumé:

How To List Python Projects On Your Résumé

Now that you’ve got some ideas for Python projects to add to your résumé, here’s how to actually list them effectively.

If you are a freelance developer or you are just getting started in the industry, you may find that it’s more effective to use a functional résumé rather than a chronological format.

Functional résumés are more focused on your specific skills and projects rather than your employment history.

To use a functional résumé, replace the work experience section with a projects section. You can break it up further into subsections if you have some professional projects as well as some personal projects.

Give each project a name, list the duration, and include technologies that you used to complete it. Under each entry, use bullet points to describe the project in more detail, outline your specific contributions, and summarize the purpose of the project.

If you have some professional experience as a coder but you also want to list your personal projects, you may wish to stick with a chronological résumé format that lists your work experience at the top, followed by your education, skills, and certifications.

Then, you can include a projects section later on in your résumé to highlight the Python projects that you’ve done outside of work.

You can also reinforce your Python expertise by mentioning it in your résumé summary or objective as well as in your skills section.

Here is a sample to show you how to present a résumé if you're a fresh graduate from school:

Wrap Up

It is important to remember that a project will be more successful if it communicates what it is supposed to communicate.

Whenever you work on one give it your all dedication. If you found one of these project ideas interesting, feel free to give it a try and you'll have a nice new addition to your résumé.

I appreciate your time reading. Enjoy Coding ❤.

There is no better time than now to find a remote job and to work from home.

There are plenty of roles that can be done remotely, especially in the technology sector.

From product design and product management, to graphic design, marketing, sales and web development – web development jobs are one of the most popular and highly sought after roles.

In this article you'll see some of the ways you can find a remote developer role, when you're still early in your career.

We'll first go over how this shift towards remote work has occured in the last few years, as well as some of the pros and cons of working remotely.

Then, we'll see some strategies to help you land a remote developer role and some ways to stand out to future employers.

If you only want to just see some of the most popular remote job boards, skip to this part.

The Shift Towards Remote Work

The Covid-19 pandemic took the world by surprise in the beginning of 2020.

As everything started to shut down, a lot of workers were required and encouraged to work from home, making many companies remote overnight.

It's safe to say that the pandemic completely changed working life. What initially was a forced pivot is turning out to be a new world and a new way of working which is likely here to stay.

People's relationship with work has started to change. The view on fixed work spaces and workers needing to gather under the same office roof – something that has been considered the norm since the Industrial Revolution – has started to change.

With electronic means of communication such as e-mail and chat services widely available, along with communication platforms and shared documents, there doesn't seem to be an urgent need for many types of workers to be in the same building anymore.

Many people are now also reconsidering the idea of clocking in and out of work at set, fixed days and hours and becoming more aware of their time and what matters the most to them. After all, some may be more productive during the weekends and get more done on those days, instead of solely during a strict Monday to Friday and 9 - 5 schedule.

The Pros and Cons of Remote Work

The Pros and Cons of remote work are relative to every individual.

But in general, some pros of working remote that benefit both the companies and the people working at the companies, are the following:

• Flexible working schedules and locations typically increase productivity and performance.
• The above point leads to employees having more autonomy and independence which in turn leads to a happier workforce. Employees that feel trusted by their employers and have that level of freedom are more content with their jobs, efficient with their time, and more motivated to get their work done.
• Remote work allows you to travel and work from any part of the globe and become a digital nomad, making your own work schedule. When working in tech specifically, all you need is a good internet connection, a laptop, and good skills.
• With remote work you also place emphasis on producing quality work where you are highly focused on the task for a set amount of time that works for you. In a 9 - 5 job the bulk of the work for the day may be finished before 5 o'clock, but you'll still need to remain at the office and possibly not be as productive as you were during the remaining time.
• Office space is expensive, with companies paying thousands of dollars for office space every year per employee. Remote work would cut those costs, saving significant amounts of money.
• Remote work also means that long commutes to get into office everyday are no longer needed. Commuting often means spending a lot of time stuck in traffic, spending money on gas, or using crowded public transportation systems everyday. People can spend a lot of time can commuting - it's not uncommon for commuters to spend more than two hours each day getting to the office and going back home. This is often a cause of major stress. Not commuting to and from work can save a significant amount of time and money.
• With remote work, there is the opportunity to form distributed teams and hire people from all around the globe. This is more representative of the world as it is. Having people with diverse perspectives and backgrounds, with each having a wealth of different experiences to draw from, would in turn result in creating better products and services.
• With remote work you also get to spend more time with your family and loved ones.
• "With great freedom comes great responsibility" is a phrase that stands true when it comes to remote work. Often remote workers have a greater connection to the company's mission, which leads to greater motivation and sense of purpose. If you are not aligned with the company's values and don't find the work rewarding, it may be tempting to not put in the effort when there is no one watching you like there is in a 9 - 5 traditional office job.

There are also some potential cons of remote working:

• There are concerns around productivity. For example, a lack of a dedicated space and set up in your home where you can work comfortably and quietly could potentially lead to a decrease in productivity.
• A lack of a good Wifi connection, Internt speed, and decent voice quality could lead to troubles in communication. When a connection is not consistent and there are frequent disconnections, it makes communicating with team members difficult. Similarly, having poor voice quality, a microphone that doesn't work properly, or a lot of background noise can be distraction for others and make communicating over meetings harder.
• With remote work, some workers may be more prone than others to procrastination, getting easily distracted and managing their time efficiently. A good answer to that could be the Pomodoro Technique and time blocking tasks.
• Remote working may prove challenging for workers that have family members to frequently tend to and who need their attention.
• With remote work, work-life balance can be tricky at times. For this reason, some workers may enjoy the commute, the travelling to work and the removal from their home as they see it as a physical separation between work and social life. It can be a way to divide work from personal life and whatever issues are associated with that.
• Another potential issue is the difficulty in making connections and networking. This can be a challenge especially for juniors and folks that are early in their careers, and not so much for senior staff members who have developed their network over the years. Offices can be a good place for networking, but there are plenty of online communities available now, with new ones being created frequently, that can help you form connections in the industry.
• Differences in communication skills between team members can also be challenging. Communicating your thoughts in a clear and concice manner is sometimes tricky over email or a Zoom call. It can also be tough to break down problems, explain your thought process, and explain complex technical topics in simple words to technical and non-technical members of a team. And all this is necessary when working remotely. Remote work involves a lot of collaboration, so getting messages across clearly is vital, otherwise there will be frequent misunderstandings.

How to Appeal to Remote Companies as a Developer

Not all jobs can be done remotely.

It's no surprise that tech companies are paving the way and leading this shift towards remote work.

That being said, these tech roles are highly skilled - they are what are known as "knowledge jobs".

Most companies ask for a couple of years of experience, but how do you get that experience when you have none and no one will hire you because you lack that vital experience?

It's like a chicken and egg problem, and this can be even more of a problem when applying for a remote position.

How do you showcase your skills in an affective way when you are still early on in your career?

Companies want to know that you have the skills required and that you are capable of doing the job.

Not only that, but getting a remote role involves a lot more competition. The talent pool for selecting candidates is larger than ever, compared to what it typically is for traditional office jobs.

There are many people applying from all over the world just for one single position, since there are a lot of people wanting to work remotely and have that flexible schedule.

Listed below are some of the things you can do that may help you stand out in your remote job search as an early career developer.

There is the aspect of luck that plays role in every job search, but these points can help showcase your skills to prospective employers when you don't have that much experience.

Prep your GitHub Account for the Job

Include projects that you are proud of and are the most excited about.

Also, by showcasing projects that are related to the position you are applying to, you can discuss the different challenges you faced, the problems that arose, how you went about solving those problems and what you learned overall.

Make sure that your projects are well documented by creating README files for each one.

This way you can document your thought process and intentions while also showcasing your written communication skills which are important when working in tech.

Contribute to Open Source

Contributing to Open Source can be intimidating as a beginner, but it is worthwhile and does make a difference when applying to jobs. It's something that many employers appreciate.

You can start off by making small contributions. For example, you can correct grammar errors and typos and create sufficient documentation for projects that lack it.

This shows that you are able to communicate well and collaborate with other developers remotely and asynchronously to solve a problem. And all that is done in public.

A good place to start contributing is by checking out the freeCodeCamp repository for issues with the label "fist timers only".

Below are some resources to help you learn more about contributing to Open Source:

• The Ultimate Guide to Open Source
• The Definitive Guide to Contributing to Open Source
• How to Contribute to Open Source Projects – A Beginner's Guide

Create a Personal Website

A personal website is your own personal corner on the Internet and a way to show the world – including potential employers – who you are on a more personal level.

Include some information about yourself and the projects you are most proud of. Make sure all links are working and there are no typos.

The important information that employers are looking for needs to stand out clearly and easily at first sight.

Include an up to date CV/résumé and a way to contact you - preferably a professional e-mail address.

Below are some resources to help you with creating a portfolio website:

• Create a Portfolio Website Using HTML, CSS, JavaScript, and Bootstrap 5
• Build Your Own Developer Portfolio Website with HTML, CSS, and JavaScript
• Create a Portfolio Website – A Beginner Developer's Guide

Learn in Public

Learning in public and getting involved with the developer community can accelarate your career and help you make valuable connections.

It's a way to showcase that you have those communication skills that employers are looking for.

Whether it be blogging, writing about your coding journey, documenting what you are currently learning, or giving a talk at a local meetup, all help create your own sort of personal brand. People get an insight into who you are on a more personal level.

Including links of all the ways in which you are learning in public and engaging with the community shows a level of dedication and that you're serious about getting into tech.

You can share your findings, explain how you solved a specific problem in a blog post, or craft lists of helpful resources to share. These activities not only help you understand everything better, but will help others that are also learning.

Below are some resources to help you get started with technical writing:

• Writing Tips for Software Developers – How to Become a Better Tech Writer
• Technical Writing for Beginners – An A-Z Guide to Tech Blogging Basics
• How to Become a Technical Writer

Gain Experience Working Remotely

Having prior experience working remotely will likely increase your chances of getting another remote job, compared to someone who doesn't have that experience and know-how.

It shows that you are productive in remote settings.

Even if you are working in a different field and are not a remote worker, but want to transition into a remote tech role, you can negotiate a hybrid role at your current company. You might be able to work remotely 1 - 2 days a week, and the rest of the week to work from the office.

Gain Experience Working as a Developer

If you want to get a remote developer job as your first tech job, it may be more difficult than getting an traditional office job. Getting your foot in the door as a junior is hard enough, without the remote aspect.

Although this is in no way impossible to achieve, it may be more realistic to have a couple of years of experience under your belt. This can make the possibility of working remotely more likely.

It's easier for intermediate and senior level developers to land a remote role, compared to those searching for their first job in tech.

Onboarding a junior member on the team remotely and training them can prove to be challenging. This is especially true when you don't have much direct supervision and mentorship and they end up spending a lot of time alone.

Focus on learning the skills needed and building them to the point where you can market yourself well and stand out from the crowd. The more well-developed your skills are, the higher the chances.

Show Genuine Interest in the Remote Company you're Applying to

Taking the extra time and putting in that extra effort to craft a high-quality application will help you stand out. Make sure your application is tailored towards the company you're applying to and lay out what you have to offer and why you're the right fit.

Hiring managers can tell when you've copied and pasted your application to several other positions and when it's not tailored to that individual company.

So make sure you customize your application for the position and show that you've researched the company's website and/or blog to understand what they are doing and what their mission is. This will make a better impression and make you stand out more.

Where to Find Companies that Hire Remotely?

There are plenty of remote job boards where you can browse through hundreds of job postings and apply to any you see fit.

This section showcases some of the most popular job boards that advertise remote-friendly positions.

To see a complete list of remote-friendly companies, check out this comprehensive GitHub repository

Remote Ok

On Remote Ok you will find different kind of jobs listed, such as product designer, product manager, copywriter and copy editor, to name a few.

The majority of jobs, though, are software development jobs.

The website consists of hundreds of job postings and it's updated daily.

It's easy to use, without needing to sign-up anywhere or upload a CV in order to submit an application.

You can just click on the search bar at the top of the page. When you do so, you'll see a dropdown menu with a filter for the different job categories you can choose from and the number of jobs available in each category.

When you click on a link of a job posting, you'll see the full job description and then a button that says "Apply now".

When you click that button to apply for the job, you'll be redirected to the company's website.

This job board is more of a place to take a look at the different remote jobs that are available in the world. It's not meant for creating a profile of your own or submitting an application directly from the job board.

It's also one of the most impersonal job boards out there, since there is no information or a way to find out more about Remote Ok as a company, or a way to contact customer service.

Remote.co

Remote.co is another remote job board with all kind of jobs listings available. There are editing jobs, customer service and marketing jobs, and many more.

There is also a wide selection of jobs in front-end development, back-end development, and full-stack development.

In the search bar at the top of the page, enter the type of position you're searching for or the name of a company you want to work at.

You can also sign up to their newsletter to receive daily job alerts, but other than that you don't need to sign up anywhere is order to view jobs or apply to jobs.

When you apply for a job, you'll be redirected to the company's website to apply directly from there.

This remote job is more personable compared to Remote Ok, since it has more information about it and different resources available.

There are articles on remote work, remote worker's rights, and even different online courses you can take.

We Work Remotely

On We Work Remotely you'll find lists of jobs in sales, marketing, software development and more.

There are jobs available in front-end development, back-end development, full-stack development, and in DevOps and Systems administration.

You can create an account by providing your email address and setting a password. This way you'll be notified about new job openings and specifically jobs that are tailored to your area of interest.

The site also provides advanced search filters, where you enter the job title, the region where you want to work, and the time zone you're in, as well as the job type you're looking for. From there you can choose either contract work or full-time work.

When you apply for a position you will be redirected to the company's website you're applying to.

Remotive

On Remotive there are a variety of different remote tech roles available.

There are listings for developer roles, customer support, customer service, sales, management, product design, product management, and more.

This job board is also focused on tech and there are filters available where you can view the different job categories available.

A new feature of theirs is the ability to hide the jobs that require applicants to be US-based and work remotely from a US timezone.

You can also use keywords, such as a specific skill or job title, to filter through all the different posts.

It also has a mailing list where you can receive daily job updates.

AngelList

AngelList lists mostly tech startup jobs.

There, you can create your own profile where you'll be able to inlcude your skills and information about yourself.

You can also set your desired salary and the kind of culture you want a company to have.

Then, once your profile is set up you'll be able to apply to jobs directly from AngelList, without being redirected to the company's website.

Companies will be able to connect you with by finding you through your profile and contacting you.

There are advanced search filters, to filter through the different jobs available.

When browsing though jobs on AngelList, you can also view the salary and stock options of jobs.

Stack Overflow

Stack Overflow Remote Developer Jobs lists only developer roles that are done remotely.

It includes an advanced filter that helps you really tailor your search to best fit your needs and what you are looking for.

Here are some examples of what is available with the advanced filter:

• You can include up to ten tags of technologies you like working with and ten technologies you dislike working with.
• You can include companies you like and companies you want to avoid and exclude from your job search.
• You can include a minimum salary range you're expecting to get.
• You can enter your level of seniority and experience.
• You can select wether you require a visa sponsorship and want to relocate to a different country.
• Also, you can select what job type you're looking for, whether it's contract work, a full time position, or an internship.

You don't need to create a profile. When you apply for a position, you'll be redirected to the company's website.

LinkedIn Jobs

On LinkedIn you get to create your own profile where you include your work history, highlight your skills, and write a headline that summarizes your achievements and past job experiences.

A good way to stand out is to share any articles you've written, and share other interesting and informative content.

LinkedIn is a way to connect directly with companies by reaching out to recruiters.

You can also let recruiters know you are available for hire. Specifially, you can inform them on what kind of postion you're looking for and whether you prefer to work remotely.

This is a feature you can add to your profile but it's private and is only visible to them.

Often if your profile is impressive, recruiters will reach out to you and direct message you.

Here are some resources for you to create a stand-out LinkedIn profile:

• How To Build An Amazing LinkedIn Profile 15+ Proven Tips
• How to Use LinkedIn to Get Your First Developer Job – A Step-by-Step Guide

Conclusion

The work landscape is starting to change and remote work is increasing in popularity and demand.

In this article, you saw some ways to stand out to remote companies as an early career developer.

You also saw some of the most popular job boards that feature remote-friendly companies.

Thanks for reading and good luck with your remote job search!

It's not a big secret that building a developer portfolio can greatly increase your chances of getting hired.

Everyone tells you that. But, they don't always tell you what makes a good one.

You see, many portfolios are generic and rather uninspiring. If your portfolio looks just like everyone else's, then how can you expect it to stand out?

Well, it won't stand out.

But don't worry – I've been there. My first portfolio was bland, uninspiring, and had many of the not-to-do's I talk about in this post.

However, I'm an ex-marketer, turned developer, I know how to make something stand out. I've made ad campaigns that have skyrocketed sales and had people talking. I realized I needed to think like a marketer to make my portfolio stand out.

The good news is that the same principles can be applied to your portfolio to level it up. If you read this guide and implement the tips, you'll raise your portfolio above the sea of other junior developers trying to stand out.

Before we launch into the five tips to level up your portfolio, let's just make sure we are on the same page.

What is a portfolio?

A portfolio is a way for you to showcase who you are, what skills you have, and most importantly the work you've done.

As a developer, your portfolio is going to be in the form of a website. The main goal of this website is to showcase yourself and your work in the best way possible.

It needs to make you stand out and it needs to make employers think "Whoa! I'd like to work with this person". Ultimately it will need to show them that you could be awesome to work with so they are compelled find out more about you.

A portfolio should therefore include some standard elements. Below are the bare minimum elements your portfolio must include.

The bare minimum of a portfolio

These are the non-negotiables of any developer portfolio:

1. Responsive design (learn about how to do that here)
2. Projects showcasing your work
3. An "about me" section or somewhere people reading your site can learn about you
4. Your portfolio needs to be accessible
5. Your portfolio should have a custom domain. Buy a domain name – you can get them for less than $10. Don't send people to 39238834.netfily.com
6. A way for people to contact you, preferably your email

If you have these six non-negotiables on your portfolio, you are off to a good start.

Now let's look at five ways you can level up your portfolio, starting with a non-obvious one.

Five things you can do to level up your developer portfolio

1. Know your target audience

One area that can help level up your portfolio is knowing exactly what the purpose of your portfolio is. That is, who is this portfolio for?

If I asked you what the purpose of your portfolio was, does the output match that? Let's say, for example, the purpose of your portfolio is to land your first junior developer role. Then your portfolio is going to look very different from someone who is looking to be a freelance web developer.

Therefore the first thing you need to do is ask what is the purpose of your portfolio. Start broad and then try to refine it. Keeping with the junior developer role example, you could refine it down to a junior frontend developer specializing in React.

If you are a junior frontend developer, then your portfolio won't need things like the generic skill cards below.

These cards are better suited for someone who is looking for freelance work.

When you know the purpose of your portfolio, you can better tailor the information to communicate why someone should help you achieve your purpose.

2. Level up your project details

This is the most important section of your portfolio, and it is the one section I often see that is not well-executed.

If you browse something like r/webdev and search "portfolio" let me tell you what you're going to see if you click 90% of those portfolios and look at projects. You're going to see a calculator app, a weather app, tic tac toe, a movie finder app, "insert big website" clone, and so on.

Now, don't get me wrong – these are useful projects for learning the skills they require. And people have spent time making them. The problem is that everyone builds the same stuff. You can often just follow along with a tutorial and create them without much thought.

There are two problems here.

The first is that you are not differentiating yourself. If I'm HR or the hiring manager why should I pick your calculator app over the other 30 in the inbox? Also, how can I trust that you built this thing yourself and that you didn't just copy/paste code from a tutorial?

The second is that most people just put the project in, link to the GitHub repo, and maybe a live demo. This doesn't tell the person who is potentially going to hire you a lot, and it doesn't give them much reason to employ you over everyone else who has done the same.

So then, how do you make your projects section stand out? Let's look at a few ways you could level up the projects section of your portfolio.

Add original projects

You don't have to reinvent the wheel or make the next great social media application. But it would be great if you tried to use a different API instead of the standard weather API.

You could for instance create a surf report app that is the same as a weather app but instead you are calling different endpoints. This shows me that you know how to call an API outside of a tutorial.

If you're not sure how to make your own original project then check out this guide on how to plan and build a programming project for beginners.

Give some details about the project

The first problem is that many projects are unoriginal. The second is that most people don't give more than the basic details about the project.

What will make you stand out is giving some details about your project. When I say details, what I mean is give me a story about the project. The best portfolios I see tell me about the project don't just show it to me.

Try answering some of these questions.

• Why did you choose to build this project?
• What challenged you when making this project?
• What did you learn from making this project?
• What learnings have you taken with you into other projects?
• What would you do differently next time?
• Did you get stuck at any point? How did you get unstuck?
• What was your process for completing this project? Did you do wireframes, make a Trello board, or did you just get stuck into it?

If you answer these questions and craft them into a few succinct paragraphs, I will now know a lot more about your abilities as a developer. I can see what interests you, how you overcome challenges, how you learn from those challenges, and what skill level you are.

You're already well on your way to standing out if you follow this tip.

3. Remove Unnecessary Fluff from Your Portfolio

Sometimes the best thing you can do to improve your portfolio is to remove things.

You should remove things that add no value to your target audience and things that reduce your credibility.

Here is a list of things you to remove and why.

1. Step-by-step tutorial projects. These projects hurt your credibility. They are unoriginal, they don't show me what you can do. Rather, they show me that you can copy what someone else does.
2. Projects not related to development or the job you are trying to land. These just aren't relevant to your target audience.
3. If one of your Projects is the portfolio itself. Why get rid of this? The reason is that they are on your portfolio now. They are interacting with the project. So save space for another project.
4. Skill progress bars. While they look cool, they are bad. If you're a junior you probably know 10% JavaScript, would you want to represent that? What the heck does 80% CSS mean? If you remove one thing, please make it these.
5. If your portfolio is a carbon copy of someone else's portfolio – start over. It's not cool for starters. Plus, I want to see what you're capable of doing, not what you're capable of copying. It can come back to hurt you in the long run.

4. Give your about me some personality

There is this song by Paul Kelly called "Every F$*#%) City" and the general idea of the song is that every city is the same. Well, I've seen a lot of portfolio's and a lot of them look the same.

The section that often comes off as the same is the about me section. Let's look at an example below.

"Hi, my name's Jonny Lucky, a Full-Stack Web Developer from Example Town. I love building websites that solve life's unique problems.

I work primarily with MongoDB, Express, React, Node, and GraphQL and have set up countless WordPress and Shopify websites. My previous career was as an IT Consultant, E-commerce Business Owner, and Digital Marketer. I also really enjoy tinkering with CSS.

In my spare time, I play video games and also work out."

Hello Jonny Lucky, or was it Lucy Lovely? I forgot because I'm the HR person and I've read 50 of these portfolios and they are all very similar.

If I were to change your name, town, and tech stack, many of these candidates would just become one.

To be fair, there are some personal touches like the that they "play video games and also workout". But, guess what? A lot of other applicants also enjoy these things.

Can you see the problem, if you have an about me section like the above? You won't stand out and you'll come across as a little stiff.

Your about me needs to be a little bit spicy, it needs to show your personality and experience. Because your personality is different from other people, so your about me section should be too.

Let's have a look at mine to give you an idea of what you should be shooting for. I've gotten a few compliments on it.

"I'm an ex-marketer who loves building things with code.

I first became enthralled with programming in 2015. I was in San Francisco with my brother in law and he was telling me about this thing called Python and how it could automate things. As a person who looks for efficiencies, I was hooked.

I jumped right into Python on my flight back to Australia. Soon, I was automating my own things. I made a bot to book classes at the gym, one to send weekly reports to my boss and I even made one to like my girlfriend's content on Instagram. Unfortunately, that is as far as it went. Shortly after, I got promoted. So, I had less time to learn and I let programming fall by the wayside.

But, then Covid hit and suddenly I had more time without my commute. So, I started learning again. Specifically, I learned web development, as I had things I wanted to build for myself.

After a few months of self-teaching, I knew this was what I wanted to do for my career. So, I signed up for the coder academy Bootcamp and put my heart and soul into it. I was coding every day, late into the night, and on weekends. Until I was ready to be unleashed on production code.

Since the boot camp, I have grown as a developer, working alongside senior developers who have helped me raise my standards for what's expected of any web application.

I'm now seeking a full-time role where I can contribute my skills both in coding and business to help a company achieve their goals."

As you can see my about me section is unique to me. I'd say there isn't another soul on the planet who could write the same about me section without telling some lies.

Now, your about me section doesn't have to be zany, it can be professional. But, and this is a key point...

You need to make it interesting so the person reading it wants to continue reading it.

To make your about me section interesting, you can try things like stories and anecdotes. Try and weave them in with the key points you want to get across.

Another way to think of it is, if you are invited in for an interview would your about me be interesting enough that the person interviewing you would say "hey, I loved that story about X on your portfolio"? If it can do that you're winning because you've opened up more dialogue.

In the end, you're trying to spark interest in the person looking at your portfolio.

Think about it like this. If HR has 50 applications to get through, they are only going to interview 5 of those people.

If your about me section is a bland generic version like the first one, they are likely to just skim through it and onto your next section. If nothing else on your portfolio stands out, then they'll move on to the next application until something does jump out at them. You want to grab their attention and make them shift you to the interview pile.

Since most portfolios are generic, it doesn't take much to stand out. If you have less experience than someone else but their portfolio is generic and yours isn't, I'd argue you are more likely to get picked for an interview.

Why? Because we like to work with people we like, and if you show that you're an interesting unique person, I'd probably like to at least find out more about you.

5. Throw some Sprinkles on it

One of the most important lessons I was taught early on in my coding Bootcamp was that you need the doughnut before the sprinkles.

Looking at this analogy in regards to your portfolio, the doughnut is all the other things I have listed above. You need the baseline requirements of a portfolio like solid projects, an interesting about me section, and responsive design.

The sprinkles should come after you have all the basics. So, if you followed the tips above you have the doughnut. Now, you can start to make your portfolio shine.

Add things that make a prospective employer go wow! You can add amazing animations like Christopher Cherupil, cool transition effects like Philippe Neveu, or dark mode like Jhey Tompkins.

I added a Zelda-themed modal to make sure a prospective employer grabbed my résumé before they left my old portfolio site. I just made sure I had the basics first.

You can also go wild with your ideas, just make sure you execute them. You don't want unpolished sprinkles that could take away from your doughnut's main elements.

Summary

If you read this post and thought, oh man my portfolio is quite generic – don't fret. You now have 5 things you can do to level up your portfolio so that it moves from the "forgotten" pile to the "give this person an interview" pile.

I can frequently be found in portfolio advice threads on Reddit and Twitter trying to offer advice to people trying to break into the industry.

When you're done leveling up your portfolio, and you're looking for some feedback on it, make sure to Tweet it to me with a link to your site.

If you have a portfolio you're proud of or you're looking for feedback on it, follow me on twitter and tweet the link to me so I can look over it and give you some feedback.

If you have an awesome one I might even add it to my portfolios that pop list.

The behavior seems consistent across college graduates, Bootcampers, and self-taught folks. When asking for a résumé review, they almost always get the answer "build more projects".

This is great advice, but you can do more to improve your odds. Better yet, you can do a few important things in parallel.

Here are some of the job-hunting hacks that really helped me, as a self-taught developer, land interviews throughout my career.

Build Your Personal Brand

Difficulty: 3/5

I like to think of us developers as a business of one. At the start of our career, we are a tiny startup that no one has ever heard of. We don't yet have customers (or experiences), and people are reluctant to give us a chance.

However, just like the modern business world, it is getting increasingly harder to be successful and unknown.

Let's look at the example of Shopify, which seems to be more aware of the importance of personal brand within recent years. Their CEO, Tobi Lutke, has become more public recently, hosting AMAs as well as hanging out in social channels like Clubhouse.

As another example, Quincy, the founding teacher behind freeCodeCamp, is also an active personality on Twitter.

Just as founders are responsible for shaping the narrative of their respective companies, we as individual developers need to be aware of our own brand with our tiny business of one.

How can you build your brand?

I have seen a 13 year old with 30k followers on Twitter building 10 projects within a year. We can all look at him in awe and stress about the importance of building your personal brand.

But finding your brand is a discovery process, and here are the things I have seen people successfully do:

• Build projects publicly and tweet about the journey (example)
• Interact and network with other developers on tech Twitter
• Create a YouTube channel and share what you have learned (channel example)
• Live stream yourself programming on Twitch

So many people have made valuable connections and have been offered job positions just by being active on social media. If you are just getting started in your tech career, having your personal brand can help tremendously.

You can use a link-in-bio service like Linktree to tie all your socials together. For developers, using your Twitter or blog is also common. Share it on social media, introduce yourself to recruiters, or link it when asking for referrals.

Having a personal brand is a strong indication of social proof, which leads people to trust you more, resulting in more opportunities.

Share Your Knowledge in a Developer Community

Difficulty: 1/5

Another way to network within the developer community is to contribute meaningfully as an active member.

This is similar to our first point of building your personal brand. But we are no longer solely trying to promote ourselves. Instead, we are genuinely producing good content to educate and help our peers.

The advantage is that this is easier to get started. You don't need to go through the hassle of building your audience as most of the sites will lend you theirs. It is the easiest way to get your voice heard.

How to start writing

Here are some developer-focused publications that I have found:

• dev.to: a blogging platform like Medium, but focused on developers
• daily.dev: a platform that curates other dev news
• freeCodeCamp: my favorite. numero uno.
• hackernoon: another big publication besides fCC
• hashnode: make your own dev blog. You need to build your audience, however.
• slip.so: build a programming course. You need to build own audience, however.

Writing makes your résumé stronger as you can dedicate a section of your résumé to your contributions. It can also kickstart your brand as you are positioning yourself as a domain expert.

Lastly, and perhaps the most important thing, is that it reinforces your own knowledge. By teaching others, you summarize the core concepts in your own words and test your own understanding.

How to start contributing to forums

Contributing and helping other developers on forums like Stack Overflow, Reddit, or the freeCodeCamp forum does not directly make your résumé better.

But, as a developer, you will most likely be working with a small team of other engineers, product managers, and designers. By helping others, you propel your team's success. You can gain valuable communication, debugging, and leadership skills that will be useful throughout your career.

Connect Directly with Recruiters

Difficulty: 1.5/5

This is one of the most underrated hacks. Recruiters are very, very busy people. Way busier than we are as developers.

They are working between 3-40 open positions at any given time, and have to screen thousands of résumés per position. If yours does not stand out, you have to think of other ways to get through the door.

How to connect with recruiters

You can skip the online application hell through cold-emailing, LinkedIn connections, or meeting companies directly to hand-deliver your résumé.

How to send a cold email to a recruiter

For cold-emailing, start by finding out the recruiter's email at x company. There are tutorials for this so I will skip through that.

You will then want to have a short-and-sweet email detailing the positions you want to be considered for, and what makes you stand out (hello personal brand).

Then, politely ask if they are interested in receiving your résumé. Be confident in your email. If they reply, then you know you have a good chance.

How to connect with a recruiter through LinkedIn

For LinkedIn, just send a connection request to recruiters working for x company. Send a short intro "I'm looking for frontend positions" on why you want to connect with them.

However, I have found the third method to be more direct, as you get to connect with recruiters in person.

How to connect with recruiters at career fairs

The third method is to attend career fairs. This is by far my favorite method, and why I started making equia.io.

We organize career fairs where you can deliver your résumé directly to the recruiter, so you can skip through the online application hell. It is 100% free for people from all over the world.

The seats are limited as I have limited bandwidth with my full-time job. However, I encourage you to register so you receive emails for the next available events.

I will talk about connecting with recruiters at in-person events more in the final section.

Contribute to Open Source Projects

Difficulty: 4.5/5

This can be a hard one to get into as a beginner. But it is rewarding, as you develop a sense of community and belonging. Some of the best developers are working on open-source projects that we use every day (like freeCodeCamp).

How to get involved with open source

You can start by finding interesting open source projects on GitHub or other dev communities. You should then look at the open issues, make sure to read the contributor's guideline, and make your first contribution.

Here's a helpful guide that details how you can start contributing.

I am only going to recommend some of the bigger projects here. We all have different interests, so I encourage you to find your own.

• freeCodeCamp: contribute to the curriculum, Chapter, or translate existing articles. I highly recommend that you check their Github out.
• Strapi: I discovered the project a while ago and fell in love with it. It is harder to get started, but the community is welcoming and it is written in Javascript + Node.js, which hopefully you have learned in the freeCodeCamp curriculum. They are building a modern CMS (like WordPress).
• React: We use it everywhere, so why not understand how it works and contribute to the most popular JavaScript framework? If you are interested, I highly recommend you reading this article about how you can make your own framework that works similarly to React

If you ever get stuck, most projects have a community and a public forum where you can ask for help.

Contributing to open-source might be hard to get into, but it strengthens your résumé more than any other project. It demonstrates your ability to contribute to large codebases, collaborate with other engineers, and persist through hard-to-debug issues.

Attend Live Career Fairs and Workshops

Difficulty: 0.5/5

I can't stress the importance of making connections when you are getting started. If we go back to the analogy of us being a business of one, you have to start meeting customers somewhere.

What events to attend as a developer

In the old days, you'd go to in-person meetups, career fairs, and conferences. However, the world has been disrupted by COVID. While I have no doubt these dark stay-at-home times will pass, we have to start looking elsewhere in the meantime.

Attend virtual conferences

Big gatherings are still mostly happening virtually. You can attend developer-focused events like Next Conf and GraphQL conf, hiring-oriented events like GHC, and business-centric events like Startup Grind.

You can meet high-profile speakers and like-minded developers. You can use sites like Eventbrite to discover what's happening.

Attend meetups

Smaller group sessions are the best way to meet new people. While you can always find local meetup groups on meetup.com, I have found that smaller, niche communities have better quality events.

Here are some websites where you can find virtual and local group sessions: Indie Hackers, Elpha (for women in tech), freeCodeCamp study groups.

Go to hiring fairs

I briefly mentioned equia.io, where you can attend live career fairs and deliver your résumé directly to recruiters. We typically organize monthly hiring fairs, with presenters from top tech companies like Calendly, GoodRx, and Facebook.

You can meet the hiring manager directly in a small breakout room, get referrals, and directly deliver your résumé to the recruiter. The seats are limited, but by registering, you will be invited to the next available events.

equia.io, virtual career fairs for developers

Wrapping Up – How Do You Market Yourself?

Let me say it again: as an aspiring developer, you are a business of one. A tiny startup that no one has ever heard of.

Companies are reluctant to give you a chance as you have not yet proven yourself. Named university graduates might benefit from existing internships or a strong alum network. But if you are from a non-traditional background, you have to work with what you have.

Whether it's through building a personal brand, writing for developer communities, networking with recruiters, contributing to open-source projects, or attending live career fairs, if you are persistent with your efforts you will get your first customer (or dev job).

I got my first internship by self-studying for 4 months and dropped out of college to get my first full-time job. I now have been in the industry for a while.

The world needs more builders, but some of the best ones are rejected during the résumé-screening phase due to factors like country of origin, college degree (or lack thereof), and lack of marketable experiences. This is why I am working on organizing live workshops and career fairs, free for everyone around the world.

I highly encourage you to join equia.io, and DM me on Twitter for any feedback you might have. We can work together to give more opportunities to people around the world from non-traditional backgrounds.

But if you want to get a web developer job, you'll need a good portfolio website to showcase your skills and experience.

In this tutorial, I'll discuss some of the main reasons why you should make a portfolio website for yourself. Then, I'll walk you through how to build your own fully responsive portfolio website with HTML, CSS, and JavaScript.

Table of Content

• What is a Developer Portfolio Website?
• Why you should have a Portfolio Website
• Portfolio Project – How to Build Your Own Online Developer Portfolio
• The Project Folder Structure
• The Basic HTML Boilerplate
• The Navbar Section
• How to Style the Navbar
• How to Build the Hero Section
• How to Style the Hero Section
• How to Build the More About Me Section
• How to Build the Skills Section
• How to Style the Skills Section
• How to Build the Projects Section
• How to Style the Project Section
• How to Build the Contact Section
• How to Style the Contact Section
• How to Style the Social Icons
• How to Add the Scroll to Top Button
• The HTML for the Scroll to Top Button
• How to Style the Scroll to Top Icon
• How to Make Your Portfolio Website Responsive
• How to Create the Media Query for Tablets and Mobile Phones (max-width 720px)
• How to Build the Hamburger Menu
• The JavaScript for the Hamburger Menu
• How to Make the Hero Section Responsive
• How to Make the More About Me Section Responsive
• How to Make the Skills Section Responsive
• How to Make the Projects Section Responsive
• How to Make the Contact Form Responsive
• How to Make the Website Responsive on Small Phones
• Conclusion

What is a Developer Portfolio Website?

A developer portfolio website provides relevant information to potential employers about your skills, experience, and projects you've worked on.

You can consider your portfolio website to be your online résumé.

Why you should have a Portfolio Website

1. A Portfolio Website Increases Your Online Presence

As a developer, you need an online presence. You can cultivate this online presence on social media platforms such as Twitter, Facebook, and Instagram. But those are not entirely your own, as the moderators of those platforms have almost full control over your account.

With your own portfolio website, it's live on your own domain online. And people can easily find you when they search for your name on a search engine like Google, provided you put the right things in place when it comes to SEO.

2. A portfolio website is your online résumé

Your portfolio website is like your online résumé. Potential clients and hiring managers can easily find you online and check out your previous projects and skills.

This also means that when anyone wants to give you an opportunity to work for them, and they ask for your previous projects, you just give them one link to your website (your portfolio). It not only has your projects but your skillset and information about your past experience as well.

3. A Portfolio Website Shows Evidence of Expertise in your Field

Having (let alone building you own) portfolio website as a developer sends out a clear message that you're putting your skills into practice and that you know what you are doing.

A portfolio can also help build trust with clients because they have direct evidence of the quality of your work.

Portfolio Project – How to Build Your Own Online Developer Portfolio

You can make a cool portfolio website for yourself with HTML, CSS, and JavaScript. And that’s what we are going to do here.

I already did this some months ago and made it available to everyone as a free product on Gumroad, so I decided to create a tutorial on how I got it done.

This is the live demo of what we will be building.

To follow along with me, you can grab the starter files from Github.

The Project Folder Structure

To avoid confusion, I will be arranging the HTML, CSS, JavaScript, icons, and images of the project in their respective folders.

The HTML file goes in the root folder, and the image, icon, CSS, and JavaScript files will be in their separate subfolders in an asset folder. This is a common practice.

There is also a readme file containing all the tools I used in the project, with their respective links. It's available in the starter files.

The Basic HTML Boilerplate

Everyone has their preferences when coding out a whole project with HTML, CSS, and JavaScript. Some like to define the whole HTML boilerplate first and then the CSS later, but I like to do everything section by section.

So, I will be starting with the navbar section. But it’s good to show what the basic HTML boilerplate looks like first:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!--CSS Styles -->
    <link rel="stylesheet" href="assets/css/styles.css" />

    <!-- Favicons -->
    <link
      rel="apple-touch-icon"
      sizes="180x180"
      href="assets/icons/apple-touch-icon.png"
    />
    <link
      rel="icon"
      type="image/png"
      sizes="32x32"
      href="assets/icons/favicon-32x32.png"
    />

    <!-- Animate CSS CDN -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
    />
    <title>Jane Doe | Web Developer</title>
  </head>

  <body>
    <!-- Navbar -->

    <!-- Hero Section -->

    <!-- More about -->

    <!-- Skills section -->

    <!-- Projects section -->

    <!-- Contact section -->

    <!-- Social accounts - Fixed to the right -->

    <!-- Scroll to top -->

    <!-- Footer section -->

    <!-- Website scripts -->
    <script src="assets/js/app.js"></script>

    <!-- Ion icons scripts -->
    <script
      type="module"
      src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"
    ></script>
    <script
      nomodule
      src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"
    ></script>
  </body>
</html>

I have all the sections in the HTML commented out so you can follow along better. In the boilerplate there are also the CDNs for animate CSS (A CSS animation library), and Ionic icons, the icon library I chose for the project.

I have a favicon made through Favicon IO and linked it in the head section. Favicon is the little image that shows on a browser tab.

The Navbar Section

The Navbar section contains the simple logo of h1 text, and the nav menu:

 <nav>
      <h1>JANE DOE</h1>
      <ul class="navigation">
        <li><a href="#about" class="nav-link">About</a></li>
        <li><a href="#skills" class="nav-link">Skills</a></li>
        <li><a href="#projects" class="nav-link">Projects</a></li>
        <li><a href="#contact" class="nav-link">Contact</a></li>
      </ul>
      <button class="burger-menu" id="burger-menu">
        <ion-icon class="bars" name="menu-outline"></ion-icon>
      </button>
</nav>

If you are wondering what the button element represents, it’s the bars for toggling the nav menu on mobile (a hamburger menu). This will be hidden on desktop but shown on mobile.

I will also be linking the individual sections of the website to these nav items, so when the user clicks on any of the nav items, they are taken to the section that corresponds to the nav item they click.

That’s why I have the hyperlink reference (href) attributes set to #about, #skills, #projects, and #contacts, respectively. The individual section of the website will have these attributes as ids.

The navbar now looks like this:

How to Style the Navbar

The navbar definitely needs some styling to make it look a bit nicer.

Before styling the navbar properly, I will be declaring some CSS variables to make things easier later. This is because, with CSS variables, it is easier to avoid redundancy and repetition in your CSS file.

The syntax for declaring CSS variables looks like this:

:root {
  --variable-name: value;
}

To use the variable, you do this:

selector {
  property: var(--variable-name);
}

I will also import the Roboto font from Google, and declare some CSS resets to remove some default features such as margin and padding for elements, text-decoration for anchor tags, and list-style-type for lists.

@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,900;1,700&display=swap");

/* Variables */
:root {
  --font-family: "Roboto", sans-serf;
  --normal-font: 400;
  --bold-font: 700;
  --bolder-font: 900;
  --bg-color: #fcfcfc;
  --primary-color: #4756df;
  --secondary-color: #ff7235;
  --primary-shadow: #8b8eaf;
  --secondary-shadow: #a17a69;
  --bottom-margin: 0.5rem;
  --bottom-margin-2: 1rem;
  --line-height: 1.7rem;
  --transition: 0.3s;
}
/* Variables end */

html {
  scroll-behavior: smooth;
}

/* CSS Resets */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

ul {
  list-style-type: none;
}

a {
  text-decoration: none;
  color: var(--primary-color);
}

a:hover {
  color: var(--secondary-color);
}

body {
  font-family: var(--font-family);
}

If you notice, I set a hover state for all links on the website from line 39 to 41. When the user hovers on any link, it changes to the secondary color I set in the CSS variables.

Here's a good rule of thumb for declaring CSS variables: if you find yourself using the same property and value often in the same CSS file, you should declare a variable for it to avoid repetition.

You should also make your variable names are as descriptive as possible, like I did, in order to help others who might work with your code.

With the resets, there are some changes to the navbar in the browser:

To style the navbar and align the content in it, I will be using CSS Flexbox:

nav {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 3.5rem;
  background-color: var(--bg-color);
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
}

What's the CSS above doing?

I made the navbar sticky with the position property, so it remains at the top no matter what.

The z-index property with the value of 1 makes sure the navbar displays over any other element on the web page. That's how you make a sticky navbar.

In addition, I also applied a shadow to the bottom of the navbar with the box-shadow property.

The navbar has a new look:

But we're not finished yet. The nav menu items need to be side by side, not on top of each other. I will be doing that with Flexbox too.

I will also finish up the rest of the navbar styling by making the h1, nav items, and the hamburger menu button look nicer. I'll do this with some CSS variables initially declared.

nav h1 {
  color: var(--primary-color);
}

nav a {
  color: var(--primary-color);
  transition: var(--transition);
}
nav a:hover {
  color: var(--secondary-color);
  border-bottom: 2px solid var(--secondary-color);
}

nav ul {
  display: flex;
  gap: 1.9rem;
}

nav ul li {
  font-weight: var(--bold-font);
}

The hamburger menu bar also needs to be hidden. It has a class of .burger-menu, so we can set a display of none with it and also make the button look better.

.burger-menu {
  color: var(--primary-color);
  font-size: 2rem;
  border: 0;
  background-color: transparent;
  cursor: pointer;
  display: none;
}

Our navbar looks way nicer now:

How to Build the Hero Section

The next section we'll work on is the hero section. This won’t take quite as much work as the navbar.

The HTML boilerplate for the hero section is in the code snippet below:

<section class="hero" id="about">
      <img
        src="assets/images/wfh_1.svg"
        alt="jane-doe"
        loading="lazy"
        class="hero-img"
      />
      <div class="bio animate__animated animate__shakeX">
        <h2 class="bio-title">About Me</h2>
        <p class="bio-text">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia sed
          dolorem fugit sapiente porro veniam pariatur dolore nostrum delectus
          inventore tempore minus nemo, iste ullam illo laboriosam maiores
          repudiandae quos!
        </p>
      </div>
</section>

The only thing that's a bit strange are the classes of animate__animated animate__shakeX attached to the div containing the About Me text. The class names are from animate CSS and they serve to animate the About Me text container.

With this, the website gets a new look:

How to Style the Hero Section

Flexbox will come to the rescue once again! This section has two major sets of content – an image and text in a div. So we can use flexbox to display them side by side. You can see how it works in the CSS code snippet below:

.hero {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  max-width: 68.75rem;
  margin: auto;
}

Our Jane Doe image is too big, so we need to reduce its width and height. We also need to style the bio text (About Me text) for readability too. The CSS variables initially declared will be very instrumental here.

.hero img {
  height: 37.5rem;
  width: 37.5rem;
}

.bio {
  width: 25rem;
  padding: 0.625rem;
  border-radius: 6px;
  box-shadow: 0px 2px 15px 2px var(--primary-shadow);
}

.bio h1 {
  margin-bottom: var(--bottom-margin);
}

.bio p {
  line-height: var(--line-height);
  padding: 0.3rem 0;
}

The hero section now looks beautiful:

How to Build the More About Me Section

I included this section to include some more information about Jane Doe with some placeholder text.

You can take advantage of this to include information you were unable to put in the About Me section.

The HTML boilerplate for this section is quite short and simple:

    <section class="more-about">
      <h2>More About Me</h2>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis
        nesciunt excepturi quos obcaecati incidunt voluptatem ipsam sunt ipsum,
        autem deleniti cupiditate molestias quis unde quae totam porro dicta
        iure animi inventore, veniam hic! Omnis nulla, delectus a voluptatibus
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consequuntur
        nostrum dolor minus, libero delectus praesentium perferendis
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero,
        consequuntur labore? Ea totam voluptas amet!
      </p>
    </section>

The CSS is straightforward as well. All we'll do is set a background-color with the --bg-color CSS variable, make the section readable by setting the padding, margin, line-height, and aligning the h2 text to the center:

.more-about {
  background-color: var(--bg-color);
  padding: 1rem 6rem;
}

.more-about h2 {
  margin-bottom: var(--bottom-margin);
  text-align: center;
}

.more-about p {
  line-height: var(--line-height);
  padding: 0.4rem;
}

In the browser, the More About section looks like this:

How to Build the Skills Section

From the live demo, you'll see that the skills section contains relevant skills such as HTML, CSS, JavaScript, and so on. I was able to get the icons of those languages as SVGs from Icons8.

The HTML boilerplate for this section is in the code snippet below:

 <section class="skills" id="skills">
      <h2 class="skill-header">My Top Skills</h2>

      <div class="skills-wrapper">
        <div class="first-set animate__animated animate__pulse">
          <img
            src="assets/icons/icons8-html-5.svg"
            alt=""
            loading="lazy"
            class="icon icon-card"
          />
          <img
            src="assets/icons/icons8-css3.svg"
            alt=""
            loading="lazy"
            class="icon icon-card"
          />
          <img
            src="assets/icons/icons8-javascript.svg"
            alt=""
            loading="lazy"
            class="icon icon-card"
          />
        </div>

        <div class="second-set animate__animated animate__pulse">
          <img
            src="assets/icons/icons8-bootstrap.svg"
            alt=""
            loading="lazy"
            class="icon icon-card"
          />
          <img
            src="assets/icons/icons8-react-native.svg"
            alt=""
            loading="lazy"
            class="icon icon-card"
          />
          <img
            src="assets/icons/icons8-git.svg"
            alt=""
            loading="lazy"
            class="icon icon-card"
          />
        </div>
      </div>
    </section>

There are six icons in total. And instead of having to align them with Flexbox, I grouped them in two places (3 teach), with the classes of first-set and second-set, so they stay on top of each other. This means that the stylings we'll apply will be more readable. Easy!

Notice that I’ve been attaching the loading attribute to the individual icons and images and setting it to lazy. This will make sure that the images are loaded only when the user scrolls to the sections containing them. This will subsequently speed up load time, because only what is needed will be loaded.

How to Style the Skills Section

Without styling, the skills section looks like this:

We should style the section a little bit because it doesn’t look good enough yet:

.skills {
  max-width: 68.75rem;
  margin: auto;
  text-align: center;
  margin-top: 2.5rem;
}

.skill-header {
  margin-bottom: 1rem;
}

.skills-wrapper img {
  padding: 1.25rem;
}

.icon {
  width: 11.875rem;
  height: 11.25rem;
}

In the CSS above, I defined a maximum width for the whole section to push things to the center for a better user experience.

Other stylings we applied relate to clarity and readability. For example, I increased the size of the icons to make them more visible with the width and height properties. I also applied a padding of 1rem (16 pixels) to all the icons to push them apart from each other a little bit.

The skills section now looks cool:

Still, I think the section can be better, so I have decided to make some more tweaks with the box-shadow property.

Remember from the HTML that there is a class attribute called .icon-card attached to all the icons. I will be using the class name to put all the icons in a card:

.icon-card {
  background-color: #fff;
  border-radius: 11px;
  box-shadow: 0 3px 10px var(--secondary-shadow);
  padding: 20px;
  margin: 10px;
}

The skills section looks a lot better: Look at that!

How to Build the Projects Section

One of the major purposes of a portfolio website is to show off your projects. So we'll need to build a section to showcase projects you've worked on in the past.

This section is probably the most tedious to style, but Flexbox won’t stop being our friend.

The HTML for this section is in the code snippet below:

<section class="projects" id="projects">
      <h2 class="projects-title">Some of my Recent Projects</h2>
      <div class="projects-container">
        <div class="project-container project-card">
          <img
            src="assets/images/expenseTracker.png"
            alt="expense-tracker"
            loading="lazy"
            class="project-pic"
          />
          <h3 class="project-title">Expense Tracker</h3>
          <p class="project-details">
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quas
            ratione vel inventore labore commodi modi quos culpa aut saepe!
            Alias!
          </p>
          <a href="#" target="_blank" class="project-link">Check it Out</a>
        </div>
        <div class="project-container project-card">
          <img
            src="assets/images/netflixClone.png"
            alt="netflic-clone"
            loading="lazy"
            class="project-pic"
          />
          <h3 class="project-title">Netflix Clone</h3>
          <p class="project-details">
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quas
            ratione vel inventore labore commodi modi quos culpa aut saepe!
            Alias!
          </p>
          <a href="#" target="_blank" class="project-link">Check it Out</a>
        </div>
        <div class="project-container project-card">
          <img
            src="assets/images/greenyEarth.png"
            alt="greeny-earth"
            loading="lazy"
            class="project-pic"
          />
          <h3 class="project-title">Greeny Earth</h3>
          <p class="project-details">
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quas
            ratione vel inventore labore commodi modi quos culpa aut saepe!
            Alias!
          </p>
          <a href="#" target="_blank" class="project-link">Check it Out</a>
        </div>
      </div>
    </section>

Looking at the HTML, there are three projects in total, all in their individual divs with the class name of project-container and project-card. These class names will be instrumental in styling the projects consistently.

The containing section element itself has a class of projects, and an id attribute of projects as well. The class name is for styling, and the id is for linking it to the Projects link on the navbar.

The projects have their individual images with the class name of project-pic, their titles with a class of project-title, more details with the class name of project-details, and links with the class name of project-link.

The sole purpose of giving all of them unique class names is to style them.

These are a few of the projects I worked on myself when I was starting out as a developer.

The projects section looks like this in the browser:

The section doesn’t look good yet, though – there is even an annoying horizontal scrollbar caused by the images. So we have a lot to do with CSS.

How to Style the Project Section

First of all, I will give the whole section a background color by setting the greyish color (--bg-color) we declared in the CSS variables as the value.

I will also reduce the width and height of the project images by usung the project-pic class. Then I'll use Flexbox to put the projects side by side.

.projects {
  background-color: var(--bg-color);
  padding: 32px 0;
  margin-top: 2rem;
}

.project-pic {
  width: 65%;
  height: 60%;
}

.projects-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

The section looks a lot better:

The images now look better, but the project title, project details, and project links need to be aligned nicely within their individual containers.

The whole project section also needs to be pushed to the center. You don’t need Flexbox to do this, though – it can be done by setting the text align property to the value of center:

.projects-title {
  text-align: center;
  margin-bottom: 1rem;
}

.project-container {
  text-align: center;
  width: 21.875rem;
  padding: 1rem;
}

Notice that I also set a width of 21.875rem (350 pixels) for the individual project containers. This will push them apart from the sides for a better user experience. In this case, the user would not need to look all the way across before they see everything.

The section now looks better:

We can still make this section better. The project titles, project details and project links look chunked together, so we should add some padding and margins.

The individual project containers also need to look more distinct. The box-shadow property will be instrumental here again, so I’m putting them in their individual cards.

.project-container p {
  padding: 0.4rem;
}

.project-title {
  margin-bottom: var(--bottom-margin);
}

.project-details {
  margin-bottom: var(--bottom-margin);
}

.project-card {
  background-color: #fff;
  border-radius: 11px;
  box-shadow: 0 3px 10px var(--primary-shadow);
  padding: 20px;
  margin: 10px;
}

The project section looks way better now:

How to Build the Contact Section

If a potential employer or client finds your portfolio website attractive, they might want to contact you. So you'll want to have a contact form in this section, alongside links to your social media profiles.

The HTML for this section looks like this:

<section class="contact" id="contact">
      <h2>Get In Touch With Me</h2>
      <div class="contact-form-container">
        <div class="contact-form">
          <form action="https://formspree.io/f/xyylngw" method="POST">
            <div class="form-control">
              <label for="name">Name</label>
              <input
                type="text"
                id="name"
                name="sender-name"
                placeholder="Enter Your Name"
                class="input-field"
                required
              />
            </div>
            <div class="form-control">
              <label for="email">Email</label>
              <input
                type="email"
                id="email"
                name="sender-email"
                placeholder="Enter Your Email"
                class="input-field"
                required
              />
            </div>
            <div class="form-control">
              <label for="message">Message</label>
              <textarea
                id="message"
                cols="60"
                rows="10"
                placeholder="Enter Your Message"
                name="message"
                class="input-field"
                required
              ></textarea>
            </div>
            <input
              type="submit"
              value="Submit"
              id="submit-btn"
              class="submit-btn"
            />
          </form>
        </div>
      </div>
    </section>

Here we've built a contact form with input fields for name and email, a textarea so people can enter the message to be sent, and a submit button for submitting the message so you can see it.

If you take a good look at the form element, you’ll see I have an action attribute set to a URL from Formspree. This is what I chose for the form submission. With Formspree, you can get the message directly in your email inbox without having to set up a server with complex PHP or JavaScript.

Note that you can't use my URL – it won't work for you. You can easily setup your own on the Formspree website for free. I also attached a resource on how to set up Formspree to the readme file of the project.

I have set some id and class attributes for the individual inputs to style them. There is also a name attribute for all the input fields. This is required by the Formspree form submission service.

To get a basic validation, I attached a required attribute, so the form refuses to submit if the user leaves any of the input fields unfilled.

How to Style the Contact Section

Without styling, the contact section doesn’t look good at all:

All I will do in the CSS is align the whole content to the center and make the input fields look better.

With the text align and margin properties, you can align the h2 and the container for the contact form to the center.

I will also put the whole form in a card with the box-shadow property.

.contact {
  margin-top: 2rem;
}

.contact h2 {
  text-align: center;
  margin-bottom: var(--bottom-margin-2);
}

.contact-form-container {
  max-width: 40.75rem;
  margin: 0 auto;
  padding: 0.938rem;
  border-radius: 5px;
  box-shadow: 0 3px 10px var(--secondary-shadow);
}

The input fields, textarea, labels and placeholders definitely need some styling as well to help with alignment and clarity:

.contact-form-container label {
  line-height: 2.7em;
  font-weight: var(--bold-font);
  color: var(--primary-color);
}

.contact-form-container textarea {
  min-height: 6.25rem;
  font-size: 14px;
}

.contact-form-container .input-field {
  width: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
  border-radius: 5px;
  border: none;
  border: 2px outset var(--primary-color);
  font-size: 0.875rem;
  outline: none;
}

The form looks better now:

But the placeholders are not consistent with the labels. So we need to give it a color and some padding. I will be giving it the primary color set in the CSS variable lists.

To select the placeholders for styling, you can use the placeholder pseudo-class:

.input-field::placeholder {
  padding: 0.5rem;
  color: var(--primary-color);
}

In the contact form, the only thing left is to style the button. Buttons are quite easy to style:

.submit-btn {
  width: 100%;
  padding: 10px;
  margin: 10px 0;
  background-color: #fff;
  border: 2px solid var(--primary-color);
  border-radius: 5px;
  font-size: 1rem;
  font-weight: var(--bold-font);
  transition: var(--transition);
}

In the CSS code snippet above, I made the button go all the way across in the form container by giving it a width of 100%. I also made it more visible with some padding, a margin, a border, and a bolder font weight.

The border-radius property with a value of 5px removes the sharp edges and the transition serves to slow things down a little when the button is in the hover state.

The hover state is defined in the CSS code snippet below:

.submit-btn:hover {
  background-color: var(--primary-color);
  border: 2px solid var(--primary-color);
  cursor: pointer;
}

The form looks much better now:

Remember that having your social media links in your portfolio website is a plus for anyone who might want to contact you. That’s the next thing we are going to do, and we are going to do it in a unique way.

The HTML for the social buttons is in the code snippet below:

    <div class="socials">
      <a href="#" target="_blank"
        ><img
          src="assets/icons/icons8-twitter-circled.gif"
          alt="Twitter"
          loading="lazy"
          class="socicon"
      /></a>
      <a href="#" target="_blank"
        ><img
          src="assets/icons/icons8-instagram.gif"
          alt="Instagram"
          loading="lazy"
          class="socicon"
      /></a>
      <a href="#" target="_blank"
        ><img
          src="assets/icons/icons8-linkedin-circled.gif"
          alt="Linkedin"
          loading="lazy"
          class="socicon"
      /></a>
      <a href="#" target="_blank"
        ><img src="assets/icons/icons8-github.gif" alt="Github" class="socicon"
      /></a>

The social icons I chose are animated gif icons from icons8. I put all of them in a container with the class of socials, and gave them an individual class of socicon for styling.

Take a look at some animated social media icons winking at you below:

How to Style the Social Icons

.socials {
  display: flex;
  flex-direction: column;
  position: fixed;
  right: 1%;
  bottom: 50%;
}

.socicon {
  width: 2rem;
  height: 2rem;
}

With the CSS above, the social icons will be fixed to the right on the web page, so anyone who visits the website sees them no matter where they scroll.

I also reduced the size of the icons by assigning them all reduced width and height property values.

Look at that!

The only thing left to do is the footer. There’s nothing complex in the footer HTML and CSS apart from the reserved character entity for copyright symbol and heart:

<footer>
      <p class="copy">&copy; Copyright 2021</p>
      <p class="copy">
        Built with &#x2661; by
        <a href="https://twitter.com/koladechris" target="_blank"
          >Kolade Chris (Ksound)</a
        >
      </p>
</footer>

footer {
  background-color: var(--bg-color);
  padding: 1.25rem;
  text-align: center;
  margin: 2rem 0 0;
}

We now have a full-fledged portfolio website!

But we need to make it responsive, because it doesn’t look good on smaller devices:

We need to make all the content of the individual sections display on section on top of the another (in a column layout). We can do this pretty easily with media queries and Flexbox.

Before adding the media queries for responsiveness, lets implement a scroll-to-top button with HTML, CSS, and JavaScript.

How to Add the Scroll to Top Button

The HTML for the Scroll to Top Button

For the HTML, I got an animated icon from Icons8 and decided to put it in an i tag.

The i tag has a class of scroll-up for styling and an id of scroll-up for selecting it with JavaScript. This is because in my projects, I like to use classes for styling and ids for JavaScript functionalities.

  <i class="scroll-up" id="scroll-up"
      ><img
        src="assets/icons/icons8-upward-arrow.gif"
        class="socicon up-arrow"
        alt="scroll-up"
    /></i>

How to Style the Scroll to Top Icon

I will make the scroll-to-top icon fixed just like the social icons. I'll also give it a cursor property of pointer, so the cursor changes when the user hovers on it.

With the class of up-arrow attached to the scroll-to-top icon, I will also increase the size of the icon for visibility:

.scroll-up {
  position: fixed;
  right: 0.5%;
  bottom: 3%;
  cursor: pointer;
}

.up-arrow {
  width: 3rem;
  height: 3rem;
}

The icon looks good:

But it doesn’t do anything yet. So we need to make it functional with a few lines of JavaScript:

// scroll to top functionality
const scrollUp = document.querySelector("#scroll-up");

scrollUp.addEventListener("click", () => {
  window.scrollTo({
    top: 0,
    left: 0,
    behavior: "smooth",
  });
});

What is the script above doing?

The first line selects the scroll-to-top button with the id attribute attached to it in the HTML. We used the querySelector() method here. You can also use the getElementById() method.

In the remaining lines, I used the click eventListener to get the user’s click action and exploit the scrollTo part of the windows object to make the button functional.

With this functionality, when the user clicks on the scroll-to-top button, the page scrolls to the top and left side of the website smoothly. I did this by setting top to 0, left to 0, and behavior to smooth.

You can learn more about the windows object by opening up your browser’s developer tools console. Type in window and hit enter, then you see everything available in the windows object, like I did below:

How to Make Your Portfolio Website Responsive

To make the website responsive, we will be using CSS media queries and Flexbox.

First, we'll need to make the images and text look smaller, and then we'll make the content of each section display in a vertical layout by setting the flex-direction to column.

In the media query, I will be using 2 breakpoints – 720px and 420px.

The 720px breakpoint is for tablets and mobile phones, and 420px is for small phones like an iPhone 6, and small Android phones.

Media query Breakpoints are the points at which you want the content of a website to respond according to the width of a device. So, any code put under the 720px breakpoint reflects on devices with a screen less than or more than 720px, depending on whether you specify max-width or min-width.

In the case of a max-width of 720px, the media query syntax looks like this:

@media screen and (max-width: 720px) {
  /*changes reflects on screen with a width of 720px and below*/
}

How to Create the Media Query for Tablets and Mobile Phones (max-width 720px)

We will start making the website responsive right from the navbar, because the navbar doesn’t look good on smaller devices.

First, I’m going to reduce the padding of the navbar so the h1 logo and nav menu items fit in nicely:

nav {
    padding: 1.5rem 1rem;
  }

Things now look a bit better:

On small devices, the nav menu items need to be on top of one another, and they need to be hidden. So, its time to update the code so the hamburger menu is initially hidden.

How to Build the Hamburger Menu

To make the hamburger menu, we need to take the nav menu items out of the viewport. Then we need to set a class of show on the nav list items that will be toggled with few lines of JavaScript (remember the nav items are in an unordered list).

 nav ul {
    position: fixed;
    background-color: var(--bg-color);
    flex-direction: column;
    top: 86px;
    left: 10%;
    width: 80%;
    text-align: center;
    transform: translateX(120%);
    transition: transform 0.5s ease-in;
  }

   nav ul li {
    margin: 8px;
  }

In the CSS code snippet above, I set a position of fixed on the unordered list (ul) to make it float on the screen. I also pushed it down 86px from the top with top: 86px, and 10% to the left.

I gave it a width of 80% of its parent (the nav element from the HTML), pushed it to the center with text-align: center, and finally hid it with the transform property set to translateX(120%). This will push it to the right and force it out of the viewport.

And now, when the user clicks to show the nav items, they all slide in from the right. Awesome.

If you want the nav menu items to slide in from the left, change the transform property value to transform: translateX(-120%) (this is the direct opposite of transform: translateX(120%)). It's as easy as that, depending on your preference.

I also assigned a margin of 8px to the nav items to give them more space.

The navbar now looks like this:

The hamburger menu bar remains hidden. So we need to show it by giving it a display of block, setting a class of show to translate on the x-axis to 0 in order to show it, and then toggle it with JavaScript.

 .burger-menu {
    display: block;
  }

  nav ul.show {
    transform: translateX(0);
  }

Our hamburger menu bars now gets shown, but the nav items remain hidden. To show it, we need to toggle the show class on and off with JavaScript.

The JavaScript for the Hamburger Menu

To toggle the navbar nav menu items on and off with JavaScript, we first need to select all relevant items of the navbar and store them in some variables:

// Nav hamburgerburger selections

const burger = document.querySelector("#burger-menu");
const ul = document.querySelector("nav ul");
const nav = document.querySelector("nav");

• The burger variable select the hamburger menu bars
• The ul variable selects the list items (the nav links altogether)
• The nav variable selects the container itself (the nav element)

What we need to do next is toggle the nav ul.show class when the user clicks the hamburger menu bar. We'll do this by adding a click eventListener to the hamburger menu bar, and then using the toggle method to remove and add the class of show.

Remember that we selected it and stored it in a variable called burger.

burger.addEventListener("click", () => {
  ul.classList.toggle("show");
});

Our nav items can now be toggled on and off:

But there is a problem – the mobile nav is not hidden any time any of the nav item links are clicked. So we need to remove the class of nav ul.show when any of the nav item links are clicked.

We can do this with a few lines of JavaScript too:

// Close hamburger menu when a link is clicked

// Select nav links
const navLink = document.querySelectorAll(".nav-link");

navLink.forEach((link) =>
  link.addEventListener("click", () => {
    ul.classList.remove("show");
  })
);

Remember that the nav links have a class of nav-link from the HTML. So I selected all of them with that class and put them in a variable called navLink. We did this with the querySelectorAll() method.

I then looped through all the links with the forEach array method and listened for a click event on all of them. Then I used the remove() method provided by the DOM to remove the class of show any time any of the nav menu items are clicked. This will take all the list items out of the viewport.

Look at that!

That’s a lot of work. With what we just covered you can make a hamburger menu for any website.

How to Make the Hero Section Responsive

The hero section doesn't look that great at the moment:

All we need to do is give it a flex direction of column in the media query, reduce the width and height of Jane Doe's image, and make the About Me text (bio text) readable.

.hero {
    margin-top: -4rem;
    flex-direction: column;
    gap: 0;
  }

  .hero img {
        height: 37.5rem;
        width: 30rem;
    }

  .bio {
    margin-top: -7rem;
    width: 20.5rem;
  }

The hero section looks better now:

How to Make the More About Me Section Responsive

The More About Me section doesn’t look bad, but we can certainly improve it:

I have the following CSS to make it readable and more presentable:

 .more-about {
    margin-top: 2rem;
    padding: 1rem 3.5rem;
  }

  .more-about h2 {
    text-align: center;
  }

  .more-about p {
    text-align: justify;
  }

I pushed the whole section down a little bit and increased the padding on all sides, aligned the h2 to center, and justified the text.

How to Make the Skills Section Responsive

The skill icons appear too big:

All we need to do in the media query is reduce the sizes of the icons with the width and height properties:

.icon {
    width: 5.875rem;
    height: 5.25rem;
  }

How to Make the Projects Section Responsive

In the projects section, we need to make the three projects stack on top of one another by setting the flex direction to column. I will also reduce the width of the individual containers a little bit.

 .projects-container {
    flex-direction: column;
  }

  .project-container {
    width: 20.875rem;
  }

How to Make the Contact Form Responsive

The width of the contact form needs to be reduced to push it away from the sides and make sure that the fixed social media icons are not on top of it.

All we need to do is set a maximum width:

 .contact-form-container {
    max-width: 23.75rem;
  }

The contact form now looks better:

How to Make the Website Responsive on Small Phones

On small phones such as the iPhone 6, 7, and 8 plus, the social icons and scroll-to-top icon are not showing. There is also a horizontal scrollbar.

To fix these quirks, I will be adding some media queries at the 420px breakpoint:

@media screen and (max-width: 420px) {
  .hero img {
    height: 37.5rem;
    width: 23rem;
  }

  .bio {
    width: 18.3rem;
  }

  .project-container {
    width: 17.875rem;
  }

  .contact-form-container {
    max-width: 17.75rem;
  }
}

I reduced the size of our Jane Doe image, and also reduced the width of the bio text (About Me text), the project container, and the contact form container as well.

All these changes will make the icons fixed to the right side of the website show – the social media and scroll-to-top icons.

Everything now looks good:

That’s the end of it all. We have a fully responsive portfolio website.

You can download the finished version as a zip file from this GitHub repo.

You can also check out the live demo of the portfolio website as well. It has a readme that contains information about the tools I used, and how you can customize the website.

Conclusion

In this tutorial, you learned what a developer portfolio website is and why you should have one.

You also learned how to make a fully responsive portfolio website with HTML, CSS, and JavaScript.

The different parts of this tutorial are each small projects that, when combined, turn into a giant one-page website. For example, you can make card design, a responsive menu bar, a functional contact form, and a scroll-to-top button as the tutorial covers them all.

Feel free to customize the website to your taste.

If you find this tutorial useful, you can share it with your friends and family. I would really appreciate that.

If you're a web developer, it's important for you to have a personal portfolio website – especially when you're applying for jobs.

If you have a nice online portfolio site, you'll have a better chance of getting attention from recruiters than if you don't.

Instead of sending your CV and asking a recruiter to have a look, a portfolio website can help you stand out by directly showcasing your skills, projects, education, and your personal brand.

You can use your portfolio to showcase your projects, your education, share re-usable code snippets with the world, provide helpful resources, and write your own blogs. There are countless things that you can do with your own website.

I built a template that you can use to create, edit, and deploy your own portfolio website for free on the internet in no time. And if you want to build your own version from scratch, I'll show you how in this article.

So let's dive in – I'll show you what technology I used, how I structured the portfolio, and I'll break it down by section so you can see how each part works.

Tech Stack

Let's talk about the tech stack I used to build this template:

• Next.js - a React framework used for building blazing-fast websites along with server-side rendering, which makes it easier for people to find your site on the internet.
• tailwindcss - a CSS framework to that lets you quickly prototype and style your web applications.
• Rough Notation - a styling library used in the Hero section, great for highlighting important text on your webpage.

Why Next.js? Because it is a React framework with Server-Side Rendering, which is good for SEO (Good for us if we get found on Google, right?).

Also, Next.js helps us build blazing-fast websites along with benefits such as Image optimization.

Why tailwindcss? Because TailwindCSS is a framework which reduces a lot of styling efforts. It has low level CSS classes that you can directly embed into the HTML code.

Not only that, it comes with amazing support for responsiveness. For example <div className="text-sm md:text-xl"></div> signifies that text will be small on smaller screens and xl on medium to large screens.

Finally, we are going to deploy the application on Vercel. Vercel gives us an easy way to deploy our application with CI/CD. The code is pushed to a remote GitHub repository and with every push, it's deployed.

Portfolio Site Features

The website includes what I consider to be the absolute minimum you should have in your portfolio website, along with some extra features that are cool to have.

• Dark Mode - Comes with dark mode support. Toggle the mode button to switch between dark and light mode.
• Built with Next.js - The website is built with Next.js which comes with awesome features out of the box like Image Optimization and SEO support.
• Customizable styling - Using TailwindCSS, I built this website in such a way that you can customize primary colors and change the look of your website according to your needs.
• Custom Meta Component - Every page is wrapped with a Meta Component tag which you can use to provide meta information for every separate page that you create.
• Responsive Design - Pages look beautiful on all the devices - desktop, tablet, and mobile.

Portfolio Pages We'll Build

We are going to include all the necessary pages you should have in your portfolio website, such as:

• Homepage - A landing page for the visitor. This is what they'll see when they land on your website.
• About - A brief intro that includes what you do, your technical skills, and your social links.
• Experience - A history of your work, your personal projects that you've undertaken, and your relevant projects.
• Projects - A grid of all the projects you have built.
• Contact - A form where the recruiter / end-user can reach out to you.

Components and Layouts

The entire website is divided into components – small chunks of reusable code that you can use anywhere on the webpage. The folder structure is quite simple and self explanatory:

• components is where all the components live, like the hero section, navbar, and layouts.
• public is where all your static assets go, like images, fonts, and/or any external script for generating dynamic sitemaps.
• styles is where your global styling lives. We will integrate Tailwind's base library here.
• pages is where all your routes live, and it's one of the best features of Next.js. Just create a new file in the pages folder and it'll serve as a new route.

Container Block

<ContainerBlock /> is the parent of all the components. It provides a way for the user to have custom meta tags for every page. I designed the layout so that it accepts props as children and provides a Navbar, <meta> tags, and Footer for every page.

import React from "react";
import Head from "next/head";
import { useRouter } from "next/router";
import Navbar from "./Navbar";
import Footer from "./Footer";

export default function ContainerBlock({ children, ...customMeta }) {
  const router = useRouter();

  const meta = {
    title: "Manu Arora - Developer, Writer, Creator and YouTuber",
    description: `I've been developing websites for 5 years straight. Get in touch with me to know more.`,
    image: "/avatar.png",
    type: "website",
    ...customMeta,
  };
  return (
    <div>
      <Head>
        <title>{meta.title}</title>
        <meta name="robots" content="follow, index" />
        <meta content={meta.description} name="description" />
        <meta
          property="og:url"
          content={`https://yourwebsite.com${router.asPath}`}
        />
        <link
          rel="canonical"
          href={`https://yourwebsite.com${router.asPath}`}
        />
        <meta property="og:type" content={meta.type} />
        <meta property="og:site_name" content="Manu Arora" />
        <meta property="og:description" content={meta.description} />
        <meta property="og:title" content={meta.title} />
        <meta property="og:image" content={meta.image} />
        <meta name="twitter:card" content="summary_large_image" />
        <meta name="twitter:site" content="@mannupaaji" />
        <meta name="twitter:title" content={meta.title} />
        <meta name="twitter:description" content={meta.description} />
        <meta name="twitter:image" content={meta.image} />
        {meta.date && (
          <meta property="article:published_time" content={meta.date} />
        )}
      </Head>
      <main className="dark:bg-gray-800 w-full">
        <Navbar />
        <div>{children}</div>
        <Footer />
      </main>
    </div>
  );
}

After creating ContainerBlock.js, you can simply wrap your page component in a ContainerBlock tag, providing meta tags for title, description, and image:

import Head from "next/head";
import styles from "../styles/Home.module.css";
import ContainerBlock from "../components/ContainerBlock";
import FavouriteProjects from "../components/FavouriteProjects";
import LatestCode from "../components/LatestCode";
import Hero from "../components/Hero";

export default function Home() {
  return (
    <ContainerBlock
      title="Manu Arora - Developer, Writer, Creator"
      description="Building a template with Next.js and Tailwindcss - for FreeCodeCamp users."
    >
      <Hero />
      <FavouriteProjects />
      <LatestCode />
    </ContainerBlock>
  );
}

How to Enable Dark Mode

Dark mode support is provided by a npm package called next-themes. The aim is to wrap the parent container with a provider ThemeProvider through which the theme is available to the children at all times.

_app.js

import "../styles/globals.css";
import { ThemeProvider } from "next-themes";

function MyApp({ Component, pageProps }) {
  return (
    <ThemeProvider defaultTheme="light" attribute="class">
      <Component {...pageProps} />
    </ThemeProvider>
  );
}

export default MyApp;

To toggle the theme between light mode and dark mode, we need a button. You can reuse this button anywhere in the application, but we are going to integrate it in the Navbar so it's available for the end user at all times.

Navbar.js

import React, { useEffect, useState } from "react";
import Link from "next/link";
import { useTheme } from "next-themes";
import { useRouter } from "next/router";

export default function Navbar() {
  const router = useRouter();
  console.log(router.asPath);
  const { theme, setTheme } = useTheme();
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  return (
    <div className="max-w-6xl  mx-auto px-4 py-10 md:py-20">
      <div className="flex  md:flex-row justify-between items-center">
        {/* Logo / Home / Text */}
         // Rest of the code
          <button
            aria-label="Toggle Dark Mode"
            type="button"
            className="w-10 h-10 p-3 rounded focus:outline-none"
            onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
          >
            {mounted && (
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="currentColor"
                stroke="currentColor"
                className="w-4 h-4 text-yellow-500 dark:text-yellow-500"
              >
                {theme === "dark" ? (
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
                  />
                ) : (
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
                  />
                )}
              </svg>
            )}
          </button>
        </div>
      </div>
     //Rest of the code
  );
}

Once the button is clicked, the theme changes. Pretty cool, right? 😍

How to Build the Hero Section

The hero section lets you grab people's attention. If you do it right, it can help you land your first job.

I've used react-rough-notation, a library that dynamically highlights text with different colors and delays.

The good thing about this effect is that the end-user immediately pays attention to the text that's highlighted. You can put your best foot forward here and tell them WHO you are and WHAT you do.

The code for rough-notation is simple: we wrap the text to be highlighted in <RoughNotationGroup> and <RoughNotation> tags with additional parameters such as colors and delays.

Here, I'll create a custom component called RainbowHighlight which takes in a color and highlights the text enclosed which can be used everywhere.

RainbowHighlight.js

import React from "react";
import { RoughNotation } from "react-rough-notation";

export const RainbowHighlight = ({ color, children }) => {
  // Change the animation duration depending on length of text we're animating (speed = distance / time)
  const animationDuration = Math.floor(30 * children.length);

  return (
    <RoughNotation
      type="highlight"
      multiline={true}
      padding={[0, 2]}
      iterations={1}
      animationDuration={animationDuration}
      color={color}
    >
      {children}
    </RoughNotation>
  );
};

Hero.js

import React from "react";
import { RoughNotation, RoughNotationGroup } from "react-rough-notation";
import { RainbowHighlight } from "./RainbowHighlight";

export default function Hero() {
  const colors = ["#F59E0B", "#84CC16", "#10B981", "#3B82F6"];
  return (
    <div className="flex flex-row justify-center items-start overflow-hidden">
      {/* Text container */}

      <div className="w-full md:w-1/2 mx-auto text-center md:text-left lg:p-20">
        <RoughNotationGroup show={true}>
          <RainbowHighlight color={colors[0]}>
            <h1 className="text-4xl md:text-8xl font-bold text-gray-700 dark:text-gray-200 my-2">
              Developer.
            </h1>
          </RainbowHighlight>
       <RoughNotationGroup>
     </div>
     ....
     ....
     ....
   );

How to Fetch the Latest Repositories From GitHub

Fetching repositories with the GitHub API is quite easy.

The GitHub API comes with a provision to fetch the repositories with descending updated_time field, so that we get the latest repositories.

 const res = await axios.get(
      `https://api.github.com/search/repositories?q=user:${username}+sort:author-date-asc`
    );

Once we fetch the latest repository, we splice the array to only take into account the most recent 6 repositories.

let repos = res.data.items;
    let latestSixRepos = repos.splice(0, 6);
    return latestSixRepos;

So the entire function looks like this:

getLatestRepos.js

import axios from "axios";

const getLatestRepos = async (data) => {
  console.log("data", data);
  try {
    const username = data.githubUsername;

    const res = await axios.get(
      `https://api.github.com/search/repositories?q=user:${username}+sort:author-date-asc`
    );

    let repos = res.data.items;
    let latestSixRepos = repos.splice(0, 6);
    return latestSixRepos;
  } catch (err) {
    console.log(err);
  }
};

export default getLatestRepos;

Once the data is fetched from the function, we can then use it inside of our React Component <GetReposCard /> and pass the parameters accordingly.

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto px-10 lg:-mt-10 gap-y-20">
        {/* Single github Repo */}

        {repos &&
          repos.map((latestRepo, idx) => (
            <GithubRepoCard latestRepo={latestRepo} key="idx" />
          ))}
      </div>

const GithubRepoCard = ({ latestRepo }) => {
  return (
    <div className="github-repo">
      <h1 className="font-semibold text-xl dark:text-gray-200 text-gray-700">
        {latestRepo.name}
      </h1>
      <p className="text-base font-normal my-4 text-gray-500">
        {latestRepo.description}
      </p>
      <a
        href={latestRepo.clone_url}
        className="font-semibold group flex flex-row space-x-2 w-full items-center"
      >
        <p>View Repository </p>
        <div className="transform  group-hover:translate-x-2 transition duration-300">
          &rarr;
        </div>
      </a>
    </div>
  );
};

There is a small problem here – the GitHub API provides only a limited number of calls per IP address.

To resolve this issue, one can create a GitHub application and generate Auth Tokens, which we can embed with the GitHub API request and you'll get more requests per IP address. You can read the documentation here for more info about it.

How to Include Projects in Your Portfolio

I've kept the projects section as simple as possible with a huge image area, because the recruiter / end-user is most interested in seeing what you've done. If it looks good, you already have an edge.

I've divided the page into Tailwind grids of two columns, which breaks on mobile screens into 1 column.

The image container contains a header text that displays the project's name and a number at the bottom.

The hover animations on the images are subtle. The image scales slowly to gather the user's attention. On click, it takes the user to the live website / GitHub repository of the project.

import React from "react";

export default function Projects() {
  return (
    <section className="bg-white dark:bg-gray-800">
      <div className="max-w-6xl mx-auto h-48 bg-white dark:bg-gray-800">
        <h1 className=" text-5xl md:text-9xl font-bold py-20 text-center md:text-left">
          Projects
        </h1>
      </div>
      {/* Grid starts here */}
      <div className="bg-[#F1F1F1] dark:bg-gray-900">
        <div className="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-8 py-20 pb-40">
          {/* Single card */}
          <a
            href="https://tailwindmasterkit.com"
            className="w-full block shadow-2xl"
          >
            <div className="relative overflow-hidden">
              <img
                src="/tmk.jpg"
                alt="portfolio"
                className="transform hover:scale-125 transition duration-2000 ease-out"
              />
              <h1 className="absolute top-10 left-10 text-gray-50 font-bold text-xl bg-red-500 rounded-md px-2">
                Tailwind Master Kit
              </h1>
              <h1 className="absolute bottom-10 left-10 text-gray-50 font-bold text-xl">
                01
              </h1>
            </div>
          </a>
        </div>
      </div>
    </section>
    ...
    ...
    ...
  );

How to Build the Contact Page

I took the contact section directly from the Tailwind Master Kit, which is a components and templates marketplace for Tailwind web app projects. I didn't want spend more time styling a contact form myself and used some help.

The component is absolutely free and you can embed it into Tailwind related websites easily.

Contact.js

import React from "react";

export default function Contact() {
  return (
    <section>
      <div className="max-w-6xl mx-auto h-48 bg-white dark:bg-gray-800 antialiased">
        <h1 className=" text-5xl md:text-9xl font-bold py-20 text-center md:text-left">
          Contact
        </h1>
      </div>
      <div className="relative z-10 rounded-md shadow-md bg-[#02044A] p-4 md:p-10 lg:p-20 max-w-6xl mx-auto mb-20 -mt-4">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div className="md:ml-4">
            <header className="">
              <h1 className="text-gray-50 font-semibold text-2xl">
                Get in touch, let's talk.
              </h1>
              <p className="font-light text-base text-gray-200 mt-2">
                Fill in the details and I'll get back to you as soon as I can.
              </p>
            </header>
            <div className="icons-container inline-flex flex-col my-20">
              <div className="flex flex-row items-center space-x-6 rounded-md border border-[#02044A] hover:border hover:border-blue-500 p-4">

                <p className="text-gray-50 font-light text-sm">
                  +91 9987384723
                </p>
              </div>
              <div className="flex flex-row items-center space-x-6 rounded-md border border-[#02044A] hover:border hover:border-blue-500 p-4">
                ....
                ....
                <p className="text-gray-50 font-light text-sm">
                  contact@yourwebsite.com
                </p>
              </div>
              <div className="flex flex-row items-center space-x-6 rounded-md border border-[#02044A] hover:border hover:border-blue-500 p-4">
                ....
                ....
          <form className="form rounded-lg bg-white p-4 flex flex-col">
            <label htmlFor="name" className="text-sm text-gray-600 mx-4">
              {" "}
              Your Name
            </label>
            <input
              type="text"
              className="font-light rounded-md border focus:outline-none py-2 mt-2 px-1 mx-4 focus:ring-2 focus:border-none ring-blue-500"
              name="name"
            />
            <label htmlFor="email" className="text-sm text-gray-600 mx-4 mt-4">
              Email
            </label>
            <input
              type="text"
              className="font-light rounded-md border focus:outline-none py-2 mt-2 px-1 mx-4 focus:ring-2 focus:border-none ring-blue-500"
              name="email"
            />
            <button
              type="submit"
              className="bg-blue-500 rounded-md w-1/2 mx-4 mt-8 py-2 text-gray-50 text-xs font-bold"
            >
              Send Message
            </button>
          </form>
        </div>
      </div>
    </section>
  );
}

How to Deploy the Portfolio

Deploying the application is fairly simple and just takes 8 simple steps.

1. Clone the repository

   git clone https://github.com/manuarora700/simple-developer-portfolio-website
   

2. Install dependencies

npm install

3. Start the local development server

npm run dev

4. Make modifications to the website. You should include all your projects, education, social links, and Meta information.

5. Push the code to your remote repository

git add *
git commit -m "add changes to the cloned repo"
git push

6. Create a Vercel account (or login to your Vercel account)

7. Add the newly created GitHub repository with the changes pushed and Vercel will automatically deploy it for you on a link.

8. Once the site is live, share the test link with your friends or add it in your résumé. You can also go ahead and connect a custom domain to make it more professional.

Conclusion

This portfolio site will give a recruiter or visitor everything they're looking for if they want to learn more about you and your work. The goal of your portfolio should be to showcase your skills in the best way possible.

Also, we've built the site with Next.js, which shows that you're comfortable with React and its frameworks. (Recruiters are looking for you! 😍)

The website uses tailwindcss for styling, which shows that you can work with a CSS framework and cut down on styling time.

The components are granular and each serves its own purpose. The folder structure is simple and easy to understand.

You can customize the website in any way you like - I've open sourced it and the code is linked to the GitHub repo below.

My personal website has helped me land interviews at big tech companies and it is one of the main reasons I've been able to get a job (along with practicing on freeCodeCamp and learning how to code).

I really enjoyed building this website. If you liked it, leave a star on the GitHub repo and help spread the word. ⭐️

Source Code and Live Demo

Source Code
Live Demo

I have curated a list of 25 sites for remote work. Whether you are looking for part time, full time, or freelance work, these are the best sites to look into.

Here is the complete list. Once you find a website that interests you, click that link and it will jump you down to a more detailed description of that website.

1. Arc
2. We Work Remotely
3. Skip The Drive
4. Power to Fly
5. Remote OK
6. Remotive
7. FlexJobs
8. Dribble
9. AngelList
10. Remote.co
11. JustRemote
12. Virtual Vocations
13. Pangian
14. Working Nomads
15. Jobspresso
16. Outsourcely
17. Landing.Jobs
18. Authentic Jobs
19. Stack Overflow
20. Gun.io
21. Idealist
22. Fiverr
23. Upwork
24. Freelancer
25. freelancermap

Arc

Arc is a site dedicated to remote developer jobs. Arc provides many free resources including a job search by tech stack, a resume guide, salary explorer, virtual events, and interview questions.

You can also browse through Arc's list of Top Remote Companies that are hiring right now.

We Work Remotely

We Work Remotely offers free job postings in frontend, backend, full stack, mobile, design and more. You also have access to their events, forum, and slack group.

Skip The Drive

Skip The Drive offers free job listings in the areas of development, project management, sales and more. This site also offers a list of Micro Job Sites, a Remote Job Savings Calculator, and a Job Application Tracking spreadsheet.

Power to Fly

Power to Fly specializes in connecting candidates from underrepresented backgrounds to potential employers. When you create an account you'll have access to job listings, career events, coaching sessions, mentorship and more.

Remote OK

Remote Ok offers free job listings in development, online teaching, design and more. This site also has a separate page for just freelancers where you can create a profile and have access to thousands of jobs.

Remotive

Remotive offers free job postings in the areas of IT, development, design, QA and more. Remotive also provides career guides, webinars, and paid access to the Remotive community.

FlexJobs

FlexJobs is a subscription site for remote part-time, full time and freelance jobs. If you are skeptical about paying for job postings, then check out their Better Business Bureau rating and reviews.

This is the current pricing list for the FlexJobs subscriptions.

Members have access to their job listings, events, and articles. FlexJobs also offers career coaching, resume reviews, and mock interviews for an additional cost.

Dribble

While Dribble is mainly known as a place for freelance designers to post their work, there is also a section for remote graphic design jobs.

AngelList

AngelList offers software job listings at startup companies. You will need to create an account in order to read the full job descriptions and apply.

Remote.co

Remote.co offers free job postings in the areas of IT, development, design, QA and more. If you upgrade to the premium service, then you have access to more job postings, career coaching, and resume reviews.

JustRemote

JustRemote offers free job postings in the areas of DevOps, development, design and more. They also offer an online resume builder to help you get to the interview stage.

For an added cost, JustRemote has a feature called PowerSearch that provides you with additional job postings that are normally hidden from the general public.

Virtual Vocations

Virtual Vocations is a free service that provides you with remote job listings in development, technical writing, QA, project management and more.

Virtual Vocations also offers a paid subscription service which includes courses, webinars, and career coaching sessions.

Pangian

Pangian offers free remote job listings in the areas of development, IT, sales and more. You will need to create a free account in order to access the job details.

Pangian also offers free career tips and a community forum. For an additional $149.99 (US dollars), you can have access to the one on one resume and CV audit.

Working Nomads

Working Nomads offers free job listings in development, design, DevOps, project management and more.

Jobspresso

Jobspresso offers thousands of free listings in development, design, DevOps, customer service, and more.

Outsourcely

Outsourcely ensures that job candidates are paired with the right company. Create an account and browse through thousands of postings in web development, mobile, design, customer service and more.

Landing.Jobs

Landing.jobs connects independent contractors with remote jobs. Create an account, go through the Landing.jobs evaluation process, and then start applying for remote work.

Authentic Jobs

Authentic jobs offers free listings in web development, mobile, project management, design and more.

Stack Overflow

Stack Overflow is mainly known as a place for tech questions and answers but they also have a jobs section. For remote work, just select the remote options in the search parameters.

Gun.io

Gun.io specializes in connecting developers with software companies. Create an account, apply for jobs, go through interviews and start working.

Idealist

Idealist is a site that posts hundreds of jobs for non-profits and organizations that want to create change in the world. For remote work, make sure to choose that option in the search parameters.

Freelance projects and micro-jobs

Fiverr

Fiverr is site where you can create a list of services and offer them to Fiverr's global audience.

Upwork

Upwork is a place for freelancers to bid on jobs, sell their projects, and connect with recruiters.

Freelancer

Freelancer specializes in connecting clients with freelancers. Freelancers can search through thousands of projects and make bids.

freelancermap

freelancermap specializes in connecting freelancers with clients all around the world. Freelancers can create an account and bid on projects that match their skills and experience.

##