Front-End-Schulungsaufgaben: Doodle-Place, Apple Podcasts, Site Blocker, Parsen von CSV-Dateien

Doodle-Place-Klon



Bild



Doodle-Place ist eine Online-Welt voller animierter Doodles. Sie können herumwandern und Kritzeleien anzeigen, die von Benutzern auf der ganzen Welt erstellt wurden, oder Beiträge leisten.



Was wirst du lernen, wenn du einen Klon von Doodle-Place machst:



  • Verwenden der Canvas-API in JavaScript zum Zeichnen von Grafiken wie Kritzeleien auf dem Bildschirm.
  • Techniken zum Arbeiten mit 2D-Grafiken und der WebGL-API
  • Arbeiten Sie mit Benutzereingaben wie Bildern und speichern Sie die Ergebnisse in einer Datenbank.


Analysieren von CSV-Dateien in JSON



Diese Anwendung verwendet d3-dsv (clientseitig) zum Parsen von CSV-Dateien. d3-dsv ist ein Dienstprogramm, das in d3 (einer beliebten Datenvisualisierungsbibliothek) enthalten ist, aber wie hier gezeigt auch für sich allein verwendet werden kann.



Bild



Was lernen Sie, wenn Sie einen CSV-zu-JSON-Parser erstellen?





Site Blocking Extension Clone



Site Blocker ist eine Web-Erweiterung, mit der Sie eine oder mehrere Sites durch Hinzufügen eines Domainnamens blockieren können. Verwalten Sie Ihre Zeit effektiv ohne Ablenkungen.



Bild



Was Sie durch das Erstellen eines "Site Blocker" -Klons lernen werden:



  • Alles, was Sie zum Erstellen von Browsererweiterungen benötigen
  • JavaScript, HTML und CSS zum Erstellen von Erweiterungen.
  • Arbeiten mit Erweiterungsseiten in Chrome / Firefox / Safari.


Klon-Begriff



Notion ist eine leichte, schnelle und ablenkungsfreie Notiz-App und mehr. Ich benutze es, um meine Aufgaben und Ideen zu verfolgen. Was ich an Notion liebe, ist die Unterstützung der Markdown-Markup-Sprache.



Es gibt keine Einschränkungen: Sie können eine Desktop-Version von Notion sowie eine Mobil- oder Webversion erstellen. Wählen Sie Ihre Lieblingsumgebung (oder die, die Sie am meisten erkunden möchten).



Bild



Was Sie lernen werden, wenn Sie einen Notion-Klon erstellen:



  • Wenn Sie weiterkommen möchten, verwenden Sie Grid in CSS . Das Raster eignet sich hervorragend zum Erstellen von Layouts.
  • Arbeiten mit einer Datenbank. Sie möchten Ihre Notizen in einer Datenbank speichern, die Sie später abfragen können.
  • DevOps. Wenn Sie fertig sind, stellen Sie die App im Web oder im App Store bereit. Zeigen Sie der Welt, was Sie getan haben.


Apple Podcast Clone



Die Podcasts- App für iOS und macOS bietet über die Navigationssymbole am unteren Rand der App einfachen Zugriff auf beliebte und aufkommende Podcasts.



Bild



Was Sie beim Erstellen eines Podcast-Klons lernen werden:



  • So erhalten Sie Daten von der API. Bei dieser Anwendung werden die Daten durch Podcasts dargestellt. Verwenden Sie diese API , um alle Podcasts abzurufen.
  • So entwickeln Sie eine Desktop-App für Mac OS oder eine iOS-App und stellen sie in einem App Store bereit. Wenn Sie gerne für das Web bauen, ist das auch großartig!
  • Erstellen nativer Schnittstellen. Sie lernen beispielsweise, wie Sie Daten auf dem Bildschirm anzeigen.


Bild


Erfahren Sie, wie Sie einen begehrten Beruf von Grund auf neu erlernen oder Ihre Fähigkeiten und Ihr Gehalt verbessern können, indem Sie bezahlte Online-Kurse von SkillFactory absolvieren:












All Articles