4 Websites mit praktischen HTML- und CSS-Projekten für Anfänger

Die zentralen Thesen

• Die Überwindung der Tutorial-Hölle in HTML und CSS ist durch praktische Anwendungs- und Projektentwicklung möglich. Plattformen wie Codewell bieten Designvorlagen, Quellcode und Assets für die Erstellung realer Projekte.
• devChallenges bietet eine Reihe realer Codierungsherausforderungen für Anfänger und erfahrene Entwickler. Es bietet Wege mit unterschiedlichen Schwierigkeitsgraden und für die Bewältigung der Herausforderungen erhalten Sie Zertifikate für Ihr Portfolio.
• Frontend Mentor ist eine beliebte Plattform, die Frontend-Herausforderungen gepaart mit professionellen Webdesigns bietet. Es verfügt über eine unterstützende Community und bietet Ressourcen zur Verbesserung Ihres Lernens. Sie können Ihrem Portfolio Herausforderungen hinzufügen, um die Jobchancen zu erhöhen.

Die Tutorial-Hölle ist ein Problem, auf das Sie möglicherweise stoßen, wenn Sie mit dem Erlernen von HTML und CSS beginnen. Das Ertrinken in einem Meer von Tutorials kann Sie abschrecken und möglicherweise Ihren Webentwicklungsfortschritt behindern. Der einfachste Weg, dies zu überwinden, besteht darin, sich auf der Grundlage des Gelernten an der praktischen Anwendung und Projektentwicklung zu beteiligen.

Die Websites auf dieser Liste bieten reale HTML- und CSS-Projekte. Sie stellen Designvorlagen, Quellcode und Assets zum Erstellen von Projekten mit HTML und CSS bereit.

Codewell bietet eine Reihe von Herausforderungen, die Ihnen dabei helfen sollen, Ihre Fähigkeiten in HTML, CSS, JavaScript und responsivem Webdesign zu üben und zu verbessern. Diese Herausforderungen gibt es in zwei Kategorien: kostenlos und Premium.

Mit der kostenlosen Option erhalten Sie Zugriff auf Starterdateien mit Assets, eine Readme-Datei mit Informationen zur Herausforderung und PNG-Designdateien für die Desktop-, Tablet- und Mobilansicht. Wenn Sie sich für die Premium-Mitgliedschaft entscheiden, erweitern Sie Ihre Vorteile, einschließlich aller Funktionen des kostenlosen Kontingents sowie einer zusätzlichen Figma-Vorlage.

Wenn Sie die Herausforderung abgeschlossen und Ihre Lösung eingereicht haben, können Sie auf der Website Feedback erhalten. Um eine Lösung einzureichen, müssen Sie einen Link zum GitHub-Repo und zur Live-Vorschau bereitstellen. Erstellen eines GitHub-Repositorys und das Hosten Ihrer Lösung auf GitHub-Seiten sind zusätzliche, wertvolle Fähigkeiten. Sie können auch Lösungen sehen, die andere Personen eingereicht haben.

Zu den Herausforderungen bei Codewell gehören Landingpages, Anmeldeseiten und Dashboards. Dies sind alles einsteigerfreundliche Projekte.

devChallenges hilft Ihnen beim Erlernen des Programmierens durch Übung und bereitet Sie gleichzeitig auf einen Tag im Leben als Entwickler vor. Es bietet eine Reihe von Herausforderungen im Zusammenhang mit realen Projekten, die sowohl Anfängern als auch erfahrenen Entwicklern offen stehen.

Es gibt kostenlose und kostenpflichtige Pläne, aus denen Sie wählen können. Der kostenpflichtige Plan beinhaltet Pro und Premium. Mit der kostenlosen Option erhalten Sie Zugriff auf die Grundfunktionen und einige Herausforderungen. Die letztere Option bietet Ihnen Vorteile wie Zugriff auf Premium-Herausforderungen, Figma-Design und einen Leitfaden zum Abstand der Herausforderungen.

Die Plattform gruppiert Herausforderungen in Pfade, die jeweils auf unterschiedliche Fähigkeiten wie HTML und CSS mit unterschiedlichen Schwierigkeitsgraden abzielen. Sobald Sie die Herausforderungen auf einem Weg gemeistert haben, erhalten Sie ein Zertifikat, das Sie in Ihr Portfolio aufnehmen können.

devChallenges verfügt über eine Editorseite, auf der Sie die Besonderheiten der Herausforderung anzeigen können, einschließlich Schriftarten, Farben, Ansichtsfensterbilder, Rasteranzeige und Asset-Downloads. Die heruntergeladene Datei enthält nur die Bilder, die Sie benötigen.

Es gibt auch eine Bestenliste, damit Sie beim Training konkurrenzfähig werden können. Die Plattform fördert das Engagement der Community und ermutigt Sie, Ihre Lösungen zu teilen. Es bietet Unterstützung und Sie können im Abschnitt „Lösungen“ von anderen Benutzern lernen.

Wie bei Codewell müssen Sie einen Link zu Ihrer Demo und Ihrem Repository bereitstellen, um Ihre Lösungen einzureichen. Die Benutzeroberfläche ist benutzerfreundlich, sodass Sie problemlos darin navigieren können.

Frontend Mentor ist dank seiner vielen Vorteile die beliebteste Wahl unter den Plattformen in dieser Liste. Es zeichnet sich dadurch aus, dass es eine große Auswahl an Front-End-Herausforderungen gepaart mit professionellen Webdesigns bietet. Die Plattform fördert außerdem eine lebendige und unterstützende Community von Webentwicklern.

Wie andere Plattformen bietet Frontend Mentor sowohl kostenlose als auch kostenpflichtige Optionen. Mit der kostenlosen Version haben Sie Zugriff auf grundlegende Funktionen und die meisten Herausforderungen, während Sie mit der kostenpflichtigen Version auf Premium-Herausforderungen, Figma-Designdateien und mehr zugreifen können.

Die Herausforderungen lassen sich in drei Hauptgruppen einteilen: Typ, Schwierigkeitsgrad und Sprachen. Unter Sprachen können Sie auf Herausforderungen zugreifen, für deren Bewältigung nur HTML und CSS erforderlich sind.

Jede Herausforderung gewährt Zugriff auf eine Starterdatei mit zahlreichen Ressourcen, darunter HTML-Quellcode, eine Readme-Datei, einen Styleguide, Layoutbilder für Desktops und Mobilgeräte und mehr. Wenn Sie Ihre Lösung einreichen, haben Sie die Möglichkeit, Fragen an die Community einzureichen. Insbesondere können Sie die Lösungen anderer Personen erst anzeigen, nachdem Sie Ihre eigenen eingereicht haben.

Frontend Mentor verwendet ein Punktesystem, um Sie zum Abschließen von Herausforderungen zu ermutigen. Sie können alle Ihre abgeschlossenen Projekte zu einem hinzufügen Portfolio, um sich für Jobchancen zu positionieren.

Was Frontend Mentor wirklich auszeichnet, ist seine Ressourcenseite, die über 15 Zweige mit Webentwicklungsmaterialien enthält. Jedes enthält eine kuratierte Liste von Ressourcen, aus denen Sie auswählen können, sodass Sie alles lernen können, was Sie jemals zum Üben benötigen.

Schließlich bietet Frontend Mentor zweimal im Monat Herausforderungen an, sodass es immer etwas gibt, an dem man arbeiten kann.

Frontend Practice unterscheidet sich in mehreren Punkten von den anderen Plattformen. Erstens gibt es keine Herausforderungen; Stattdessen werden Projekte angeboten. Bei diesen Projekten handelt es sich um echte Websites von echten Unternehmen, die Sie nachbauen werden. Sie benötigen auch kein Konto, um diese Projekte auszuprobieren.

Zunächst einmal wird kein Quellcode bereitgestellt. Stattdessen enthält die Projektbeschreibung externe Links für Foto-Assets und Icons, einen Link zum Live Website, ein Referenzbild, Farbpaletten und eine kuratierte Liste der Ressourcen, die Sie zum Vervollständigen benötigen Projekt. Darüber hinaus erhalten Sie eine Liste der Konzepte, die Sie durch den Abschluss des Projekts erlernen, sowie Hinweise auf Schwierigkeitsgrade, die Sie verwenden können.

Die Plattform bietet drei Schwierigkeitsstufen, aber als Anfänger liegt Ihr Hauptaugenmerk auf der ersten Stufe. Hier können Sie HTML, CSS, Reaktionsfähigkeit, Animation und mehr üben. Darüber hinaus haben Sie die Erlaubnis, die Projekte in Ihr Portfolio aufzunehmen, sofern Sie sich an eine einzige auf der Website angegebene Regel halten.

Frontend Practice ist eine ausgezeichnete Wahl, wenn Sie Ihre Fähigkeiten verbessern möchten, indem Sie vorhandene Websites neu erstellen und bei Null anfangen, um Ihre HTML-Kenntnisse zu üben.

Alle diese Plattformen zusammen bieten Ihnen genügend Inhalte, die Sie jederzeit nutzen können Erstellen Ihres Entwicklerportfolios. Während Sie üben, können Sie Verbesserungen vornehmen und neue Konzepte verstehen, was Ihr Selbstvertrauen stärkt und Ihnen hilft, die Tutorial-Hölle zu meistern.

Verfeinern Sie Ihre HTML- und CSS-Kenntnisse durch Übung

Die Tutorial-Hölle wird eine Herausforderung sein, aber Sie können sie mit etwas Übung meistern. Die Möglichkeiten sind wirklich endlos und alles beginnt mit dem ersten Schritt. Indem Sie sich gestalteten Herausforderungen und realen Projekten stellen, nutzen Sie Ihre HTML- und CSS-Kenntnisse und erweitern diese.

Unabhängig davon, für welchen Weg Sie sich entscheiden, begeben Sie sich auf eine Reise des Wachstums und der Entwicklung und verbessern Ihre Fähigkeiten Fähigkeiten und stärken Sie dabei Ihr Selbstvertrauen, nutzen Sie den praktischen Ansatz, erstellen, lernen und blühen