10 Projects to Get You to Your First Dev Job in 2020
For those of you looking to break into the world of web development with your first dev job, the amount of things you are expected to know can be overwhelming: HTML, CSS, JavaScript, version control, build tools, frameworks, the command line. The list goes on …
But never fear! In this post, I’d like to offer you a little guidance by outlining ten skills that will help you land your first dev job in 2020. For each skill, I’ll suggest a hands-on side project idea to get you started and point you to appropriate resources in the SitePoint library for further reading.
Let’s dive in.
1. Get to Know Your Code Editor
As a coder, you’re going to be spending a lot of time in your editor of choice. That’s why you should make the effort to learn what it can do and how to configure it properly. The subject of which editor to use can quickly become controversial, but if you’re just starting out, I would encourage you to check out VS Code (or VSCodium if you care about privacy).
VS Code ships with a lot of cool features, such as Emmet abbreviations, intellisense, various keyboard shortcuts and Git integration. There are also hundreds (if not thousands) of extensions that you can install to customize your workflow.
Project Idea
Install VS Code on your machine and commit to using it. Spend some time researching popular extensions for your language of choice and install at least three of these. You should also install Prettier and configure it to format your code on save, as well as ESLint, which will display JavaScript linting errors in VS Code’s console. For bonus points, you can print out the keyboard shortcut reference sheet for your platform and attempt to memorize two or three shortcuts per week.
Further Reading
By way of a reference, I would recommend Visual Studio Code: End-to-End Editing and Debugging Tools for Web Developers. This up-to-date guide covers all of the essential VS Code components, including the editing features of the workspace, advanced functionality such as code refactoring and key binding, and integration with Grunt, Gulp, npm, and other external tools. Chapter Two, which introduces you to the user interface, and Chapter Nine, on working with extensions, should be of particular interest.
2. Build a Contact Form
If you’re building a web application, it’s only a matter of time until you encounter HTML forms. They’re a big part of the web experience, and they can be complicated. For example, you need to make them accessible, and you need to make sure they render well on different browsers and smaller screens. It can also be a challenge to style them consistently without breaking their usability.
Forms are a critical part of a visitor’s journey on your site. Even if your visitor is sold on what you have to offer, a broken or even a badly laid out form could be enough for them to abandon ship. That means you lose the conversion.
Project Idea
Build and style a contact form. Concentrate on the alignment of the form fields, a prominent CTA, and make sure the form previews well across browsers and devices. Try to include various form controls, such as <select> elements and check boxes, while keeping the layout simple and elegant.
You might also like to upload your finished form to CodePen, an online community for testing and showcasing user-created HTML, CSS and JavaScript code snippets. When applying for a job, a well-curated CodePen account could potentially serve as a mini portfolio.
Further Reading
Form Design Patterns offers ten recipes for different kinds of forms — registration forms, booking forms, login forms and more. Learn from the pros and find out how to make your forms both engaging and accessible to all. If you’re looking for a quick start with this project, I recommend reading the first part of the first chapter, which covers things such as labels, placeholders, styling and input types.
3. Become Acquainted with Client-side Validation
You won’t get far as a web developer in 2020 without knowing JavaScript: it’s one of the most popular programming languages in the world and, frankly, a must-have skill.
On the front end it’s used for a wide variety of tasks, such as making interactive elements for web pages (sliders, maps, charts, menus, chat widgets, etc.) and generally enhancing the user experience. One rather nice feature of the language is that it can manipulate the DOM, to offer users instant feedback on an action without needing to reload the page. This makes web pages feel snappier and more responsive.
Project Idea
In this project, you should take the contact form you built in step two and augment it with client-side validation.
Using the correct input types will get you a lot of the way there, but also try to add some custom validation. You should display error messages in an intuitive way and avoid using alert boxes. And if all that sounds a bit too easy, why not add a field which asks a question to ensure that the user isn’t a bot.
Further Reading
If you’re new to the world of JavaScript programming, or would just like a quick and easy desk reference, then check out JavaScript: Novice to Ninja, 2nd Edition. This step-by-step introduction to coding in JavaScript will show you how to solve real-world problems and develop richer web applications. You’ll want to pay particular attention to Chapter Eight, which shows you how to use JavaScript to interact with an HTML form.
4. Make a Currency Converter Using the Fixer API
In the past, JavaScript had a reputation as being a toy language — good for menus and animations, but not a lot else. And while that might have been the case in the early 2000s, in 2020 nothing could be further from the truth.
Nowadays, entire apps are written in JavaScript. New tools and frameworks are introduced and developed at a rapid rate, and the language itself has undergone big changes since the arrival of ES2015 (aka ES6). It’s important you stay abreast of these changes, and have a good idea of what JavaScript is capable of and where it fits into the web development picture as a whole.
Project Idea
Make an app that allows users to convert one currency to another. Users should enter an amount, select the actual currency, select the desired currency and then the app should fetch the exchange rate from the Fixer API. The user interface should be updated dynamically without any kind of page refresh.
Use modern JavaScript features where you can. Complete the project using either vanilla JavaScript, or a library like React to handle the UI updates.
Further Reading
JavaScript: Best Practice is a collection of articles which take a look at modern JavaScript and how the language has evolved to allow you to write clean, maintainable, and reusable code. I would recommend reading the “Anatomy of a Modern JavaScript Application”, “Using Modern JavaScript Syntax” and “Flow Control in Modern JavaScript”.
5. Design Your Own Portfolio Website
In your career as a web developer, you’ll likely find yourself working alongside a designer on the same project. And while design and development can be considered separate disciplines, having a firm grasp of the design process will ease that relationship and stand you in good stead with your colleagues.
Or perhaps you want to go it alone as a freelancer, taking projects from design to deployment. In this case, a generic-looking website won’t cut it. You’ll need to offer the client an eye-catching but also highly functional design that helps them achieve their business goals.
Project Idea
Design your own portfolio website — your place on the internet to present yourself and showcase your skills. Spend some time researching what makes a good portfolio design, then mock up a design of your own either with pencil and paper, or using a wireframing tool of your choice.
Design-wise, pay attention to the layout, the colors you’ll use, and the typography. Content-wise, consider which pages you’ll need (hint: you could include a contact form) and how to present both yourself and your work. There are lots of sites around the Internet that will give you tips on what to include.
Further Reading
Ok, I get it. Design is hard. But it doesn’t need to be …
The Principles of Beautiful Web Design is a fantastic book if you’re struggling with the design process. It will walk you through an example design, from concept to completion, teaching you a host of practical skills along the way.
Start in Chapter One by reading about what makes good design and take it from there. Personally, I read the book from cover to cover in a week, but you could also dip into the other chapters and learn about layout, color, texture, typography, and imagery at your leisure.
6. Code Your Own Portfolio Website
JavaScript isn’t the only technology that’s evolving rapidly; there are changes aplenty in the world of CSS, too. Advances in the language mean that we can now easily make complicated layouts, declare variables in our CSS code, create animations, apply CSS conditionally (using @supports) and more — things that, in the past, we’d have resorted to hacks (or JavaScript) to achieve.
If you’re writing CSS in 2020, you should be aware of all of these modern techniques and when to use them — especially Flexbox and CSS Grid for creating layouts. You should also have a grasp of modern CSS tooling (such as Houdini), pre-processors and the abundance frameworks that we have at our disposal.
Project Idea
In the previous project, you designed your portfolio website. Now it’s time to get your hands dirty and code it. Use modern CSS to lay out the site and take time to research some of the more recently introduced measurement units, such as vw and vh. These will come in very handy if, for example, you want to include a fullscreen splash image.
Also, include the contact form that you created previously and use CSS to add a couple of minimal animations. For example, you could animate the Send button when the user hovers over or clicks it.
Further Reading
CSS Master, 2nd Edition shows you how to write better, more efficient CSS, and to take advantage of the plethora of the new cutting-edge CSS features available to the front-end developer. You’ll also learn to master tools that will improve your workflow.
Pay particular attention to Chapter Five that will help you create complex layouts using the recently introduced multicolumn, Flexbox, and Grid modules.
7. Performance Matters! Audit Your Site With Lighthouse
Nowadays there’s little excuse for a sluggish website. People are impatient. No one wants to wait 15 seconds for your high-definition images to load. Your users just want to get straight to your content.
And even if things seem OK for you, don’t forget how the other half lives. Not everyone has a high-end MacBook pro with a 100Gbit Ethernet connection. Many of your visitors will browse your site on a smartphone, possibly on a flaky 3G network. It’s your job as the web developer to provide all of your visitors with the best possible experience their technology will allow.
Project Idea
Google Chrome ships with a fantastic tool called Lighthouse, which runs audits against a page for performance, accessibility, best practices and SEO. It will offer you a variety of tips on how to address any issues it finds.
You should run this tool against your newly created portfolio site and do your best to make sure that each category is in the green. Lighthouse will allow you to generate reports for both the mobile and desktop versions of your site. You should check both of these.
If you haven’t created a portfolio site, run it against a different site that you own.
Further Reading
The practical, short book Jump Start Web Performance provides advice, tips, and best practice for improving the performance and responsiveness of your site. These range from quick, five-minute configuration changes to major website overhauls. It goes into some detail on running audits with Lighthouse, as well as the Chrome DevTools in general. Later chapters of the book will be useful for addressing any problems that the audits highlight.
8. Get to Know Your Terminal
As web developers, the command line is becoming an ever more important part of our workflow. We use it to install packages from npm, to test API endpoints, to push commits to GitHub, and lots more besides. If you can demonstrate familiarity with the command line to a prospective employer, that will doubtless boost your chances.
Another advantage of being able to use the terminal is that it opens the door to scripting. This will allow you to automate various mundane tasks (such as file manipulation, or deploying a site), which, in the long run, could prove to be a real time-saver.
Project Idea
Install and familiarize yourself with the Bash shell. This will come as standard on macOS and a lot of Linux distros. On Windows, you’ll need to enable something called Windows subsystem for Linux, which you can read about here.
Commit to using Bash for a whole week and use it to perform any tasks you can. These could include navigating your file system, working with files, editing files, reading logs, launching services, or installing programs. You should also investigate aliases, which are shortcuts for commonly used commands.
Tip: if you already feel comfy with Bash, you might like to try out Zsh as an alternative. I go into that here.
Further Reading
If leaving the comfort of your GUI has you feeling out of sorts, have a look at the Bash Quick Start Guide. This book will give you a thorough introduction to Bash, familiarize you with its command structure and quickly get you up to speed with some essential commands.
For the brave of heart, later chapters of the book introduce you to shell scripting and demonstrate how even simple programming constructs in the shell can speed up and automate any kind of daily command-line work.
9. Put Your Projects Under Version Control
Now that we have some terminal knowledge under our belts, it’s time to look at Git — version control software used for tracking changes in source code during development. Thanks to its branching feature, Git makes it easy for multiple people to collaborate on a project. It also makes it a doddle for you to roll your code back to a previous state if you realize you’ve unwittingly introduced a bug.
Practically any position you apply for will expect you to know version control. Now’s a good time to acquire that knowledge.
Project Idea
Install Git on your machine and familiarize yourself with its basic commands. Put the currency converter app that you created in project four under version control, then create a GitHub account and upload it for the world to see (from the command line, of course).
For those that are unfamiliar with GitHub, it’s a web-based platform where developers can store their projects and interact with other like-minded developers. When you come to apply for jobs, it will be advantageous to have a GitHub account you can point potential employers towards.
Further Reading
Aimed at beginner-level developers with little or no Git experience, Jump Start Git will walk you through getting set up, as well as the basic commands and steps that comprise a successful Git workflow.
Be sure to check out Chapter Two, which covers remote repositories and how to push your code to GitHub.
10. Build Your First Node App
As I alluded to before, JavaScript is everywhere. It powers most, if not all, front-end applications, but it can also run on the server in the guise of Node.js. Having at least some knowledge of how to write JavaScript on the server (including Node’s execution model) is a desirable skill when entering today’s job market.
Project Idea
We’re going to take a slightly different tack with this one, as I’d like to point you towards my tutorial “Build a Simple Beginner App with Node, Bootstrap and MongoDB”.
Starting from the ground up, I demonstrate how to build a no-frills web app using Node.js, but instead of focusing on the end result, I focus on a range of things you’re likely to encounter when building a real-world app. These include routing, templating, dealing with forms, interacting with a database and even basic authentication.
For this project you should follow along with my tutorial, adapting the end result to suit your needs. You should also keep your code under version control and push it to your GitHub profile.
Further Reading
Not so much reading, as a resource: the SitePoint forums. This is a potentially tricky project to tackle, so if you get stuck, please feel free to drop by and ask for help.
Conclusion
So there you have it — ten skills that will help you land your first dev job in 2020. While not exhaustive, I hope this post goes some way to help you orient yourself in the ever-changing world of web development and gives you some idea of what to learn next.
And don’t forget, reading tutorials is great, but there’s no substitution for actually building stuff. Your next employer will be more impressed by an active GitHub account than a list of what you’ve read.