odin sign up form

Das ODIN -Projekt - Anmeldeformularlösung

Dies ist eine Lösung für das Projekt: Anmeldeformular für das ODIN-Projekt. Das ODIN-Projekt bietet einen kostenlosen Open-Source-Codierungslehrplan, der vollständig online eingenommen werden kann.

Projekt: Der Taschenrechner ist eines von zwei Projekten im Intermediate -HTML- und CSS -Kurs. Es bietet die Möglichkeit, die Inhalte zu praktizieren, die in den Kursabschnitten mittelschweren HTML -Konzepten , intermediären CSS -Konzepten und Formen behandelt wurden.

Inhaltsverzeichnis

• Überblick
  • Screenshot
  • Links
• Mein Prozess
  • Gebaut mit
  • Was ich gelernt habe
  • Fortsetzung der Entwicklung
  • Nützliche Ressourcen
• Autor
• Anerkennung

Überblick

Screenshot

Links

• Github -Repository
• Live -Site

Mein Prozess

Bauen mit

• Semantisches HTML5 -Markup
• CSS Customeigenschaften
• CSS Flexbox

Was ich gelernt habe

Drei Dinge in dieser Lösung, die ich zuvor in Projekten noch nicht verwendet hatte, sind:

• HTML5 -Eingangstypen
• Stylingformen
• Systemschriftstapel

Weitere Merkmale, die die Kursabschnitte mittelschwere HTML -Konzepte , Zwischen -CSS -Konzepte und Formen abdeckten und die ich in meiner Lösung verwendet habe, sind:

• CSS zurücksetzen
• Relative Einheiten
• Selbst gehostete Schriftarten
• Textstile
• Hintergrundbild
• Box Shadow
• Pseudoklassen
• Benutzerdefinierte Eigenschaften

Fortsetzung der Entwicklung

Für meine Lösung habe ich nur HTML- und CSS -Funktionen verwendet, die im Lehrplan des vollständigen Stapel -JavaScript -Lernpfads bis zu diesem Projekt behandelt wurden.

CSS Grid ist im nächsten Abschnitt nach diesem Projekt behandelt. Das Layout in der Entwurfsdatei für dieses Projekt wäre ein guter Kandidat für das Layout First Design und CSS Grid.

Responsive Design wird erst viel später im Lehrplan abgedeckt. Ich habe meine Lösung so reaktionsschnell wie möglich mit den Tools gemacht, die ich mit CSS Flexbox zur Verfügung stand, aber keine Medienabfragen.

Die Web -Barrierefreiheit wird auch viel später im Lehrplan behandelt. Ich habe das verwendet, was ich über Barrierefreiheit gelernt habe, während ich an Frontend -Mentor -Herausforderungen gearbeitet habe.

Die Überprüfung, ob die Kennwortfelder miteinander übereinstimmen, erfordert JavaScript. Die Verwendung von JavaScript zur Formvalidierung wird in einer zukünftigen Lektion behandelt. Meine Lösung verwendet nur eine Client-Site-Validierung für die E-Mail-Adresse. Es gibt keine erforderlichen Formularfelder, da in der Entwurfsdatei keine angegeben wurde.

Das Formular hat kein Backend und sendet die eingereichten Daten nirgendwo.

Nützliche Ressourcen

• Diese Schriftstapel verbessern Ihre Site -Leistung durch Kevin Powell - dieses Video bietet eine gute Einführung in den System UI -Schriftart.

Autor

Finde mich online:

• Mastodon - @sabineemden

Anerkennung

Zusätzlich zum System -Schriftart Stapel verwendet diese Lösung die Schriftart Norse Fett von Joël Carrouché. Die Schriftart ist kostenlos für den persönlichen und kommerziellen Gebrauch und beinhaltet ein komplettes Runic -Alphabet mit Unicode -Unterstützung.

Diese Lösung verwendet auch das CSS -Reset von Josh Comeaus und das fast schwarz -weiße Farbschema.