Fun Projects to Improve Your Dev Skills

No Images? Click here

Hey there!

If you've been looking for a more engaging, practical way to learn or improve your skills, then our project tutorials are ideal. They allow you to piece together ideas, principles and techniques, without having to dig through hours of boring documentation. Plus, they give you a gratifying result (and often usable code) at the end of it, that you can apply to your work!

To inspire your learning, we've highlighted some of the fun projects found in books throughout our library. Take a look below!

Projects to help improve your skills:

Create a Tinder Clone Using React Native Elements and Expo

In this tutorial, we’ll be cloning the most famous dating app, Tinder. We’ll then learn about a UI framework called React Native Elements, which makes styling React Native apps easy. Since this is just going to be a layout tutorial, we’ll be using Expo, as it makes setting things up easy.

Redesign a Card-based Tumblr Layout with CSS Grid​

In this tutorial we're going to re-implement a grid-based design concept inspired by a Tumblr page. You'll learn how to structure it, design the spaces, manage cards and more.

Build a Game with Vue.js​

Utilize your JavaScript skills to build a game in Vue.js. Manage components, multiple states and rules.

Create a Static Website with Hugo

Learn to use Hugo, a static site generator (SSG) written in Go. Hugo boasts rich features, is very quick thanks to Go, and has lots of third-party themes, an active community, and detailed documentation.

Redesign a Site to Use CSS Grid Layout​

Forget about table layouts and floats – a new way to design websites is already here! You'll see CSS Grid in action by creating a responsive multi-column website layout.

Build a Full-screen Bootstrap Carousel with Random Initial Image

Build two simple extensions for the Bootstrap carousel. First, you'll create a full-screen Bootstrap Carousel slideshow, and then you'll see how to randomize the first slide on page load.

Create a to-do list in React

Use two libraries (Redux and ImmutableJS) to create a simple to-do list in React. You'll learn how to easily create components and manage states.

Make a chat app with Vue.js and Pusher.

Build a real-time chat application using Vue.js powered by ChatKit. The ChatKit service will provide us with a complete back end necessary for building a chat application on any device, leaving us to focus on building a front-end user interface.

Build a real time chat app with Node.js and Sails.js​

Learn the fundamentals of Sails.js, by building a simple, user-friendly chat application.

Create data visualisations with D3

In this project, we'll take you through data sources, building charts, utilising SVGs and more to get you working with D3 in a couple of hours.

Build a validated form with Vue.js​

Learn how to work with forms in Vue. We’ll start off by creating a simple form and look at how to use two-way data binding to keep user input in sync with our data model. We’ll then take a look at modifiers and filters, and finish off with validation. Each section has a runnable CodePen demo.

Build a Shopping List App with Vue, Vuex and Bootstrap Vue​

Build a simple shopping list app using Vue, Vuex and Bootstrap. Along the way, you'll discover how Vue's official state management solution can help you manage state throughout your app as it grows.

Create a Beautiful Chart Using Vue.js Wrappers for Chart.js

Learn how to represent data in the form of various types of chart with the help of Chart.js and Vue.js.

Want access to all these projects? Join SitePoint Premium for just $9/m and you'll get access to 350+ books and courses full of projects!

Happy learning!
SitePoint Team