Front-end training tasks: doodle-place, Apple Podcasts, Site Blocker, parsing CSV files

Doodle-place clone



image



doodle-place is an online world populated with animated doodles. You can wander around and view doodles created by users all over the world, or contribute.



What will you learn by making a clone of doodle-place:



  • Using the Canvas API in JavaScript to draw graphics like doodles on the screen.
  • Techniques for working with 2D graphics and the WebGL API
  • Work with user input, such as pictures, and store the results in a database.


Parsing CSV files to JSON



This application uses d3-dsv (client side) to parse CSV files. d3-dsv is a utility included with d3 (a popular data visualization library), but can also be used by itself, as shown here.



image



What will you learn by creating a CSV to JSON parser.





Site blocking extension clone



Site Blocker is a web extension that allows you to block one or more sites by adding a domain name. Manage your time effectively without distractions.



image



What you will learn by building a "Site Blocker" clone:



  • Everything you need to create browser extensions
  • JavaScript, HTML and CSS for building extensions.
  • Working with extension sites in Chrome / Firefox / Safari.


Clone Notion



Notion is a lightweight, fast and distraction-free note-taking app and more. I use it to keep track of my tasks and ideas. What I love about Notion is its support for the Markdown markup language.



There are no restrictions: you can create a desktop version of Notion, as well as a mobile or web version. Pick your favorite environment (or the one you want to explore the most).



image



What you will learn by creating a Notion clone:



  • If you want to get ahead, use Grid in CSS . Grid is fantastic for creating layouts.
  • Working with a database. You will want to store your notes in a database that you can query later.
  • DevOps. Once you're done, deploy the app to the web or app store. Show the world what you have done.


Apple Podcast Clone



The Podcasts app for iOS and macOS provides easy access to popular and emerging podcasts using the navigation icons at the bottom of the app.



image



What you will learn by creating a Podcast clone:



  • How to get data from API. In the case of this application, the data is represented by podcasts. Use this API to get all podcasts.
  • How to develop a desktop app for Mac OS or an iOS app and deploy it to an app store. If you like building for the web, that's great too!
  • Building native interfaces. For example, you will learn how to display data on the screen.


image


Learn the details of how to get a sought-after profession from scratch or Level Up in skills and salary by completing SkillFactory paid online courses:












All Articles