Apprendre à coder est toujours passionnant et amusant pour tout le monde et quand il s’agit de faire un pas dans le monde de la programmation, la plupart des gens commencent par la chose la plus facile HTML et CSS. Le voyage de codage de chaque débutant dans le frontend commence avec ces deux blocs de construction de base et vous devez être créatif quand il s’agit de concevoir une belle application.
Initialement, les débutants aiment faire des boutons, ajouter les liens, ajouter des images, travailler avec la mise en page et beaucoup de choses cool dans la conception web, mais quand il s’agit de faire un projet en utilisant seulement HTML et CSS, ils sont coincés et confus sur ce qu’ils devraient faire pour pratiquer toutes ces choses. Après tout, leurs connaissances sont limitées à HTML et CSS. Quoi qu’il en soit, après avoir tout appris, vous vous rendrez compte à un moment donné que la réalisation d’un projet est importante pour mettre en pratique les compétences HTML et CSS. Vous devez vérifier comment HTML et CSS fonctionnent ensemble pour concevoir une belle application frontale. La question est donc de savoir quels sont les projets adaptés aux débutants que vous pouvez construire pour pratiquer tout ce que vous avez appris…Discutons-en.
Une page d’hommage
Le site web le plus simple que vous pouvez faire en tant que débutant est une page d’hommage de quelqu’un que vous admirez dans votre vie. Elle ne nécessite que des connaissances de base en HTML et CSS. Faites une page web en écrivant sur cette personne en ajoutant son image. En haut de la page Web, ajoutez l’image et le nom de la personne et en dessous, mettez en page le reste des détails. Vous pouvez utiliser des paragraphes, des listes, des liens, des images avec CSS pour lui donner un aspect décent. Ajoutez une couleur de fond et un style de police appropriés à votre page Web. La plupart des éléments peuvent être réalisés à l’aide de HTML, mais pour leur donner un meilleur aspect, utilisez un peu de CSS. Prenez l’aide du lien donné ci-dessous.
- My Tribute Page
- Page d’hommage à Steve Jobs
- Page d’hommage à Albert Einstein
Webpage Incluant un formulaire
Les formulaires sont toujours une partie essentielle de tout projet et vous travaillerez avec beaucoup de formulaires dans la plupart des applications alors pourquoi ne pas le pratiquer plus tôt et tester vos connaissances. Une fois que vous vous êtes familiarisé avec le champ de saisie ou les balises de base en HTML pour créer un formulaire, réalisez un projet en utilisant toutes ces balises. Comment utiliser un champ de texte, une case à cocher, un bouton radio, une date et d’autres éléments importants dans un même formulaire. Vous apprendrez comment donner une structure appropriée à une page Web en créant un formulaire. La connaissance de HTML/HTML5 est suffisante mais vous pouvez utiliser un peu de CSS pour améliorer le projet. Prenez l’aide des liens donnés ci-dessous.
- Formulaire de sondage
- Formulaire de bonnes vibrations
- Formulaire de sondage
Site web parallaxe
Un site web parallaxe comprend des images fixes en arrière-plan que vous pouvez garder en place et vous pouvez faire défiler la page pour voir différentes parties de l’image. Avec des connaissances de base en HTML et CSS, vous pouvez donner un effet de parallaxe à un site web. L’utilisation de l’effet parallaxe dans la conception de sites Web est très populaire et donne un aspect et des sensations magnifiques à la page Web. Faites un essai et divisez la page entière en trois ou quatre sections différentes. Définissez 3 à 4 images d’arrière-plan, alignez le texte des différentes sections, définissez la marge et le remplissage, ajoutez la position d’arrière-plan et d’autres éléments et propriétés CSS pour créer un effet de parallaxe. Vous pouvez prendre l’aide de Parallax Website.
Landing Page
Une page d’atterrissage est un autre bon projet que vous pouvez faire en utilisant HTML et CSS mais il nécessite une solide connaissance de ces deux blocs de construction. Vous allez utiliser beaucoup de créativité tout en faisant une page d’atterrissage. Vous vous exercerez à ajouter un pied de page et un en-tête, à créer des colonnes, à aligner des éléments, à diviser les sections et bien d’autres choses encore. Vous devrez utiliser le CSS avec précaution, en veillant à ce que les différents éléments ne se superposent pas les uns aux autres. Vous devrez également prendre soin des combinaisons de couleurs, du padding, de la marge, de l’espace entre les sections, des paragraphes et des boîtes. Les combinaisons de couleurs doivent s’accorder entre elles pour les différentes sections ou arrière-plans. Vous pouvez vous faire aider par le lien donné ci-dessous.
- Accueil plein écran
- Page d’accueil
Site web de restaurant
Montrez vos solides connaissances en HTML et CSS en créant une belle page web pour un restaurant. Faire une mise en page pour un restaurant sera un peu plus compliqué que les exemples de projets précédents. Vous alignerez les différents aliments et boissons à l’aide d’une grille de mise en page CSS. Vous ajouterez les prix, les images et vous devrez lui donner une belle apparence en utilisant la bonne combinaison de couleurs, de styles de police et d’images. Vous pouvez ajouter une galerie d’images pour les différents produits alimentaires, ainsi que des images coulissantes pour un meilleur aspect. Ajoutez des liens pour la redirection vers des pages internes. Faites en sorte qu’il soit réactif en définissant une fenêtre d’affichage, en utilisant les requêtes média et la grille. Vous pouvez prendre l’aide de Restaurant Website.
Une page Web d’événement ou de conférence
Vous pouvez faire une page statique tenant un événement ou une conférence. Les gens qui sont intéressés à assister à la conférence créent un bouton d’inscription pour eux. Mentionnez différents liens pour le conférencier, le lieu et le programme en haut dans la section de l’en-tête. Décrivez l’objectif de la conférence ou la catégorie de personnes qui peuvent en bénéficier. Ajoutez une introduction et des images de l’intervenant, des détails sur le lieu et l’objectif principal de la conférence sur votre page Web. Divisez la page en sections, ajoutez un en-tête et un pied de page mettant en valeur le menu. Utilisez des couleurs d’arrière-plan appropriées qui se marient bien entre elles pour les différentes sections. Choisissez un style et une couleur de police appropriés qui correspondent au thème de votre page Web. Cela nécessite des connaissances approfondies en HTML/HTML5 et CSS. Vous pouvez prendre l’aide de la conférence de style.
Page de magasin de musique
Si vous êtes un amateur de musique, vous pouvez faire une page web pour cela. Cela nécessite des connaissances en HTML5/CSS3. Ajoutez une image de fond appropriée décrivant le but ou le sujet de la page. Dans la section de l’en-tête, ajoutez différents menus. Ajoutez des boutons, des liens, des images et une description de la collection de chansons disponibles. En bas de page, mentionnez les liens pour les achats, la boutique, la carrière ou les coordonnées. Vous pouvez également ajouter d’autres fonctionnalités sur vos pages Web, comme une option d’essai, des cartes-cadeaux ou un abonnement. Faites en sorte qu’elles soient réactives en définissant un viewport ou en utilisant des requêtes média et une grille. Vous pouvez prendre l’aide de myTunes.
Site de photographie
Si vous avez une connaissance approfondie de HTML5 et CSS3, vous pouvez faire un site de photographie responsive d’une page. Utilisez flexbox et media queries pour la réactivité. Ajoutez le nom de l’entreprise avec une image (liée à la photographie) en haut (page de destination). En dessous, présentez votre travail en ajoutant plusieurs images. Mentionnez les coordonnées du photographe en bas (pied de page). Ajoutez un bouton pour visualiser votre travail. Ce bouton vous amènera directement à la section des images. Vous devez prendre soin de la marge, du remplissage, de la combinaison de couleurs, de la taille de la police, du style de la police, de la taille de l’image et du style d’un bouton. Vous pouvez vous faire aider par Acme Photography.
Portefeuille personnel
Avec des connaissances en HTML5 et CSS3, vous pouvez également créer votre portefeuille. Présentez vos échantillons de travail et vos compétences dans votre portefeuille avec votre nom et vos photos. Vous pouvez également y ajouter votre CV et héberger votre portfolio complet sur un compte GitHub. Dans votre section d’en-tête, mentionnez des menus tels que à propos, contact, travail ou services. En haut, ajoutez une de vos images et présentez-vous. En dessous, ajoutez quelques échantillons de travail et enfin (en bas de page), ajoutez vos coordonnées ou votre compte de médias sociaux. Vous pouvez vous aider du Portfolio personnel.
Documentation technique
Si vous avez un peu de connaissances en Javascript alors vous pouvez créer une page web de documentation technique. Cela nécessite des connaissances en HTML, CSS et javascript de base. Divisez l’ensemble de la page web en deux sections. Le côté gauche crée un menu avec tous les sujets énumérés de haut en bas. Dans la partie droite, vous devez mentionner la documentation ou la description des sujets. L’idée est que lorsque vous cliquez sur l’un des sujets de la section de gauche, le contenu de la section de droite doit être chargé. Pour le clic, vous pouvez utiliser l’option de signet javascript ou CSS. Vous n’avez pas besoin de faire trop de fantaisie, il suffit de lui donner un look simple et décent, qui ressemble à de la documentation technique. Vous pouvez prendre l’aide de la documentation technique.
Lien utile : 10 conseils pour une conception Web efficace en 2019
