odin sign up form

La solution de formulaire d'Odin Project - Form

Ceci est une solution au projet: Formulaire d'inscription pour le projet ODIN. Le projet Odin fournit un programme d'études de codage open source gratuit qui peut être pris entièrement en ligne.

Projet: La calculatrice est l'un des deux projets du cours intermédiaire HTML et CSS. Il offre l'occasion de pratiquer le contenu qui a été couvert dans les sections de cours des concepts HTML intermédiaires , des concepts CSS intermédiaires et des formes .

Table des matières

• Aperçu
  • Capture d'écran
  • Links
• Mon processus
  • Construit avec
  • Ce que j'ai appris
  • Développement continu
  • Ressources utiles
• Auteur
• Remerciements

Aperçu

Capture d'écran

Links

• Référentiel GitHub
• Site en direct

Mon processus

Construire avec

• Marquage sémantique HTML5
• Propriétés personnalisées CSS
• CSS Flexbox

Ce que j'ai appris

Trois choses dans cette solution que je n'avais pas utilisées dans des projets auparavant sont:

• Types d'entrée HTML5
• Formes de style
• Pile de polices système

D'autres fonctionnalités qui ont été couvertes les sections de cours Les concepts HTML intermédiaires , les concepts CSS intermédiaires et les formes et que j'ai utilisés dans ma solution sont:

• Réinitialisation du CSS
• Unités relatives
• Polices auto-hébergées
• Styles de texte
• Image de fond
• Ombre
• Pseudo-classes
• Propriétés personnalisées

Développement continu

Pour ma solution, je n'ai utilisé que des fonctionnalités HTML et CSS qui ont été couvertes dans le programme d'études du chemin d'apprentissage JavaScript complet à ce projet.

La grille CSS est couverte dans la section suivante après ce projet. La disposition du fichier de conception de ce projet serait un bon candidat pour la mise en page First Design et CSS Grid.

La conception réactive n'est couverte que bien plus tard dans le programme. J'ai rendu ma solution aussi réactive que possible avec les outils que j'avais disponibles, en utilisant CSS Flexbox mais pas de requêtes multimédias.

L'accessibilité Web est également couverte beaucoup plus tard dans le programme. J'ai utilisé ce que j'ai appris sur l'accessibilité tout en travaillant sur les défis du mentor de frontend.

Valider que les champs de mot de passe correspondent les uns aux autres nécessitent JavaScript. L'utilisation de JavaScript pour la validation du formulaire est couverte dans une future leçon. Ma solution utilise uniquement la validation du site client pour l'adresse e-mail. Il n'a pas de champs de formulaire requis car aucun n'a été indiqué dans le fichier de conception.

Le formulaire n'a pas de backend et n'envoie les données soumises nulle part.

Ressources utiles

• Ces piles de polices amélioreront les performances de votre site par Kevin Powell - cette vidéo donne une bonne introduction à la pile de polices d'interface utilisateur du système.

Auteur

Trouvez-moi en ligne:

• Mastodon - @sabineemden

Remerciements

En plus de la pile de polices système, cette solution utilise le Norse Norse Bold par Joël Carouché. La police est gratuite pour une utilisation personnelle et commerciale et comprend un alphabet runique complet avec le support Unicode.

Cette solution utilise également la réinitialisation CSS de Josh Comeau et la palette de couleurs presque en noir et blanc.