Die 9 besten Websites zum Finden von HTML- und CSS-Projekten für Anfänger

Die Suche nach Webentwicklungsprojekten ist einfach, wenn Sie wissen, wonach Sie suchen. Aber oft beinhalten diese Projekte auch Javascript, was Sie vielleicht nicht wollen. Vielleicht sind Sie ein Anfänger und möchten sich einfach mehr auf das Webdesign als auf die Entwicklung konzentrieren? Hier sind einige Ressourcen, um HTML- und CSS-Projekte zu finden.

Beste Websites, um HTML- und CSS-Projekte zu finden

Beginnen wir mit der anfängerfreundlichsten Website.

1. Frontend-Mentor

Diese Website bietet eine Liste von Herausforderungen, die bei der Entwicklung verschiedener Designstile helfen sollen. Während einige der Herausforderungen Javascript erfordern, können Sie sie leicht erkennen, da es direkt unter dem Projektnamen erwähnt wird. Sie können die Ergebnisse so filtern, dass nur HTML- und CSS-Projekte angezeigt werden, wenn Sie danach suchen. Die Projekte sind in die Abschnitte Anfänger, Junior und Fortgeschrittene unterteilt, was es einfacher macht, ein Projekt entsprechend Ihrer Erfahrung auszuwählen.

Beim Öffnen des Projekts können Sie die Startdateien für Bilder und andere Designdetails herunterladen. Sie können das Projekt abschließen und an die Website senden, um auf die Projektdateien anderer Personen zuzugreifen. Die Analyse ihrer Arbeit zeigt Ihnen andere Möglichkeiten, sie zu vervollständigen und zu vervollständigen. HTML- und CSS-Projekte auf dieser Website fordern Sie nicht auf, eine bestimmte Methode zu verwenden, daher können Sie das Raster, die Flexbox oder sogar ein beliebiges CSS-Framework verwenden, wenn Sie dies bevorzugen.

Offen Frontend-Mentor

2. Frontend-Praxis

Während Frontend Mentor Projekte für mittlere Niveaus anbietet, bietet es fortgeschrittenere Projekte an. Der Dienst zeigt im Grunde eine Demo-Webseite von echten Websites an und möchte, dass Sie sie neu erstellen. Zum Beispiel die About-Seite von Ableton, die Belohnungsseite von Starbucks, die Veröffentlichungsseite des Monstercat-Albums usw.

Abgesehen von Details zur Farbpalette erhalten Sie zunächst keine Starterdateien. Sie werden gebeten, ähnliche Fotos im Internet zu finden oder sie direkt von der Demoseite herunterzuladen. Der Dienst stellt keinen Lösungscode bereit, aber Sie können die Webseite öffnen und die Entwicklertools des Browsers verwenden, um sie zu finden. Die beliebte HTML- und CSS-Projektseite enthält nur 10 einzigartige Projekte.

Offen Frontend-Praxis

3. Tägliche Benutzeroberfläche

Daily UI hat ein völlig anderes Konzept. Öffnen Sie die Website und melden Sie sich für den Newsletter an. Sie erhalten jeden Tag einen Newsletter mit Details zu dem Projekt, das Sie am selben Tag abschließen müssen. Sie erhalten bis zu 100 Projekte, aber nur an Wochentagen. Die tägliche UI-Herausforderung ist abgeschlossen, wenn Sie alle 100 Projekte abgeschlossen und eingereicht haben.

Das sind keine Großprojekte. Die meisten bitten Sie, einen Abschnitt auf einer Webseite zu erstellen, z. B. eine Preistabelle, eine Checkout-Seite, eine Rezeptkarte, ein Flugticket usw. zu erstellen.

Offen Tägliche Benutzeroberfläche

4. Codewell

Hier finden Sie nur etwa 25 CSS- und HTML-Projekte, die sich jedoch etwas von den anderen in der Liste unterscheiden. Das Erstellen eines Layouts für den Kommentarbereich, die Anmeldeseite, Dashboards, Social-Media-Feeds usw. sind beispielsweise einige der von Codewell aufgelisteten Projekte. Diese Projekte benötigen im Allgemeinen Javascript, aber Codewell fordert Sie nur auf, ein Layout zu erstellen. Das bedeutet, dass Ihre von Ihnen erstellten Anmeldeseiten und Dashboards nicht funktionieren müssen.

Die App hat auch ein Premium-Abonnement von 8 $/Monat. Das Premium-Abonnement schaltet Herausforderungen frei und zeigt auch Figma-Designdateien.

Offen Codewell

5. Dribbeln

Dribble ist ein Marktplatz, auf dem Sie als freiberuflicher Designer arbeiten können. Hier können Sie darüber nachdenken, einen Schritt nach vorne zu gehen und Geld zu verdienen. Dribble ist auch nicht nur etwas für Webdesigner. Sie finden alle Arten von Designern wie Grafikdesigner, Video-Editoren, Modedesigner, Fotografen, Illustrationen und mehr. Aber Webdesign ist ein wichtiger Teil der Plattform, auf der Sie viele Jobs finden werden. Obwohl einige fortgeschrittene Designs Javascript erfordern, können Sie kleine Gigs in Anspruch nehmen, für deren Erstellung nur HTML und CSS erforderlich sind.

Es ist auch eine Art Social-Media-Plattform für Webentwickler. Viele Leute laden ihre Designs einfach in ihre Profile hoch. Sie können Ihr eigenes Design erstellen und auch hochladen oder einfach die bereits veröffentlichten Designs zum Üben nachbilden.

Offen Dribbeln

6. Behance

Behance ist wie Dribble für alle Arten von Designern. Genau wie Dribble finden Sie auch Jobs im Bereich Jobs und Projekte im Bereich Entdecken. Was Behance einzigartig macht, ist seine Filteroption. Sie können Ihre Suche eingrenzen, um nur Webdesigns, Projekte nur mit HTML und CSS anzuzeigen, eine Farbe auswählen, um Projekte in einer bestimmten Farbe zu entwerfen, einen Standort auswählen, um Projekte von einem bestimmten Standort aus einzureichen usw.

Einige Projekte enthalten auch Quelldateien, sodass Sie den Code dieses Projekts zur Analyse auschecken können.

Offen Behance

7. CSS-Kampf

CSS Battle ist die perfekte Website, wenn Sie versuchen, ein Profi im CSS-Design zu werden. Der Dienst stellt ein Ziel bereit und Sie müssen Ihre HTML- und CSS-Kenntnisse einsetzen, um eine Ausgabe zu liefern, die genauso aussieht wie die Quelle. Im Gegensatz zu anderen HTML- und CSS-Sites entwerfen Sie hier keine Tabellen oder Layouts, sondern erhalten einen Symbolstil oder ein abstraktes, kunstähnliches Design als Ziel. Die Regeln sind einfach, Sie sollten kein Javascript verwenden, keine Bilder anzeigen und mit möglichst wenig Code das Zieldesign erreichen.

Derjenige, der das Ziel mit dem wenigsten Code erreicht, wird in der Rangliste weiter oben stehen. Sie müssen keinen Code-Editor verwenden, die App bietet einen Online-Editor, der Ihnen die Ausgabe in Echtzeit anzeigt. Wenn Sie der Meinung sind, dass Ihre Ausgabe genau wie das Ziel aussieht, klicken Sie auf die Schaltfläche „Senden“, um die Punktzahl zu überprüfen.

Offen CSS-Kampf

8. Pinterest

Pinterest ist eine großartige Möglichkeit, Bilder von Webdesigns zu finden und zu sammeln. Hier erhalten Sie möglicherweise nicht den Quellcode oder herunterladbare Dateien, aber Sie haben eine schiere Anzahl von Designs zur Auswahl. Suchen Sie einfach nach Webdesign und Sie sollten viele Ergebnisse finden, die Sie in Projekte umwandeln können. Die Empfehlungsmaschine von Pinterest wird die Suchergebnisse in Zukunft besser auf Ihre Interessen zuschneiden.

Abgesehen von Designs ist es auch eine großartige Plattform, um Tipps zur Webentwicklung, Infografiken, Vorschläge usw. zu finden.

Offen Webdesigns auf Pinterest

9. Youtube

Während die meisten Dienste Projekte einfach als Herausforderung mit dem Quellcode auflisten, gibt es bei YouTube hingegen jede Menge Tutorials zur Verwendung von HTML und CSS. Suchen Sie einfach in der YouTube-Suche nach HTML- und CSS-Projekten, um loszulegen.

Die meisten Projekte bieten auch den Link zum Quellcode und stellen Ihnen Startdateien für Bilder zur Verfügung. Da es sich um Tutorials handelt, sind sie eine großartige Option für Anfänger, die während des Lernens programmieren möchten. Auch die Tipps und Taktiken in der Mitte werden auf lange Sicht nützlich sein.

Offen HTML- und CSS-Projekte in YouTube

HTML- und CSS-Spielplatz

Als angehender Programmierer sollten Sie Google als Ihren besten Freund betrachten. Eine schnelle Google-Suche nach HTML- und CSS-Projekten bringt Ihnen also viele Projekte von verschiedenen Websites. Unnötig zu erwähnen, dass Sie auch beliebte Websites wie YouTube, Apple, Tesla, Amazon, Netflix, Starbucks usw. oder jede Website, die Ihrer Meinung nach ein tolles Design hat, neu erstellen können. Jedenfalls haben Sie heutzutage die Möglichkeit, Websites ohne Verwendung von Code zu erstellen.