10 Projects to Get You to Your First Dev Job in 2020

.gitignore 3D accessibility accessible headings ad banner ad revenue ad revenues adobe XD Advanced advanced-css-tools advanced-css-tutorials AdvancedCSS AdvancedCSS-hub agency Agile Agile Development ai Ajax Alex Skill Kit Alexa Alexa skill AlexW Amazon Alexa amazon developer analytics Angelap angular AngularJS Animation anime.js ANN api apollo Appsflyer architecture ARIA aria attributes array methods artificial neural network Async async components AurelioD automation Avocode AWS AWS Lambda axios b2b b2c baas background background eraser tool Banner banner ad Bannersnack bash bash commands bawmedia bem bitcoin black friday Blogs bootstrap bot browser testing Browsers build process bundler Business business success C Canvas & SVG career Career Advancement CDN Chakra UI charting chat app chatbots ChatKit chrome chrome developer tools chrome extension chrome extensions chromium ciphering cli cli tools climate climate action clip-path clojure cloning Cloud cloud hosting CloudFlare Cloudways cms CNN code challenge ColinI collaboration collaboration tools color contrast committing changes compiler components conflicts const assertions constructs content content delivery network content organization context api convoluted neural network create react app cron job cross browser testing cross platform development cross-browser cryptocurrencies cryptocurrency CSS CSS Animations CSS Architecture css blur css challenge css framework css frameworks css grid css layout css master css modules CSS print css rem css typography CSS-in-JS CSS3 css3 transforms cssbattle.dev D3.js data science data visualization database databases debugging decoupled cms deep linking delay Design Design & UX design career design handoff Detox dev environment dev job developer job developer tools DevOps devtools diagnostic analytics digit recognition digital agency digitalocean Discord discounts django Docker Docker Containers drag & drop dropzone.js E-commerce ECMAScript edge computing editor elastic em units employment encryption end-to-end testing energy energy usage Entrepreneur Entrepreneurship environment erasing backgrounds es6 ES6 classes eslint Expo Express FaaS face detection face recognition fast wordpress themes Feathers Feathers.js figma flask flatfile flexible wordpress theme forking form validation forms tutorial framework Frameworks freelancing functional programming functions gatsby generators geolocation get organized getting a job GIPHY git git branching git lfs git merging gitCS github github API Google Photos GraphCMS graphing graphql Growth Grunt grunt-watch Gulp hapi haskell headless CMS hide and show page elements hooks hosting HTML HTML & CSS html preprocessor HTML5 HTML5 Dev Center HTML5 Tutorials & Articles https://www.sitepoint.com/windows-linux-subsystem-2-windows-terminal IAAS IDE Illustration image optimization immutability Interview ionic IP2Location ipdata jade jamesh JavaScript javascript framework javascript frameworks javascript tooling Jest job job hunting job interview joelf jQuery jQuery functions jquery get url params jquery string functions jQuery.each() jQuery.each() Array Example jquery4u js js framework JS tooling Keras keycdn kubernetes lambdatest launch checklist Layout learn javascript learn typescript learn-advanced-css learn-modernjs Learn-Node-JS learn-vue Let's Encrypt Lift linux linux containers location tracking LouisL machine learning Managed managed hosting managing remotes mariap marvel MATLAB MBaaS mekanism mental health merging mind map mind mapping mindmapping Mobile mobile attribution Mobile Design modern css modernjs modernjs-hub modernjs-tools modernjs-tutorials modules moment.js monday mongodb MTCNN multi-threading mvc mysql MySQL install natural language processing Navigation navigation library nest Next.js nginx nilsonj no-code node node version manager node-hub Node-JS-Tools Node-JS-Tutorials node-mysql module Node.js NodeGui nodejs noops nosql npm nvm objects octobercms Offers on-premise online publishing organize organize files PaaS Package Management package manager pair programming pairing patrickc pause Percy Performance Photography & Imagery Photoshop Photoshop Tutorials & Articles pip pipeline portfolio portfolio builders preprocessors prettier print styles Prisma Private Class Fields product design Productivity productivity tips Profitability Programming programming job projects PubNub Pug Puppeteer Pusher python python framework python interview python job Quasar query strings quick-tip quiz quote builders r Raw JavaScript React react components React Hooks React Hooks Form React native React-Tools reactive Reactive Programming reactive web apps read offline Reat native elements Recurring Payments recursive types RedBox redux rem units remote job remote work remote work tips remote working removing backgrounds resilient Resources responsive REST restful api Review SaaS sampling sass Scss self sencha Sequelize server server-side serverless serverless computing shared hosting sharing state sharpen shell shell commands side project siteground sketch slashdata sleep Software software commits sorting sourcetree specifications speech recognition speech recognition api sponsored sql ssl Stack Overflow Startups state state management static module bundler StudioWorks Styled Components styling React components survey sustainability svelte sympli Tailwind task runner telegram bots Template engine Testing text to speech Themes Tic Tac Toe Tinder toggle Tolerance tooling tooling anxiety tools Tools & Libraries transformations TypeScript typescript skills Ubuntu UI UI Design Usability user experience user research UX ux issues vanilla javascript VGGFace2 virtual machine visual testing voice recognition vps vue Vue CLI vue dev environment vue-hub vue-tutorials vue.js vuetify vuex wait WatermelonDB Web Web Design web hosting Web Hosting & Domains Web standards web workers webpack website builders website performance WebSockets windows windows 10 home Windows Subsystem for Linux Windows Terminal wix women women in tech WordPress wordpress plugin wordpress themes WordPress theming work workers workflow working remotely workplaces WPEngine WSL WSL2 YellowBox Zeplin zsh zsh command zsh plugin zsh tools

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.

Original Article

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.