Learning one of the many languages of the net is an amazing experience, it opens doors to untold possibility and a greater understanding and appreciation for those sites we aimlessly click on to.
So you have read the books and taken the online coding courses or maybe you have joined a coding bootcamp and you know the syntax and the inner workings…..in theory… now its time to put the skills to use and there is no better way to learn what you don’t know than to do it and learn along the way.
But where do you start? What do you build?
Creating a simple CRUD application is great practice, I have put together a list of projects you can build to test yourself and grow as a developer, I used a mix of Ruby on Rails, JavaScript and React to create these projects but the idea is the same across all the languages.
Remember!
Start at the beginning and build up layer by layer. Don’t add ever feature you want to have working eventually, before you have anything on your page, this will just end up confusing you and your code.
I hope this helps get your creative juices flowing.
Build a simple book app
You can use The NYTimes books API or GoogleBooks API or you can easily use a portion of the API data to create your own JSON file to work with. Feel free to use my practice data HERE.
Render the books to the page. Show the title, author, book cover, price etc.
- Allow the user to edit a book.
- Allow the user to add a new book.
- Allow the user to delete a book.
- Add a sort function to organise the books by: name, price, author etc.
- Then have some fun with CSS, check out this started guide to CSS HERE
Shopping
Nice and simple but great practice. Don’t let its outwardly simple look fool you.
- Allow the user to add an item to their cart.
- Assign that item a price.
- Render that item to the page to show the cart.
- Keep a running total cost.
- Allow the user to checkout, this will empty their cart and show all items purchased with total cost.
THE CALCULATOR
Another simple looking app but a must when practicing. There is more happening behind the scenes here than you may think.
- Have input boxes for the users to type in their numbers.
- Have buttons for the maths operators.
- Think about how you can tell which maths operation the user wants to use and how do you stop them form selecting multiple operators and breaking your code?
- Add an equals button that renders the answer to the page.
- Add CSS to highlight the chosen operator.
The Timer
This is great for practising your event handlers!
- Allow the user to start the timer when they click or hit the space bar.
- Allow the user to stop the timer when the same key is pressed again.
- Print the time to the page.
- Go further and have two separate event listeners, one to start and stop the timer and one to add in a ‘lap’ this will print the time at that moment to the screen but the timer will continue.
- Think about when you want the timer to reset, will you add another button for this?
Hogwarts
This is another chance to practice your full CRUD and pay with that CSS!
There is a great Harry Potter API available HERE or again please feel free to use my practice data below:
Render the characters to the page.
- Add a like button to allow the user to like a characters and see the likes to up.
- Allow a user to add a new character and have them render to the page.
- Allow the user to delete unwanted characters.
- Apply some sort functions to allow the user to sort by house, name, likes or if they are staff or students.
- Add a search bar to allow a user to search for a certain character.
- Play with CSS!
TV Guide
If you are quite comfortable with the first few ideas lets add another layer to things.
- Using TV Maze API render shows to the page. Think about how many shows to render at once. Look at your styling and play with CSS.
- Allow a user to click on a show to get more information about it. Remember they will want to click back too.
- Allow a user to sort the shows alphabetically.
- Allow a user to search for a certain show. Read the API docs as this is a different link with a different format. You will need to look carefully at your code.
- Allow users to add shows to their own personal list, have a back end of db.json file for your user to add, update and delete shows.
- The API has show times and days. Can you create a calender to show whats on next?
- Have fun!
CSS is often forgotten about when we are learning to code, It can be a lot to take in without adding CSS on top but I would strongly recommend you start playing with CSS as early as possible. Adding a little styling here and there will help solidify your knowledge of the language and lets be honest it also makes our sites a lot more impressive to look at and so fun to work on.
Resources:
- Public API’s — Find a great list of public API’s you can use to create your own masterpieces.
- Images — Finding images can be time consuming when you are supposed to be learning to code, find free to use images at Unsplash or ThisPersonDoesNotExist.com
- Text — Need text fast? Lorum Ipsum is rather dull but it does the job. Find it HERE.
- Fake Data — For all other fake data needs Faker is great!
I hope this helps get your going, please add comments below with links to the projects you have made!
