DEV Community: Christine Shu

What is programmer imposter syndrome and how to overcome it

Christine Shu — Mon, 13 Dec 2021 05:50:22 +0000

Have you ever felt immense fear and doubt that your colleagues might find out you are just a fraud and you really have no idea what you are coding everyday? If you’ve ever doubted your own programming ability or performance at work, you are not alone. When Blind surveyed over 10,000 participants they discovered 58% of tech employees experience imposter syndrome. As high as 73% of employees at Expedia experience this at some point in their career. Let’s dig into why imposter syndrome is so prevalent in software development and the different ways you can tackle imposter syndrome.

Why is programmer imposter syndrome so common?

While imposter syndrome isn’t something only people in tech experience, it is amplified for programmers. Not only is tech intensely fast paced, software development is a field that is constantly expanding and evolving. New technologies and tools roll out by the day. As a software engineer, you feel pressure to keep up or even stay ahead. Another reason software developers experience imposter syndrome more intensely might be the unrealistic perception of people in tech. Tech giants, star entrepreneurs, and key opinion leaders are often portrayed as brilliant, informed, and knowledgeable individuals. To fit the persona of someone working in tech, you need to appear extra smart and always on top of things to live up to the image.

We interviewed fellow developers to find the most common imposter syndrome scenarios:

Being promoted or leading a team/project: I was asked to step up to lead the engineering team. As things go on and issues start appearing, I worry that I am underprepared and that I’m not living up to the expectations.
Non-traditional CS background: I graduated from a coding bootcamp, before that I was in the finance sector. I worked really hard in putting my portfolio together and preparing for technical interviews, eventually landing a job as a junior developer at a major company. However, from the day I got hired, I’ve constantly been in self doubt and wondered if I’d ever be as good as my colleagues with proper computer science training.
Comparing with your peers: I’m constantly playing catch up with my colleagues. They always seem to know how best to structure their code and the process goes smoothly for them in general. For me, I always get called out on issues during QA. I feel like I’ll always be a junior dev compared to them.
Staying relevant in the industry: I attended a tech conference and learned about the latest updates and developments. Though it was very interesting, I worry that I don’t have the capacity to learn all the new tools and the tools I’m familiar with will eventually become irrelevant.

If you’ve experienced a similar situation that made you feel you’re not skilled enough, don’t stress, the following few tips will help you manage imposter syndrome.

How to deal with programmer imposter syndrome

👉 You can never be an expert, be comfortable with the uncomfortable

Tech is a fast-changing industry. You might be learning Pycharm today just to learn that everyone else is switching over to Spyder. You mastered Angular, yet you’re still not quite a JavaScript expert because there’s also Node.js, Vue.js, React, and more frameworks that you’re unfamiliar with. New programming languages, frameworks, and tools evolve and pop up so quickly, it feels impossible to keep up.

The reality is simple. It is impossible to stay on top of everything. Tech changes at such a fast pace - no one can truly grasp all technologies and concepts. While some might be faster learners and experience flatter learning curves than others, it is impossible for everyone to master everything.

You’re also not expected to keep up with everything. A good tip is to learn to filter out what updates you actually need for your work or side projects. That way you'll stay informed but not overwhelmed.

We all have comfort zones where we feel most safe and secure. When you’re in uncharted territory, it’s natural to feel overwhelmed. “Imposter syndrome happens when you’re in your comfort zone, and you’re picked up and placed in a ring that’s not adjacent to the inner circle,” says Mayuko, ex-Netflix software developer and full-time Youtuber. When you are outside of your comfort ring, that’s when imposter syndrome kicks in.

Source: PositivePsychology.com ‘Leaving The Comfort Zone’ Toolkit

As part of the age-old fight or flight process, if you let imposter syndrome scare you, you’ll likely avoid the situation instead of finding a solution. But if you get comfortable with the uncomfortable, and see the unfamiliar as challenges, you can and will overcome the fear. You’ll eventually learn the new technology, get over the obstacles, acquire new knowledge, and meet new goals.

How do I get comfortable with the uncomfortable though? Let’s break this down into a few simple steps:

Accept and begin: When you’re faced with a new tool or project, instead of panic and stress, take a deep breath and read through all the information and briefs available. Prepare your heart to accept the new challenge and begin to work on it. You are halfway there once you make the commitment to start.
Push through: To not give up in the midst of learning something new could arguably be the hardest thing to do! Keep pushing through the learning curve and eventually push past your comfort zone, and everything will get easier from there.
Repeat the process: The more you do it, the more you’ll be accustomed to the process. It’s uncomfortable to start anything new, it’s uncomfortable to push through, but your confidence can be built up through practice and repetition.

Learning is a lifelong journey, consider it an opportunity to expand your comfort zone when you are presented with new challenges. Your ability to recognize your shortcomings or lack of technical skills is actually a good sign that you are driven to upskill and grow.

As a software developer or someone working in tech, you will never be an expert of everything. Recognizing that discomfort and adaptability are the keys to growth can take you a long way in your personal and technical development.

👉 Identify your fears and doubts and make a plan to work on them

The hardest part of dealing with imposter syndrome is not knowing what’s triggering it. Was it when other developers on the team shared a recent discovery of a new tool? Or maybe you saw a side project your colleagues did for the company? Accumulated incidents could leave you sitting there, wondering what you’ve contributed lately, or even if you’re needed.

To tackle the generic feeling of being an imposter, the first step is to identify what triggers the negative emotions. Try to pinpoint the specific projects, conversations, or maybe even the people who made you feel insecure. For example, you finished coding a new product feature and felt confident with the results. After a ruthless code review by a senior developer, the overwhelming feedback left you wondering how the code had such a large amount of flaws. If imposter syndrome takes over, you may question your competency, or worse, whether being a developer is the right career path for you.

How did you go from being confident in your work to feeling like a fraud? Was it receiving feedback you weren’t expecting? Was it that you finally felt competent at work just to realize that there’s still a lot to learn? Or was it you felt like you still lack technical skills compared to your peers?

If you can’t find specific instances that triggered the feeling of being an imposter, see if deeper insecurities such as fear of being judged by others, unhealthy comparisons, and unrealistic expectations are the root causes.

Once you’ve identified the triggers, you can target them and learn how to deal with them:

Practice makes perfect, but no code will be perfect.

The only way to continue to improve your technical skills is with practice. Practice, receive feedback, iterate, and repeat. This is all part of the process to becoming a better programmer. If you feel like you failed a project, it may be a humbling experience to know that there is always room for growth, no matter how good you think your code is.

Understand that the feedback your peers and managers provide is constructive feedback and not judgmental.

Your colleagues perform code reviews with the intention to help you improve instead of bringing you down. They want you to be able to pull your own weight and grow as a developer. It is good practice to receive feedback and is also something that you can do to help junior developers in the future.

Once you are able to identify the fears, make a plan to tackle these insecurities. Try verbalizing your concerns and fears early so you won’t dwell in it for too long. Reflect on your past experience and take notes on what you can do next time when you encounter similar feelings. Proactively facing your fears helps you move forward without being hindered by the overwhelming sense of insecurity.

Verbalizing your fears makes it real but at least you are facing it - Mayuko, Youtuber

👉 Trust the decisions and positive feedback

You recently got promoted to Engineering Manager. As you start in this new role, you feel overwhelmed by the increased responsibilities. Your work suddenly goes beyond writing code, you have to take into consideration hiring, prioritizing, assigning tasks, and building team culture, etc. You can’t help but question if you’re cut out for the managerial role.

If your company decided to promote you or have you take on more responsibility, they’ve made this decision based on your previous experience, feedback from your peers, and the potential they see in you. These are not decisions that are made lightly. Trust that your company has systems in place to reward accomplishments and that they believe in your ability or have the vision for you to grow into the role.

If you still feel like an imposter, one of the things you can look for and reflect on is how others see you at work. In any discussion, if your coworkers care and value your opinion, you can be certain that you are not only a valuable team member, but also someone others look up to.

Trust that your company and colleagues have your best interest and are there to help and uplift you in your career.

👉 Check in with your peers or manager

Imposter syndrome doesn’t only hit when you get a promotion or when you’re in leadership. We asked our community if they still feel like an imposter even with years of experience under their belt, and based on this Twitter poll, 80% said that they still experience imposter syndrome. It could happen at the beginning of your developer career, in the middle of an ongoing project, or even after a successful project.

As a junior developer that graduated from a bootcamp, you may feel less qualified than others because you don’t have a traditional computer science background. When you’re working on a project, you may fear that others will perceive you as a rookie. When your colleagues pass your desk, and you have tons of Stack Overflow tabs up, you may feel like you’re the only one who doesn’t understand everything.

The truth is, you are your own worst enemy when it comes to feeling like an imposter. Other people may not view you that way at all. The fastest way to get yourself out of the negative mindset is to speak with trusted peers and managers. They might be able to offer encouragement from personal experience or provide constructive feedback on what you’ve done well and what you can continue to improve on. They may even be able to straight up tell you everyone thinks you’re doing a fantastic job already.

Checking in with someone helps to free up this irrational thought and be able to carry on for what comes next with confidence.

When you are unsure about your objective performance and are having self deprecating thoughts, it’s helpful to ask for feedback from your colleagues or manager. Their objective feedback would help stop the downward spiral. - Ting, Front-end Developer at Codementor.

👉 Give yourself the credit you deserve

The level you have reached is because of the effort, passion, and hard work you’ve put into becoming the developer you are today. Regardless of years of experience, there will always be people more experienced than you and more things you don’t know. That doesn’t mean you’re not where you’re supposed to be.

Take a deep breath and reflect on what you’ve accomplished so far as a software developer or list out what you’ve done in the past year. You will be surprised by how far you’ve come. Give yourself the credit you deserve and a pat on the back.

Go to your github. Find code you committed as close as possible to one year ago today. Marvel at the stupidity, and be proud of how far you've come. - u/thumbtackthief, Reddit.

Conclusion

If you’re a software developer who is currently struggling to see your purpose or value at work, it is okay! There are many who experience programmer imposter syndrome just like you, even technical founders and CEOs.

“You’d think I know what I am doing everyday when I go to work, but let me let you in on something, most days, I still feel like I often don’t know what I am doing. I’ve felt that way for 15 years. And I’ve since learnt that this feeling is called impost syndrome.” Mike Cannon-Brookes, co-founder of Atlassian (TEDxSydney).

Keep an open mind and don’t let the feeling overtake your technical performance and personal emotion. Try to be comfortable with the uncomfortable, identify your fears and make a plan, trust the decisions and feedback of others, check in with your colleague or manager, and lastly, give yourself the credits you deserve.

We want to hear about your experience. Do you still encounter imposter syndrome? What methods do you use to manage these feelings? Comment below👇👇👇

Start your programming journey: Coding bootcamps vs. Self-learning

Christine Shu — Mon, 08 Nov 2021 03:16:53 +0000

If you’re considering switching careers to become a developer, you’ve probably spent hours researching bootcamps and other learning options, such as online courses and various self-learning methods. At the core, what you may actually be asking is: are coding bootcamps worth it or is self-learning more suitable?

In this article we’ll help you figure out if full-time onsite coding bootcamps or self-learning fit your learning needs better by comparing these five factors:

Structure and industry relevance
Motivation
Cost
Flexibility
Possibility of landing a job

We’ll take a closer look at some of the pros and cons under each category. Hopefully we will get you one step closer to taking that first step in your programming journey!

Short on time? 👉 Jump to the summary table.

Structure & Industry Relevance

Full-time onsite bootcamps are a more organized style of learning whereas self-learning allows you freedom in building your own curriculum. In this section, we will compare the structured vs. unstructured aspect, and how easy it is to stay updated with the latest programming knowledge.

Bootcamps

Onsite coding bootcamps are structured classes with a set curriculum taught by a dedicated teacher and a few teaching assistants. Most coding bootcamps focus on web development holistically. This means you’ll learn a variety of technologies, including the latest industry knowledge.

In the bootcamp, you likely have a daily planned module and weekly goals. Classes can range from learning the foundations to building your own web applications. It’s common to learn basic programming languages such as JavaScript, SQL, Python, and some common industry practices, such as unit testing and the agile methodology.

Bootcamps are specifically designed to help you get a developer job after graduation. This means that the material will be tailored to the knowledge and skills that a software developer will need in the real world.

Self-learning

With self-learning, the structure is up to you. You can choose to set a strict schedule or give yourself more flexibility. You can also plan when, where, and how you want to acquire new programming knowledge.

For example, if you are learning Javascript from scratch, this might be what your curriculum looks like:

Take the Javascript course on Codecademy
Practice with tutorials and practices on W3schools
Find free videos on Youtube to dive deeper into specific concepts

If you already know the basics and want someone more experienced to look through your projects or answer your questions, you can use platforms like Codementor (hey, that’s us! 😉)
to find mentors specialized in Javascript.

9 Ways A Mentor Can Advance Your Programming Journey

The verdict 📣 : A tie

As long as you understand your goals, your availability, and your learning style, structured and unstructured learning can be equally powerful. While structured bootcamps may save you time and energy by providing you with a set curriculum and industry knowledge, there is less freedom in deciding what and how you want to learn. On the other hand, self-learning would give you more flexibility, but could lack the structure and boundaries that might be helpful.

Motivation

Learning to code can be overwhelming. How you keep up the momentum, stay curious and motivated, and continue to advance your knowledge is a skill in itself. As shown in the graph below, you are likely to build up a sense of confidence during the honeymoon phase, and just when you think you’ve gotten through the learning curve, you enter this cliff of confusion and go downhill from there. This is where many people give up, but once you push through, it’s uphill from there.

Image from Why learning to code is so damn hard

In this section, we will take a closer look at the motivation factor.

Bootcamps

With a set curriculum, full-time onsite coding bootcamps create a learning environment where everyone learns the same information and works on projects at the same time. You feel a strong sense of belonging to this community of peers as everyone works toward the same goal: to become a software developer.

While your cohort and classroom can keep you accountable and motivated, it could also do the opposite. You could be distracted by the social environment, discouraged by others who seem to be ahead of you, or overwhelmed and drained by the heavy workload. While there are structures to help you stay motivated in bootcamps, it is not always a given.

Self-learning

For some, it is much easier to learn independently because you can set your own pace and not be bound by a structured curriculum and strict deadlines.

However, the down side of teaching yourself is that you might lose motivation, feel isolated, or feel lost without a clear roadmap. One way around this is to find an accountability partner, mentor, or peer to work with to stay motivated. As accountability is not inherently built into self-learning, staying motivated may be extra challenging. The journey for you to become a developer could take longer, and you may experience several dips throughout your learning journey.

The verdict 📣 : Coding bootcamps

Social interactions and the right amount of competition and mutual encouragement will help you thrive. Joining a cohort of students can keep you motivated and give you the push you need when you feel like giving up.

How To Improve Your Programming Skills As Developers and Non-Developers

Flexibility

Who doesn’t love a flexible schedule? We all want to be able to work, rest, eat, and set our own schedule. If you attend an in person bootcamp, your schedule is set for you, whereas you can maintain a high level of freedom and flexibility with self-learning.

Bootcamps

With full-time onsite bootcamps, you set aside everything in your life and focus on the course for roughly 3.5 months. You have a fixed start and end date, and a set schedule for each day. You dedicate most of your time to the course and sacrifice flexibility. The guarantee is, at the end of the course, you should have the skills and a solid portfolio to prepare you for your first developer job.

Self-learning

Self-learning is considerably more flexible as you get to set your own schedule. You aren’t bound by potential commute, class-attending, and group project time. You can set a learning schedule around your work hours. You are the main decision maker, and can decide on the topics you want to learn, how deep you want to go, the projects you want to work on, and adjust them at any time.

The verdict 📣 : Self-learning

Self-learning is the best learning option for you if you value and prioritize flexibility. Other than a flexible schedule, you also have the maximum flexibility to choose the material and people you want to learn from.

Cost

In 2021, the average annual salary of a software developer in the United States is $86,523, with the top 75th percentile making around $100k a year. How much are you willing to spend to have a career in software development?

In this section, we’ll look at the cost of joining a bootcamp and self-directed learning.

Bootcamps

To join a full-time onsite coding bootcamp, you’re looking at around $13,500 (median bootcamp tuition in 2020) for a roughly 14-week period. While it is more affordable than getting a 4-year or 2-year computer science degree, for some, this is a considerable sum of money and time invested into a career they’re not sure will work out for them.

Self-learning

With all the free resources online, such as courses, books, tutorials, or even talks, it’s possible to learn programming completely free of charge. You can also pay a few hundred dollars for an online course from platforms like Udemy, and Educative, or for subscription-based learning options, such as Frontend Masters and Treehouse.

The verdict 📣 : Self-learning

From fully free resources, to investing hundreds of dollars into resources of your choosing, self-learning is much more affordable. You can continue to learn at your own pace and pick up new skills according to your own financial ability. With coding bootcamps, you have to decide whether it is cost effective for you for the fixed price and timeframe.

Landing a job

If you’re learning programming to switch careers, you should consider how likely and how quickly you can find a developer job with bootcamps and self-learning.

Bootcamps

The goal of a coding bootcamp is to help you land a software developer job. Bootcamps will require you to complete a resume and portfolio by the end of the program. They will also provide career-focused resources, such as career counselors. Some even have “hiring days” or similar events where students can present their portfolio and attend interviews with the bootcamp industry partners.

Self-learning

As career resources are not provided to self taught developers, you’d have to take on the sole responsibility of preparing for and finding your first developer job. There are plenty of resources online dedicated to helping people find their first developer job. For more personalized help, you can consult developers in the industry for tips on landing your first job.You can also connect with mentors or senior developers for portfolio feedback and mock interviews.

The verdict 📣: Bootcamp

A coding bootcamp is familiar with what the industry is looking for and has experience helping students switch careers. Naturally, they have a better idea of what portfolios would work, what your resume should include, and other career resources you might need to kickstart your developer career. The added guidance is especially helpful when you’re switching careers.

Conclusion

Hopefully we’ve given you a bit more insights on two of the methods you could choose from. There are many many different ways to learn programming, what’s most important is understanding your own needs and goals and choosing a learning style that suits you best.

Regardless of which route you choose, you can always find an accountability partner or a coding mentor to support you through your journey. Not to mention, programming is a lifelong journey for all developers. A coding mentor can:

Continue to encourage you even after you graduate from a coding bootcamp.
Provide you technical and career advice.
Share their experience and the latest trends in the tech industry.

Join discussion with other mentors and users on 👉 Getting into tech without a Computer Science degree

Have you gone through a coding bootcamp or are you a self-taught developer? We’d love to hear what worked for you and what didn’t. Comment below to let us know!

A Step-by-step Tutorial for Building a Temperature Converter Website

Christine Shu — Wed, 22 Sep 2021 08:50:02 +0000

Building coding projects is one of the best ways to learn coding and build your portfolio. However, sometimes a simple project spec may not be enough to help you build your project. This tutorial will walk you through how to build a Temperature converter website, one of the most popular projects on DevProjects.

You’ll build a simple tool to convert between different temperature units. To follow along, check out the project spec on DevProjects!🚀

Introduction

While Kelvin is the SI Unit of temperature, people generally prefer Fahrenheit or Celsius unit type to measure temperature. We're going to build a temperature converter that will convert Fahrenheit, Celsius, and Kelvin units to each other, using the most popular CSS framework called Bootstrap 4.6 and JavaScript library - jQuery.

Here is the live demo of Temperature converter website.

Project Overview

In this tutorial, we will create a temperature converter and walk through how the website works. We will deploy this project on GitHub using GitHub pages, a hosting service by GitHub that allows you to publish static websites online directly from repositories. The tutorial will guide you through the step-by-step process of setting up the GitHub repositories before publishing the website. The suggested text editor is VScode, but you can choose any other text editor you like.

⭐ Why Bootstrap

We are using this library because of its variety of components. Additionally, the bootstrap grid system is based on Flex, which provides us with full responsive support for any website. You can read more about it on its official website.

⭐ Why jQuery

While other powerful libraries and frameworks have emerged, jQuery is very beginner friendly and is the best library for practicing and getting started in JavaScript libraries.

jQuery is a small, fast, and feature-rich library. It saves developers a lot of time by completing complicated tasks with just a few lines of code.

⭐ What you need

VSCode or any other text editor
Any browser of your choice
Basics knowledge of jQuery and Bootstrap
A GitHub Account for deployment

Recreate this project on DevProjects. Try it now!

Setting up the project environment

Create a new folder named Temperature Converter and open the folder in VScode. Initially, our workspace will look like this:

Hover the mouse on the sidebar to find the icon for creating new files or folders
Create a sub-folder named assets and the following files: index.html, style.css, and script.js.

Assets
In this folder, we'll store all icons and any other media used in our project.

Index.html
To create the structure of the website.

Style.css
To add custom CSS styling in our project.

Script.js
This is like the brain of our project, In which we write JavaScript code to make our website work.

Open the index.html type doc then press enter, A boilerplate will appear as shown below:
Open the index.html type doc then press enter, A boilerplate will appear as shown below:

a. Set up Bootstrap 4.6 CSS

Visit Official Bootstrap 4.6.0 Documentation and copy the CDN link of the CSS and JS Bundle. Alternatively, you can also use this Boilerplate in your index.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">
      <title>Tempreature Unit Converter</title>
      <!-- ---------------Bootstrap 4.6-------------------------------------- -->
      <link rel="stylesheet"
         href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
         integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l"
         crossorigin="anonymous">
      <!-- ---------------Custom CSS-------------------------------------- -->
      <link rel="stylesheet" href="style.css">
   </head>
   <body class="d-flex align-items-center">



      <!-- All body content will come here -->




      <!-- ---------------jQery-------------------------------------- -->
      <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
         integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
         crossorigin="anonymous"></script>
      <script
         src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"
         integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
         crossorigin="anonymous"></script>
      <!-- ---------------Custom JS-------------------------------------- -->
      <script src="script.js"></script>
   </body>
</html>

Why not build this project yourself? Build this project for free.

Let's Start Building

The project will be divided into 5 steps:

Step 0 : Create HTML structure with Bootstrap classes

Create the container, then make our card-group. The card-group will contain both input-card and result-card. The structure code will look something like this:

<div class="container">
  <div class="row">
    <div class="card-group col-12 col-md-10 offset-md-1 my-md-auto">
      <!-- Input and Result Section will come here-->
    </div>
  </div>
</div>

Add the input & result card section with custom CSS class inputSection to enter input values, and resultSection to display the result value.

<div class="card inputSection col-12 col-md-6">
  <div class="card-body">
    <form>
      <div class="row px-3">
        <div class="col-12 col-md-11 px-4">
          <span class="card-title d-block">Enter Temperature</span>
          <label for="degreeInput" class="py-sm-2">Degree</label>
          <div class="input-group">
            <input type="number" class="form-control" id="inputDegree" name="inputDegree" placeholder="Enter Degree" value="0" />
            <div class="input-group-append">
              <select class="form-control" id="selectInputDegreeType">
                <option value="C" selected>&deg;C</option>
                <option value="F">&deg;F</option>
                <option value="K">K</option>
              </select>
            </div>
          </div>
          <label for="selectConversionType" class="py-sm-2">Convert In</label>
          <div class="input-group d-inline-block">
            <div class="input-group-append">
              <select class="form-control" id="selectConversionType">
                <option value="F" selected> Fahrenheit (&deg;F) </option>
                <option value="C">Celcius (&deg;C)</option>
                <option value="K">Kelvin (K)</option>
              </select>
            </div>
          </div>
          <button type="submit" class="convertBtn
                                btn btn-lg
                                col-12 col-md-6
                                offset-md-3
                                mt-4
                                rounded-pill
                                d-flex
                                justify-content-center
                                align-items-center
                                text-white"> Convert&emsp; <svg class="mt-1" xmlns="http://www.w3.org/2000/svg" width="15px" height="15px" viewBox="0 0 21.367 20.826">
              <path id="Icon_awesome-arrow-right" data-name="Icon awesome-arrow-right" d="M9.085,4.042l1.059-1.059a1.14,1.14,0,0,1,1.617,0l9.271,9.266a1.14,1.14,0,0,1,0,1.617L11.76,23.137a1.14,1.14,0,0,1-1.617,0L9.085,22.078A1.146,1.146,0,0,1,9.1,20.443l5.747-5.475H1.145A1.142,1.142,0,0,1,0,13.823V12.3a1.142,1.142,0,0,1,1.145-1.145H14.85L9.1,5.678A1.138,1.138,0,0,1,9.085,4.042Z" transform="translate(0 -2.647)" fill="#fff" />
            </svg>
          </button>
        </div>
      </div>
    </form>
  </div>
</div>
<div class="card resultSection col-12 col-md-6">
  <div class="card-body d-flex justify-content-center
                align-items-center">
    <div id="resultValueSection">
      <div id="convertedDegree">32</div>
      <h3 id="degree">&deg;</h3>
      <h3 id="convertedUnit">F</h3>
    </div>
  </div>
</div>

By finishing the two steps above, we’ve completed the structure part.. Your output will look something like this:

Doesn’t look like our final design? Don’t worry. In the next step, we use custom CSS to style and design our website.

Useful references

Step 1: Add custom CSS styling

Use the reference code to add styling or add your own custom styles.

Your result will look something like this:

On small screens or mobile:

On medium to large screen or PC:

Now that we've completed all our styling work at this stage, simply add JS functionality and then the project is ready to deploy.

You can build this project yourself! Start the project now.

Step 2: Create convert functions for all three units

It's time to create the functions that will convert our input degree to the desired unit. First, let's understand how this works.

Our function will take two arguments: input temperature value and output temperature unit type. The function will check the output unit type, apply the formula according to the output temperature unit type, and return the converted value.

Fahrenheit Converter ( °F ⇒ °C or K )

This function will only convert the Fahrenheit temperature value into Celsius or Kelvin. So whenever the user enters a °F value, we have to call this function. The reference code is shown below:

// Fahrenheit Converter
function fTo(inputDegreeValue, conversionDegreeType) {

    let temperature = '';

    switch (conversionDegreeType) {
        case 'F':
            temperature = inputDegreeValue;
            break;
        case 'C':
            temperature = eval((inputDegreeValue - 32) * (5 / 9));
            break;
        case 'K':

            temperature = eval((inputDegreeValue + 459.67) * (5 / 9));
            break;

    }
    return temperature;
}

Celsius Converter ( °C ⇒ °F or K )

This function will only convert the Celsius temperature value into Fahrenheit or Kelvin. So whenever the user enters a °C value, we have to call this function. The reference code is shown below:

// Celcius Converter

function cTo(inputDegreeValue, conversionDegreeType) {

    let temperature = '';

    switch (conversionDegreeType) {

        case 'C':
            temperature = inputDegreeValue;
            break;
        case 'F':
            temperature = eval((inputDegreeValue * (9 / 5)) + 32);
            break;
        case 'K':
            temperature = eval(inputDegreeValue + 273.15);
            break;

    }

    return temperature;
}

Kelvin Converter ( K ⇒ °F or °C )

This function will only convert Kelvin temperature value into Fahrenheit or Celsius. When a user enters a K value, we have to call this function. The reference code is shown below:

// Kelvin Converter

function kTo(inputDegreeValue, conversionDegreeType) {

let temperature = '';

switch (conversionDegreeType) {
    case 'K':
        temperature = inputDegreeValue;
        break;
    case 'F':
        temperature = eval((inputDegreeValue - 273.15) * (9 / 5) + 32);
        break;
    case 'C':
        temperature = eval((inputDegreeValue - 273.15));
        break;

}
return temperature;
}

Got stuck on the project? Find a Javascript expert here!

Step 3: Receive user input and send output on webpage

This is where DOM comes in. Whenever user click submit button, the output should appear in the results section. We'll do this by creating a function, convertInputDegree(). This function will take the user inputs, check the type of input degree unit, and call the function we created in step 2.

If the user has entered a Celsius degree unit and wants to convert it into Kelvin, the function will take the input degree value and input degree unit and call the cTo() function. Then the cTo() function will check the output unit type and returns the appropriate result. The result will be stored in a variable resultValue and the value will be pushed into the result section.

As we want the input value when user submit the form but default behavior of form after submit button is clicked to take the input values from user level to server level and page will be redirect to the current URL by appending the input values as query string parameters and value of the input field will revert back to 0.

That's why on form submission we are calling convertInputDegree() instead of it's default action.
```
// On Form submission prevent the default action and call the function to update the result

$('form').submit(function (event) {
    event.preventDefault(); // to prevent the default action
    convertInputDegree()
});
```

Create convertInputDegree() function to update results.

function convertInputDegree() {

    let inputDegree = parseInt($('#inputDegree').val());
    let selectInputDegreeType = $('#selectInputDegreeType').val();
    let conversionType = $('#selectConversionType').val();

    let resultValue = "";

    switch (selectInputDegreeType) {

        case "C":
            resultValue = cTo(inputDegree, conversionType);
            break;

        case "F":
            resultValue = fTo(inputDegree, conversionType);
            break;

        case "K":
            resultValue = kTo(inputDegree, conversionType);
            break;

    }

    // To prevent NaN
    if (isNaN(inputDegree)) {
        $('#convertedDegree').text('');
        return;
    }

    // To update the Degree Unit
    $('#convertedUnit').text(conversionType)

    // To update the Degree Value
    if (conversionType === selectInputDegreeType) {

        $('#convertedDegree').text(inputDegree);
    } else {

        return $('#convertedDegree').text(resultValue.toFixed(2));

    }

}

Got questions? Find a Javascript expert to help you.

Step 4: Update results in real-time

We’re almost finished building our temperature converter! However, there’s one but if the users have to click the submit button again and again, it will provide a bad user experience. We can fix this by updating the output value in real-time. To do this, we can call the function convertInputDegree() when users select a different input or output unit. The code should look like this:

// Realtime Update
$('#inputDegree').on('input', () => convertInputDegree());
$('#selectInputDegreeType').change(() => convertInputDegree());
$('#selectConversionType').change(() => convertInputDegree());

Result

Once we've completed all of the above steps, this is what the final preview will look like:

Want to build this project? Start building now!

Time to deploy

The last thing to do is to deploy the website using GitHub pages. In order to use GitHub pages, we have to make a GitHub repository for this project first.

1. Create a GitHub repository

Open your browser and go to https://github.com/ and make sure you're logged In.
Click on the + icon on the navbar in the top right corner:
Click on New repository in the drop-down box:
Enter the name of the repository, keep everything default, and click Create repository on the new page:
Our repository has been created. Copy the highlighted line to VSCode:

2. Initialize Git in your project

Open a new terminal in VSCode and type this command. This command will:

git init
git add .
git branch -M master
git commit -m "Your message"

Sync our online GitHub repository with local repository

git remote add origin https://github.com/karan-kmr/Temperature-unit-converter.git

Command to push or send your files to the online repository:
```
git push -u origin master
```
Refresh the GitHub repository page:

All of our project files have been pushed to our GitHub repo.

There are only two more steps to making our website live! 💪🏼

3. Setup GitHub Pages

Here are the steps to setup GitHub pages for your project:

Go to Settings
Scroll down and click on pages
Change branch from none to master
Click on Save button
Our site is live 🎉

If the steps above aren't clear enough, here's a video to help you out:

@Demo

Here is the Project Demo and Source Code.

Recap

Here are some of the things we created in this tutorial:

A full structure using Bootstrap classes.
A fully responsive website.
A temperature converter that allows users to cover from Fahrenheit, Celsius, and Kelvin to each other.
A website that updated the output in real time

Congratulations! 🎉 You've successfully created a temperature converter website.

9 Python Project Ideas From Beginners to Advanced

Christine Shu — Fri, 28 May 2021 09:53:24 +0000

If you are learning to code, chances are you might be learning Python. What are some ways that you are able to learn Python effectively and efficiently? Arguably, one of the best ways to learn a programming language is by practicing projects that have real world applications. By working on real projects, you’ll be able to analyze the problem and come up with your own code solution. It’s also a great way to build up your portfolio!

Here’s a list of Python projects from DevProjects to help you get started:

Beginner-level projects: You will need a basic understanding of Python fundamentals

RSS feed reader in terminal: Practice building a tool for fetching and converting the feed with a given RSS feed URL.
RSS feed reader website: Work with and become familiar with RSS feeds and practice how to parse XML.
Web scraper to get news article content: Build a simple web scraper using Python libraries to obtain web page content and select the elements you need on a web page.

Medium-level projects:

Medicine dose tracker web app: Build a web app with a simple UI to add medicine name, dosages, and frequency. Learn and practice using HTML/CSS, REST APIs, and connecting databases.
Weekly newsletter summary email: Create a serverless app to consolidate your email subscriptions into a single weekly summary email.
Background job system: Build a background system and practice writing concurrent programming.

Hard projects: These are for the advanced. Some of the projects require knowledge of other languages.

Favorite stocks watcher: Create an application that can monitor and share stock portfolios with Django and React frameworks and Python and JavaScript.
Plagiarism checker website: Build an automated solution that handles plagiarism detection with Flask and Bootstrap.
Online photo collage tool: Build a web app with completely separate front end, API, task queue, and optional storage components. Practice handling image inputs from users and processing basic image tasks asynchronously.

You can find more unique projects in other tech stacks on DevProjects. It’s a free community where users can learn programming by building projects. Our goal is to bridge the learning gap between theory and real-world code. Each project spec is uniquely designed by senior developers and is clear and limited in scope.

Check out DevProjects for more project ideas. If you are interested in being a project contributor, check out the page here.

👇🏼 Leave a comment below to let me know which project looks the most interesting to you!👇🏼