3 Steps to Successfully Completing Your First Coding Project
Throughout the pandemic, you’ve probably been asked by family or friends: “How can I pick up coding?” Or you yourself have asked, “I should learn to code. How do you actually get started?”
The short answer is projects and mindset. Most coders, formally educated or self-taught, will tell you that while it’s critical to also know the terms and concepts — which can be picked up from online reading, classes, YouTube — the working knowledge they use on the day-to-day came when they dived into a project.
How the “Learn-to-Code” Market Child-Proofs Your Path (Badly)
Even though your kid wants to explore, you still “child-proof” your home to make sure that your child is safe and can have a challenging, yet rewarding time going down the stairs or bumping into the couch — or whatever it is that children do. In the same way, it’s important to set up the “playground/sandbox” for individuals who want to get into coding.
Unfortunately, while many online courses do impart valuable knowledge to learners, many suffer from an approach to “child-proofing” that uses step-by-step assignments that leave learners bored and confused as to why they are learning the topic at hand. This method of “child-proofing” is still needed given that these courses are online and provide the flexibility to learners to begin them at any point in time.
Nevertheless, this approach creates no real exhilaration or reward when you complete the chapter/project — it’s like building the playground as a guided parental experience, where you are hand-held at each small obstacle artificially created in a sanitized environment.
Child-Proofing AND Learning By Doing
In this article, I’ll lay out a way to child-proof and still get that feeling of exhilaration when you finish a project. This approach relies not on child-proofing the features of the playground itself, but rather helping you build a mindset as to how you should approach the playground.
Your ability to match your own interests and goals with the projects you pursue correlates to the likelihood of that project’s completion and the satisfaction you gain from completing it.
Understanding how to troubleshoot, where to look when you have questions, and proactively engaging in communities — online or in-person — for when you’re stumped also helps guarantee the success of your project as well as the efficiency of your ability to learn.
In this article, I’ll lay out a “strategize, evaluate, then dive head-first” approach to: 1) choosing your first project; 2) a step-by-step breakdown of one of my recent side projects (screenshot below).
The Basics: Choose a Project, Dip Your Toes In
The real challenge is not learning to code — the challenge is choosing, managing and following through with a project.
A couple months ago, I gave a talk on: Starting Your Own Coding Projects This Summer to students in the greater DC metropolitan area. The tl;dr version is:
- Think about what interests you — if a project topic doesn’t hold your interest, you won’t complete it.
- Understand why you want to undertake a project — “I wanna learn how to code” won’t cut it. What would you make, what would you want to do if you became proficient in coding? Research tells us that if you write it down on a piece of paper you are 1.2 to 1.4 times more likely to actually do it.
- Talk with your friends about your ideas — it’s better to brainstorm with others than in a silo. And if possible, find someone around you that you can always go to if you’re stuck. Getting stuck — really stuck — while learning by doing is tough; always have a mentor or friend. If no one is in your personal network, the communities on Medium and Stack Overflow are your allies.
- Once you’ve created this foundation, read through awesome lists on Github, scroll through sensors on Adafruit or other maker sites, explore links from Reddit threads or Medium like this Python wiki or this thread. Then, match these specific projects and open source code with your own goals and interests.
What we’ve effectively done is: 1) Created a solid foundation by matching your personal interests/goals with the project you make. 2) Created an in-person support network to bounce ideas and troubleshoot. 3) Limited the scope of your project to manageable levels — many of the open source projects that you will see online will not be sprawling enterprise-level code, but instead will accomplish only one or a few things, meaning they will help limit the imaginations of ambitious first-time coders to what is feasible.
Once You Have a Project: 3 No-Nonsense Steps
I had a project in mind. It was manageable, had a specific goal, and I knew I had to work with some Javascript to get there. The goal was to make Scrumptious —a Kanban dashboard that pops up when you open a new tab on your browser — save tasks across devices. Here are the steps to get there.
Hint: While the following contains code to copy and paste. Look at the tips themselves. It’s all about your mindset and the resources you surround yourself with.
1. Research & Chat With a Friend(s)
After reading up on building Chrome extensions and getting the gist of how they work and their constraints, I reached out to my friend Uros Randelovic, a full stack developer. We agreed that the best way of going about it, even before digging into the weeds of Chrome’s storage API/localStorage, we should post to the extension’s Github repo.
While we waited for a response on the repo, I also began looking into other Kanban productivity platforms, and found Quire, which mirrored Scrumptious in usage, had a great mobile app, and rocked in the simple-yet-powerful department. However, it was missing the vibe of Scrumptious.
2. Gather Tools and Build
For a quick project like this, our goal was to get a functional version out-the-door ASAP to use on a daily basis. For that, I found TamperMonkey, a userscript manager (you can read more about it here and here) that lets us inject small snippets of JavaScript code to change the behavior of a website.
By googling “CSS edit Tampermonkey,” I found this post: How to Edit CSS Within Tampermonkey.
// add additional css styling to the page
function addGlobalStyle(css) {
var head, style;
head = document.getElementsByTagName('head')[0];
if (!head) { return; }
style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = css;
head.appendChild(style);
}// add specific css snippets to inject here
addGlobalStyle('body { color: white; }');
That code snippet was the base for my Quire appearance edits.
Using the Tampermonkey default template and by playing with the CSS within Quire (learn how to inspect and edit elements on a site here), I added global variables for the specific dashboard to activate these CSS snippets on and the image to use as a background. The full code that you can copy into Tampermonkey for your own Quire dashboard is here, sectioned for readability.
Default settings that come at the start of every Tampermonkey script:
// ==UserScript==
// @name Quire Pretty
// @namespace http://tampermonkey.net/
// @version 0.1
// @description Make Quire like scrumptious
// @author T
// @match https://quire.io/w/to_do_/415/task?board=Kanban&filter=all
// @grant none
// ==/UserScript==Set the two global variables needed: the photo you’d like to use for the background and the Quire project (found in your quire.io url) that this applies to.
var url_in = 'https://images.unsplash.com/photo-1560861293-84835c7b92e7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1267&q=80';
var parent_section = /to_do/;// set background to your image
(function () {
if (parent_section.test(window.location.href)) {
if (window.getComputedStyle(document.body, null).getPropertyValue("background-color") == "rgb(255, 255, 255)") {
console.log("Setting new background color...");
document.body.setAttribute("style", `background-image: url(${url_in});background-size: cover;`);
}
} else {
console.log('not the page');
}
})();
Inject the css snippets into the site.
// add css styles into the page
function addGlobalStyle(css) {
var head, style;
head = document.getElementsByTagName('head')[0];
if (!head) { return; }
style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = css;
head.appendChild(style);
};Set your CSS edits below.
// css injections below
// tab header transparency
addGlobalStyle('.board-status-header { background-color: #796c6c00 !important; border-color: #ededed00 !important ; box-shadow: none !important}');
// status name
addGlobalStyle('.status-name { color: #ffffff !important; }');
// tabs
addGlobalStyle('.board-status-body { border-style: hidden; !important ; background-color: #fff0 !important; border-color: #ededed00 !important}');
// card color
addGlobalStyle('.task-card-row { background-color: #282829a8 !important; border-color: #ededed00 !important ; border-radius: 12px !important ;}');
addGlobalStyle('.task-card-content { color: #ffffff !important; }');
addGlobalStyle('.board .list-card-item.selected>.task-card-row { border-color: #b3f4ffc7 !important; }');
// hide header
addGlobalStyle('.header-wrap.navbar.navbar-default { max-height: 0px !important; }');
addGlobalStyle('#header { visibility: hidden !important; }');
// text edit box
addGlobalStyle('.task-input { background-color: #69696900 !important; color: #ffffff !important; border-radius: 6px; }');
// pull everything up
addGlobalStyle('#wrap { padding-top: 40px !important;}');3. Troubleshooting Along the Way
While my daily work revolves around AI and 90% Python, 10% other coding languages (e.g. C/C++), I haven’t really touched JavaScript before. One issue I ran into was adding the image url as a global variable. After some Googling, I asked Uros Randelovic, who suggested I look into backticks — makes sense… learned something new, ok… onto the next thing. Syntax of JavaScript functions? Mozilla to the rescue. Always search precise questions before broadening out, and if you’re really stumped, ask a friend or post on Stack Overflow ASAP so you can reach that next hurdle to work through faster.
Quick Takeaways
Unlike many “dive into coding” articles out there, I’m advocating for a strategize, evaluate, then dive head-first approach to coding. The Quire+Tampermonkey project is extremely quick and you might argue that it’s not even close to being a full app — in fact, it’s just a fancy skin.
However, is it a waste of time? I argue no. The goal of this approach is to maximize the project completion rate of first-time coders, expose them to coding 101s that we take for granted (e.g. how to troubleshoot an issue and what to search for), and help them explore why they would want to code and the feeling of success afterwards when they can click through what they’ve made.
For non-coders, it’s important to note how this project was laid out. It’s equally important to set defined project goals as it is to go with the flow. If you’re simply “learning to code,” there is no goalposts, only horizon. The fluidity between self-learning through Google and Stack Overflow and engaging with people more knowledgeable than you — whether it be posting on the Github repo or asking a friend for advice — is important as well.
For coders, think of this approach as a video game tutorial that lets a user navigate themselves through a training course while still feeling very empowered when they complete the training area. One of the most important skills to pick up in coding is problem solving, and the only way to get there is through trial and error — why not make the trial and error sandbox winnable and rewarding?
This article was coauthored by Theo G and Uros Randelovic
About Theo: Founder of Basil Labs, a big data consumer intelligence startup that helps organizations quantify where consumers go and what they value.
About Uros: Full-stack developer architecting massive payments systems by day and making web apps with React and Node by night.
Passionate about making computer science and data science more accessible. For more articles, find me on medium.
