Cool web projects for beginners
/
Today’s post will be slightly different from our usual topic of helping startups, software teams and company culture. You gotta do something different sometimes, right? And this topic comes from a lot requests from CS students and fresher software engineers who wants to pick up a “hobby” project that'll teach them some interesting things. These projects are really important for freshers because:
Perfect thing to practice and improve coding skills
Great for playing with new technologies
Awesome thing to mention in the resume!
Plan on using an up and coming javascript library (e.g. ReactJS, etc.) or a new new library in your favorite programming platform. The goal should be to learn something new while doing a fun project. So here goes, our list of cool beginner projects.
The Image Manipulator
Every web developers need to become a guru in manipulating images. Any good web app these days rely on some kind of images tricks and gimmicks.
Features
The image manipulator can be a bunch of image operations tool. But the first feature to focus on should be image rotation. Here’s how the first version can be like:
It will start by displaying a square pane showing an image in a 2x2 matrix.
A set of up, down, left, and right arrows next to each of the images the user can flip them vertically or horizontally.
Challenge
You can only use native HTML, CSS, and Javascript. Image packages and libraries are not allowed.
Hints
The Book Finder (using an API)
The book finder is an application that lets users to search for a book. The user can type in any text such as the title or author of a book and the app will display the resulting books in a list on the page with small thumbnails of the books.
Features
The home page is a google like page with a search box where the user can enter any text.
When the user submits the search, the app will call an API (see below for possible candidates) that will return an array of books and show additional information about the books.
Challenge
Make the app a single page application (SPA).
Hints
Is there an Amazon one? Does Google books API give you thumbnails?
Memory - Card Game
Have you played this game with cards? It’s a card game where you have to click on a card to see what image is underneath it and try to find the matching image underneath the other cards.
Features
The app opens up with a home screen where the user can see a grid with n x n cards. All the cards are faced down initially
The user can click a button to start the game. When this button is clicked, a timer will start
User can click on any card to show the image it. The image will be displayed until the user clicks on a 2nd card.
When the User clicks on the 2nd card:
a. If there is a match, the 2 cards will be eliminated from the game.
b. If there isn’t a match, the 2 cards will flip back to their original state
c. When all the matches have been found, the User can see a dialog box showing a Congratulations message with a counter displaying the time it took to finish the game
Challenge
Only HTML, CSS and Javascript allowed.
Hint
History chart for GitHub
This project, a bit advanced but fun will provide a visual history of a users GitHub activity.
The goal is to produce a timeline containing each repo and annotated with the repo names, the date they were created, and their descriptions for a user of GitHub. This is a great great project for the resume since it can then be shared with a prospective employer. Of course, only public GitHub repos should be displayed.
Features
The app starts by taking in a GitHub user name
Then the user can click a ‘Generate’ button to create and display the named users repo timeline
There needs to be validations for wrong user names etc.
Challenge
Stick to HTML, CSS and Javascript if you can.
Hints
GitHub has two API’s to access repo data.
Documentation for the GitHub API can be found at:
