Codieren lernen ist immer spannend und macht jedem Spaß, und wenn es darum geht, in die Welt der Programmierung einzusteigen, beginnen die meisten Leute mit dem Einfachsten, HTML und CSS. Die Reise eines jeden Anfängers in der Frontend-Programmierung beginnt mit diesen beiden grundlegenden Bausteinen und man muss kreativ sein, wenn es darum geht, eine schöne Anwendung zu entwerfen.
Anfänglich haben Anfänger Spaß daran, Schaltflächen zu erstellen, Links hinzuzufügen, Bilder hinzuzufügen, mit dem Layout zu arbeiten und eine Menge cooler Sachen im Webdesign zu machen, aber wenn es darum geht, ein Projekt nur mit HTML und CSS zu erstellen, bleiben sie stecken und sind verwirrt darüber, was sie machen sollen, um all diese Sachen zu üben. Schließlich ist ihr Wissen nur auf HTML und CSS beschränkt. Wie auch immer, nachdem man alles gelernt hat, wird man irgendwann erkennen, dass es wichtig ist, ein Projekt zu erstellen, um HTML- und CSS-Kenntnisse zu üben. Sie müssen überprüfen, wie HTML und CSS zusammenarbeiten, um eine schöne Frontend-Anwendung zu entwerfen. Die Frage ist also, welche anfängerfreundlichen Projekte Sie erstellen können, um alles, was Sie gelernt haben, zu üben…Lassen Sie uns darüber sprechen.
Eine Gedenkseite
Die einfachste Website, die Sie als Anfänger erstellen können, ist eine Gedenkseite für jemanden, den Sie in Ihrem Leben bewundern. Sie erfordert nur Grundkenntnisse in HTML und CSS. Erstellen Sie eine Webseite, auf der Sie über diese Person schreiben und ihr Bild hinzufügen. Fügen Sie oben auf der Seite das Bild und den Namen der Person ein und geben Sie darunter ein Layout für den Rest der Details. Sie können Absätze, Listen, Links und Bilder mit CSS verwenden, um der Seite ein ansprechendes Aussehen zu geben. Fügen Sie eine geeignete Hintergrundfarbe und Schriftart auf Ihrer Webseite hinzu. Die meisten Teile können Sie mit HTML erstellen, aber um ein besseres Aussehen zu erreichen, sollten Sie ein wenig CSS verwenden. Nehmen Sie die Hilfe des unten angegebenen Links in Anspruch.
- My Tribute Page
- Tribute Page to Steve Jobs
- Tribute Page to Albert Einstein
Webpage Including Form
Formulare sind immer ein wesentlicher Bestandteil eines jeden Projekts und Sie werden in den meisten Anwendungen mit vielen Formularen arbeiten, warum also nicht vorher üben und Ihr Wissen testen. Sobald Sie sich mit dem Eingabefeld oder den grundlegenden Tags in HTML vertraut gemacht haben, um ein Formular zu erstellen, erstellen Sie ein Projekt mit all diesen Tags. Wie man ein Textfeld, ein Kontrollkästchen, ein Optionsfeld, ein Datum und andere wichtige Elemente in einem einzigen Formular verwendet. Sie werden lernen, wie man eine Webseite richtig strukturiert, indem man ein Formular erstellt. HTML/HTML5-Kenntnisse sind gut genug, aber Sie können auch ein wenig CSS verwenden, um das Projekt besser aussehen zu lassen. Nehmen Sie Hilfe von den unten angegebenen Links.
- Umfrageformular
- Good Vibes Formular
- Umfrageformular
Parallax Website
Eine Parallax Website beinhaltet feste Bilder im Hintergrund, die Sie an Ort und Stelle halten können und Sie können die Seite nach unten scrollen, um verschiedene Teile des Bildes zu sehen. Mit Grundkenntnissen in HTML und CSS können Sie einer Website einen Parallaxen-Effekt verleihen. Die Verwendung des Parallaxen-Effekts in der Webgestaltung ist sehr beliebt und verleiht der Webseite ein schönes Aussehen und Gefühl. Probieren Sie es aus und unterteilen Sie die gesamte Seite in drei bis vier verschiedene Abschnitte. Legen Sie 3-4 Hintergrundbilder fest, richten Sie den Text für die verschiedenen Abschnitte aus, legen Sie Rand und Polsterung fest, fügen Sie background-position und andere CSS-Elemente und Eigenschaften hinzu, um einen Parallax-Effekt zu erzeugen. Sie können die Hilfe von Parallax Website.
Landing Page
Eine Landing Page ist ein weiteres gutes Projekt, das Sie mit HTML und CSS erstellen können, aber es erfordert ein solides Wissen über diese beiden Bausteine. Bei der Erstellung einer Landing Page werden Sie viel Kreativität an den Tag legen. Sie werden üben, wie man Kopf- und Fußzeilen hinzufügt, Spalten erstellt, Elemente ausrichtet, die Abschnitte unterteilt und vieles mehr. Sie müssen CSS sorgfältig einsetzen und darauf achten, dass sich die verschiedenen Elemente nicht überschneiden. Sie werden sich auch um Farbkombinationen, Auffüllungen, Ränder, Abstände zwischen Abschnitten, Absätzen und Boxen kümmern. Die Farbkombinationen für verschiedene Abschnitte oder Hintergründe sollten gut zueinander passen. Sie können sich von dem unten angegebenen Link helfen lassen.
- Full Screen Landing
- Landing Page
Restaurant Website
Zeigen Sie Ihre soliden Kenntnisse in HTML und CSS bei der Erstellung einer schönen Webseite für ein Restaurant. Die Erstellung eines Layouts für ein Restaurant ist etwas komplizierter als die vorherigen Projektbeispiele. Sie werden die verschiedenen Speisen und Getränke mit Hilfe eines CSS-Layoutrasters anordnen. Sie fügen Preise und Bilder hinzu und müssen der Seite ein schönes Aussehen verleihen, indem Sie die richtige Kombination von Farben, Schriftart und Bildern verwenden. Sie können eine Bildergalerie für verschiedene Lebensmittel hinzufügen, Sie können auch Schiebebilder für ein besseres Aussehen hinzufügen. Fügen Sie Links für die Weiterleitung zu internen Seiten hinzu. Machen Sie die Seite responsive, indem Sie einen Viewport einstellen, Media-Queries und Grid verwenden. Sie können die Hilfe von Restaurant Website.
Eine Event- oder Konferenz-Webseite
Sie können eine statische Seite erstellen, die ein Event oder eine Konferenz veranstaltet. Menschen, die an der Teilnahme an der Konferenz interessiert sind, können sich über eine Schaltfläche anmelden. Erwähnen Sie verschiedene Links für Sprecher, Veranstaltungsort und Zeitplan oben im Kopfbereich. Beschreiben Sie den Zweck der Konferenz oder die Personengruppe, die von dieser Konferenz profitieren kann. Fügen Sie eine Einführung und Bilder des Redners, Details zum Veranstaltungsort und den Hauptzweck der Konferenz auf Ihrer Webseite ein. Unterteilen Sie die Seite in Abschnitte, fügen Sie eine Kopf- und eine Fußzeile hinzu, in denen das Menü angezeigt wird. Verwenden Sie für die verschiedenen Abschnitte geeignete Hintergrundfarben, die gut zueinander passen. Wählen Sie einen geeigneten Schriftstil und eine Schriftfarbe, die zum Thema Ihrer Webseite passt. Dies erfordert fundierte HTML/HTML5- und CSS-Kenntnisse. Sie können die Hilfe der Style Conference in Anspruch nehmen.
Music Store Page
Wenn Sie ein Musikliebhaber sind, können Sie eine Webseite für ihn erstellen. Dazu sind HTML5/CSS3-Kenntnisse erforderlich. Fügen Sie ein passendes Hintergrundbild hinzu, das den Zweck oder das Thema der Seite beschreibt. Fügen Sie im Kopfbereich verschiedene Menüs hinzu. Fügen Sie Schaltflächen, Links, Bilder und eine Beschreibung der verfügbaren Liedersammlung hinzu. Im unteren Teil der Seite sollten Sie Links zum Einkaufen, zum Geschäft, zur Karriere oder zu den Kontaktdaten angeben. Sie können auch andere Funktionen auf Ihren Webseiten hinzufügen, wie z. B. eine Testoption, Geschenkkarten oder ein Abonnement. Gestalten Sie die Seite responsiv, indem Sie den Viewport einstellen oder Media-Queries und Grid verwenden. Sie können die Hilfe von myTunes in Anspruch nehmen.
Fotoseite
Wenn Sie über fundierte Kenntnisse in HTML5 und CSS3 verfügen, können Sie eine einseitige responsive Fotoseite erstellen. Verwenden Sie Flexbox und Media-Queries für die Reaktionsfähigkeit. Fügen Sie den Firmennamen mit einem Bild (mit Bezug zur Fotografie) oben ein (Landing Page). Darunter präsentieren Sie Ihre Arbeit mit mehreren Bildern. Erwähnen Sie die Kontaktdaten des Fotografen am unteren Rand (Fußzeile). Fügen Sie eine Schaltfläche hinzu, um Ihre Arbeit zu sehen. Diese Schaltfläche bringt Sie direkt zum Abschnitt Bilder. Sie müssen sich um den Rand, die Polsterung, die Farbkombination, die Schriftgröße, den Schriftstil, die Bildgröße und das Styling einer Schaltfläche kümmern. Sie können die Hilfe von Acme Photography in Anspruch nehmen.
Persönliches Portfolio
Mit Kenntnissen in HTML5 und CSS3 können Sie auch Ihr Portfolio erstellen. Präsentieren Sie Ihre Arbeitsproben und Fähigkeiten in Ihrem Portfolio mit Ihrem Namen und Bildern. Sie können dort auch Ihren Lebenslauf einfügen und Ihr komplettes Portfolio auf GitHub hosten. In der Kopfzeile können Sie Menüs wie „Über“, „Kontakt“, „Arbeit“ oder „Dienstleistungen“ einfügen. Fügen Sie oben eines Ihrer Bilder ein und stellen Sie sich dort vor. Darunter fügen Sie einige Arbeitsproben ein und zum Schluss (Fußzeile) fügen Sie Kontaktinformationen oder ein Konto für soziale Medien hinzu. Sie können die Hilfe des Persönlichen Portfolios in Anspruch nehmen.
Technische Dokumentation
Wenn Sie ein wenig Javascript-Kenntnisse haben, können Sie eine Webseite mit technischer Dokumentation erstellen. Dazu sind HTML-, CSS- und Grundkenntnisse in Javascript erforderlich. Unterteilen Sie die gesamte Webseite in zwei Abschnitte. Auf der linken Seite wird ein Menü erstellt, in dem alle Themen von oben nach unten aufgelistet sind. Auf der rechten Seite müssen Sie die Dokumentation oder die Beschreibung zu den Themen angeben. Die Idee ist, dass, sobald Sie auf eines der Themen im linken Abschnitt klicken, der Inhalt auf der rechten Seite geladen werden soll. Für den Klick können Sie entweder Javascript oder CSS-Lesezeichen verwenden. Sie müssen es nicht zu ausgefallen gestalten, geben Sie ihm nur ein einfaches und dezentes Aussehen, das für technische Dokumentation gut aussieht. Sie können die Hilfe der Technischen Dokumentation in Anspruch nehmen.
Helpful Link: 10 Tipps für effektives Webdesign im Jahr 2019
