Es ist immer aufregend, wenn man zum ersten Mal versucht, eine neue Fähigkeit zu erlernen. Vor allem beim Programmieren.
Wenn man jedoch keine Übung hat, vergisst man das meiste, was man lernt. Deshalb merkt man irgendwann, dass man das, was man gelernt hat, üben muss. Sonst vergisst man alles.
Da kommen die Projekte ins Spiel. Projekte sind eine gute Möglichkeit, das Gelernte zu üben. Und glauben Sie mir, Sie wollen an einigen Projekten arbeiten. Sie können die Projekte nutzen, um zu zeigen, woran Sie gearbeitet haben.
Als Neuling kann es entmutigend sein, Projekte auszuwählen, die Ihrem derzeitigen Wissensstand entsprechen. Man wählt vielleicht ein Projekt. Dann wird das Projekt zu groß, um es mit Ihrem derzeitigen Know-how zu bewältigen. Zumindest ist es das, was ich auf meiner Lernreise durchgemacht habe.
Ich habe einige Projekte zusammengestellt, die ich gefunden habe und die auch dann geeignet sind, wenn Ihre Kenntnisse nur auf HTML und CSS beschränkt sind. Diese Projekte sind auf beliebten Lern-Websites verfügbar, wo Sie zusätzliche Informationen darüber finden, was Sie in Angriff nehmen werden.
1. Eine Huldigungsseite
Schreiben Sie eine Huldigung für jemanden, den Sie bewundern, und veröffentlichen Sie sie als Webseite. Bei diesem Projekt müssen Sie Bilder, Links, Listen und Absätze einfügen. Für die Erstellung dieses Projekts sind HTML-Kenntnisse erforderlich. Du kannst jedoch ein wenig CSS verwenden, um das Projekt besser aussehen zu lassen.
2. Ein Umfrageformular
Formulare sind nützlich, um online Daten zu sammeln. In diesem Projekt werden vor allem Ihre Kenntnisse über alle Arten von Eingaben getestet. Es wird Ihr Wissen über Formulare und die Strukturierung Ihrer Webseite testen. Das Formular muss keine Daten übermitteln.
Es ist ein Aufbau aus der Tribute-Seite. Dieses Projekt erfordert Kenntnisse in html/html5, um es zu erstellen.
3. Erstellen einer Produkt-Landing-Page
Dieses Projekt wird Ihre Kenntnisse in HTML und CSS testen. Sie müssen üben, Spalten zu erstellen und Elemente innerhalb der Spalten auszurichten. Sie müssen auch grundlegende Bearbeitungen von Bildern vornehmen, z.B. Zuschneiden und Ändern der Größe, um perfekte Bilder für Ihre Webseite zu erstellen.
Sie benötigen solide Kenntnisse in HTML/CSS.
4. Erstellen einer technischen Dokumentationsseite
Dies erfordert einige Kenntnisse in HTML/CSS und Bootstrap oder JavaScript. Die Grundidee ist: Wenn man auf ein Thema auf der linken Seite klickt, wird der Inhalt auf der rechten Seite geladen.
Ich versuche gerade, dieses Projekt zu erstellen und werde das fertige Projekt posten, sobald es fertig ist.
5. Erstellen Sie eine persönliche Portfolio-Webseite
Sie werden alle Fähigkeiten, die Sie in HTML und CSS gelernt haben, anwenden. Sie müssen auch wissen, wie man Bilder zuschneidet und in der Größe verändert. Wenn Sie keine Möglichkeiten haben, verwenden Sie Gimp. Es ist kostenlos, quelloffen und für Windows und Linux verfügbar.
Wenn Sie es eilig haben, ein Portfolio zu erstellen, können Sie Brians Artikel über die Erstellung eines Online-Portfolios mit einem vorgefertigten Thema/einer Vorlage lesen.
6. google.com Seite
Ja, Sie haben es schon oft gesehen. Aber können Sie es nachmachen? Die einfache Seite von google.com mit Symbolen, dem Logo von google, einem Textfeld und zwei Schaltflächen. Sie können eine ähnliche Seite wie die von google.com erstellen. In diesem Projekt machen Sie es wie google.com aussehen, nicht wie google.com funktionieren.
Sie müssen sowohl HTML und CSS wissen.
7. google.com Suchergebnisseite
Sie werden eine Seite mit dem Format eines google Suchergebnisses erstellen. Ihre Seite sollte die normalen 10 Ergebnisse und die Navigation zu den nächsten Seiten am unteren Rand enthalten.
Dies ist eine Erweiterung der obigen einfachen google.com-Seite. Allerdings sollten Sie in der Lage sein, einige der Code auf diesem Projekt wiederverwenden.
Auch, machen die Seite sollte etwas aussehen, aber die Funktionalität sollte nicht ein Anliegen jetzt sein.
Abschluss
Wenn Sie suchen, um die Grundlagen von HTML zu lernen, können Sie meine kurze Einführungslektion in HTML Check-out.
Haben Sie ein grundlegendes Projekt, während Sie lernen, HTML und CSS machen? Wenn ja, teilen Sie sie unten mit und helfen Sie anderen Lernenden, „einfache“, aber anspruchsvolle Ideen zum Ausprobieren zu finden.