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 project to get you started and point you to appropriate resources on SitePoint Premium 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 on 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, so as 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 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 the course of a week, but you could also dip into the other chapters and learn about layout, color, texture, typography and imagery at your leisure.

The post 10 Projects to Get You to Your First Dev Job in 2020 appeared first on SitePoint.