You can build all these projects within a week.

Source: UI Design Daily(CC License).

Having simple yet beautiful projects in your portfolio can significantly boost your chances to get hired.

When you have a working, mindful project, you have visual proof of what you are capable of and interviewers love that.

I will be listing out 4 amazing projects that will transform your portfolio and help you land your dream job.

Moreover, by the end of this article, not only will you know how to build these projects in under a week, but also be able to deploy it for free.

Before we continue, I would like to highlight that I will be covering the front-end projects first and then the back-end ones because you can use your front-end code and add a backend to it, thus reducing workload.

Let’s get started.

Project 1. Landing Page

Source: UI Design Daily(CC License).

Building an attractive landing page or redoing famous ones is an excellent project to demonstrate your knowledge of user-experience and accessibility.

But most importantly, it will also consume an API to collect user-provided data but more on that later.

This project is actually quite simple to build as well which should not take more than a few hours.

The main work in this project goes into styling the webpage’s HTML with CSS and using apt color schemes to create websites that are eye candy.

I highly suggest building a landing page that has a lot of images of nature or food. From the image above, you can see how well nature pictures can work as background.

Hence, my ideal choice would be building a travel agency or a restaurant page.

Now that we have decided who we are building a landing page, we can pick a high-resolution image from free sources such as Unsplash and Pexels and set it as background using CSS.

For inspiration, you can find 100+ landing page designs here.

For finding an appealing color palette, you can use Colorsinspo to find vibrant color schemes.

Another major aspect of building such a page is to allow users to provide their contact information to sign up for the service.

Fortunately, it is very easy. Using MailChimp API you can collect user data for free with just basic JavaScript and without any server code.

Project 2. Social Media Homepage

Source: UI Design Daily(CC License).

Building a beautiful and interactive home page of a social media page can make you truly stand-out especially if you are applying for a front-end role.

You can create multiple pages, which are required on any social media platform.

However since this is a front-end project, all data will be static and hence you should create at the most 2–3 static pages, and overall this project shouldn’t take more than 2 days to finish.

The main page, that is, index.html, should be the home page with the ability to navigate to the personal profile and a third page(which could be settings or a gallery page).

Feel free to draw inspiration from the image above.

Since the site is static, there is absolutely no need to use any front-end framework and this entire project can be accomplished using plain, old JavaScript.

Navigation using JavaScript is quite straightforward as well and can be accomplished in a single line of code- window.location.href="profile.html" where ‘profile.html’ is the page you want to load in the same directory.

Depending upon your skillset, you can go overboard with this project and add fluid animations and loading animations to create a realistic and immersive experience.

If you know SCSS, Bootstrap, or other such CSS preprocessors and framework, this project is a great way to showcase them.

On a side note, even though there is a vast pool of animations library such as Anime.js, I suggest you stick with CSS animations.

Project 3. Backend for Social Media

If you are applying for a full-stack developer role or a job that requires working on server-side code, having a robust backend with assorted functionalities such as authentication and database is a must.

You can use project #2 as the front-end template of this project.

However, I recommend mixing the colors and overall layout so that is not a duplicate copy of the project above.

To write a good backend with apt security, you must use a framework such as Node.js, Django, Laravel, etc.

Whichever framework you pick, make sure to follow the best practices.

Project #1 and #2 have covered your expertise with CSS and JavaScript respectively and this project provides you the ability to show your experience with a full-fledged framework.

If you are using a JavaScript framework, be sure to use the latest features such as arrow functions and other such modern practices.

For the database, using MongoDB seems like a popular choice. But if you want to have a much-more beginner-friendly database with a not-so-steep learning curve, you can try out Firebase.

Firebase provides an intuitive API to get you started quickly as discussed in their official guide.

The reason I have stressed on Firebase is that it provides you with access to authentication, real-time database, analytics, and much more.

Once you have initialized and setup the Firebase, you can easily make a call to API to store documents and perform other operations.

Below is a JavaScript snippet showing the API call but feel free to find the right code for your framework on their official documentation.

db.collection("users").add({
    first: "Ada",
    last: "Lovelace",
    born: 1815
})
.then(function(docRef) {
    console.log("Document written with ID: ", docRef.id);
})
.catch(function(error) {
    console.error("Error adding document: ", error);
});

Additionally, I recommend decoupling front-end and back-end using REST APIs.

This is because it will showcase your experience to work and build API and you can even integrate complex functionalities such as caching data, sanitization of user-input, and much more.

Depending on how complex and robust you want your backend to be, this project can take anywhere from 2 to 4 days to finish.

Project 4. Personal Portfolio Site

Source: UI Design Daily(CC License).

If you are a member of any tech community or group, this must be an obvious project for you.

A personal portfolio is a modern approach to showcase your experience and work. The best part about building your own portfolio is that you can make it however you like.

You can create smooth animations and beautiful timelines as well as add images and GIFs of your primary projects.

Depending upon your tastes and preferences, the portfolio can be multi-paged or a single-page website. Personally, I prefer a multi-page project with the main page having a little about me followed by my recent projects.

The other pages contain a contact me form and all my other projects.

List the programming language and framework used in the making of a project along with the project detail so that the interviewer has an easier time understanding your projects and the code behind them.

Besides this, I recommend listing out different projects on your main page.

You can list the projects I have discussed in this article at the top of the list since all these project use highlight different skills and tools.

Deploying your projects for free

Instead of just showing code to your project, it’s far better to deploy them and demonstrate your projects.

In today’s time, it is easier than ever to deploy your web applications.

You can choose from a wide array of services that host content for free, however, I will be writing about my 2 favorite and most used services to host personal projects.

For front-end projects that rely purely on HTML, CSS, and JavaScript, I use Netlify. Netlify has a free plan which I find is more than sufficient for hosting projects of such magnitude, plus it provides continuous deployment via Github.

One of the shortcomings of Netlify is that it can’t host NodeJS and other backend framework apps. This is where Heroku comes in.

Like Netlify, Heroku offers a free tier and also has a stable CLI for easy deployment. It supports more tools and languages than Netlify including all the popular frameworks.

You can deploy on these platforms for free and free tier restrictions shouldn’t bother your personal portfolio projects.

Conclusion

One of the perks of software development is that we can build applications that best highlight our skills directly to the employer.

Therefore, it is imperative to leverage this fact and build an all-around portfolio containing your best work.

Besides this, having a portfolio that stands out is important even to establish credibility which is crucial in freelancing.

The projects I have mentioned in this article cover different purpose and each of them are vital to creating a good impression.