C’est toujours excitant la première fois que vous essayez d’apprendre une nouvelle compétence. Surtout le codage.
Cependant, si vous n’avez pas de pratique, vous oubliez la plupart de ce que vous apprenez. Par conséquent, à un moment donné, vous réalisez que vous devez pratiquer ce que vous avez appris. Sinon, vous allez tout oublier.
C’est là que les projets entrent en jeu. Les projets sont un bon moyen de pratiquer ce que vous avez appris. Et croyez-moi, vous voulez travailler sur des projets. Vous pouvez utiliser les projets pour montrer ce sur quoi vous avez travaillé.
En tant que débutant, choisir des projets qui correspondent à votre niveau de connaissances actuel peut être décourageant. Vous pouvez choisir un projet. Puis le projet devient trop grand pour être accompli avec votre savoir-faire actuel. Du moins, c’est ce que j’ai vécu au cours de ce voyage d’apprentissage.
J’ai conservé quelques projets que j’ai trouvés qui sont appropriés même si vos connaissances sont limitées à HTML et CSS seulement. Ces projets sont disponibles sur des sites Web d’apprentissage populaires où vous trouverez des informations supplémentaires sur ce que vous allez aborder.
1. Une page d’hommage
Écrivez un hommage à une personne que vous admirez et publiez-le sous forme de page web. Ce projet impliquera de travailler avec l’ajout d’image, de liens, de listes et de paragraphes. La création de ce projet nécessite des connaissances en HTML. Cependant, vous pouvez utiliser un peu de CSS pour améliorer l’apparence du projet.
2. Un formulaire d’enquête
Les formulaires sont utiles pour recueillir des données en ligne. Ce projet va principalement tester vos compétences sur toutes sortes de saisies. Cela permettra de tester vos connaissances sur les formulaires et la structuration de votre page web. Le formulaire n’est pas nécessaire pour envoyer des données.
C’est une construction à partir de la page d’hommage. Ce projet nécessitera des connaissances en html/html5 pour être créé.
3. Construire une page d’accueil de produit
Ce projet testera vos connaissances en HTML et CSS. Vous devrez vous exercer à créer des colonnes et à aligner des éléments dans ces colonnes. Vous devrez également effectuer une édition de base des images, par exemple le recadrage et le redimensionnement, afin d’obtenir des images parfaites pour votre page Web.
Vous aurez besoin de solides connaissances en HTML/CSS.
4. Construire une page de documentation technique
Cela nécessitera quelques connaissances en HTML CSS et bootstrap ou JavaScript. L’idée de base est la suivante : lorsque vous cliquez sur n’importe quel sujet à gauche, il charge ce contenu à droite.
Je tente actuellement ce projet et je posterai le projet final une fois qu’il sera terminé.
5. Construire une page Web de portefeuille personnel
Vous allez mettre en pratique toutes les compétences que vous avez apprises en HTML et CSS. Vous devrez également savoir comment recadrer et redimensionner les images. Si vous n’avez pas d’options, utilisez Gimp. Il est gratuit, open source et disponible sur Windows et Linux .
Si vous êtes pressé de faire un portfolio, vous pouvez lire l’article de Brian sur la réalisation d’un portfolio en ligne en utilisant un thème/template tout fait.
6. Page Google.com
Oui, vous l’avez vu de nombreuses fois. Mais pouvez-vous le reproduire. La simple page google.com avec des icônes, le logo de google, une zone de texte et deux boutons. Vous pouvez faire un sosie de la page google.com. Dans ce projet, vous le faites ressembler à google.com pas fonctionner comme google.com.
Vous devez connaître à la fois HTML et CSS.
7. google.com Page de résultat de recherche
Vous allez créer une page avec le format d’un résultat de recherche google. Votre page devrait avoir les 10 résultats normaux et la navigation vers les pages suivantes en bas.
C’est une mise à niveau de la page google.com de base ci-dessus. Cependant, vous devriez être en mesure de réutiliser une partie du code sur ce projet.
En outre, faire la page devrait ressembler un peu mais la fonctionnalité ne devrait pas être une préoccupation pour le moment.
Conclusion
Si vous cherchez à apprendre les bases de HTML, vous pouvez vérifier ma courte leçon d’introduction à HTML.
Avez-vous fait un projet de base alors que vous appreniez HTML et CSS ? Si vous l’avez fait, partagez-les ci-dessous et aidez d’autres apprenants à trouver des idées » simples » mais stimulantes à essayer.