Eines der vielen frustrierenden Dinge bei der Webentwicklung ist, dass es nicht einfach ist, Ihre Projekte mit anderen zu teilen. In vielen Fällen müssen Sie Ihr Projekt auf einem Webserver hosten oder alle entsprechenden Dateien an jemanden senden, der sehen möchte, was Sie erstellt haben. Dank eines netten Online-Tools namens CodePen müssen Sie sich darüber keine Gedanken mehr machen.
CodePen.io
CodePen ist ein kostenloses Tool, mit dem Sie Ihre Projekte online hosten können, ohne jemals einen Cent bezahlen zu müssen. Wechseln Sie zunächst zu CodePen.io und erstellen Sie ein kostenloses Konto.
Sobald Sie dies getan haben, können Sie einen „Stift“ erstellen, indem Sie auf die Schaltfläche „Neuer Stift“ in der oberen rechten Ecke des Bildschirms klicken.
Danach können Sie HTML, CSS und JavaScript in die entsprechenden Felder einfügen. Sobald Sie Code hinzugefügt haben, wird eine Live-Vorschau der von Ihnen erstellten Elemente angezeigt. Sie können Ihren ersten Stift in der oberen linken Ecke betiteln. Nachdem Sie zum ersten Mal auf "Speichern" geklickt haben, können Sie die URL der Seite einfach an Freunde, Familienmitglieder und Kollegen weitergeben, damit diese sehen, woran Sie arbeiten.
So sieht Ihr Stift mit Code aus (mit freundlicher Genehmigung eines Free Code Camp-Projekts namens Tribute Page):
Wenn Sie Ihren eigenen Stift erstellen, sollten Sie die Einstellungen durchgehen, bevor Sie beginnen. Wenn Sie auf die Schaltfläche "Neuer Stift" klicken, sollte eine Stiftvorlage angezeigt werden, mit der Sie Code eingeben können. In der oberen rechten Ecke befindet sich eine Schaltfläche "Einstellungen". Klicken Sie darauf (der folgende Bildschirm sollte angezeigt werden).
Hier können Sie die Registerkarten HTML, CSS und JavaScript durchgehen, um bestimmte Informationen hinzuzufügen. Auf der Registerkarte "HTML" können Sie Metadaten hinzufügen, die in der Registerkarte "HTML" angezeigt werden sollen
Registerkarte und so weiter. Unter CSS können Sie CSS-Präprozessoren wie LESS und Sass hinzufügen. Darüber hinaus können Sie externes CSS wie Bootstrap und Foundation hinzufügen. Unter der Registerkarte JavaScript können Sie einen JavaScript-Präprozessor wie Babel oder CoffeeScript hinzufügen. Darüber hinaus können Sie externe JavaScript-Frameworks wie Angular, React, Lodash, D3 usw. hinzufügen.
Schließlich können Sie mit CodePen die angezeigte Ansicht ändern. Die Standardansicht ist die Editoransicht, in der Sie Ihren Code eingeben und in der Konsole unten eine kleine Vorschau anzeigen können. Es gibt aber auch andere Optionen. Besonders praktisch ist die Ansicht „Ganzseite“, in der Sie ein Projekt so sehen können, als wäre es live auf einer Website. Es gibt eine Handvoll anderer Ansichten, zu denen Sie wechseln können. Es lohnt sich, damit herumzuspielen!
CodePen ist wirklich ein nettes Werkzeug, und wir haben nur die Oberfläche seiner Nützlichkeit berührt. Es lohnt sich, zu CodePen.io zu wechseln und damit an einigen Projekten zu arbeiten. Wenn Sie Lust dazu haben, können Sie dies mit Ihren Freunden oder Kollegen teilen.
Was halten Sie von CodePen? Haben Sie ein ähnliches Tool verwendet? Lass es uns in den Kommentaren unten wissen!
