Originally published at: https://www.sitepoint.com/first-dev-job-projects/
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.
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.
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.
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
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.
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.
4. Make a Currency Converter Using the Fixer API
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.
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.
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.
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.