Stephane Million Editeur

Stephane Million Blog Site

Ce sont les meilleurs projets HTML et CSS pour les débutants – Skillcrush

Ce sont les meilleurs projets HTML et CSS pour les débutants – Skillcrush

Si vous êtes un débutant en programmation et que vous venez de commencer à apprendre le HTML et le CSS, vous vous demandez peut-être quels projets HTML et CSS vous pouvez faire pour créer votre portfolio et perfectionner vos compétences. Vous pourriez même vous demander si vous pouvez réellement faire n'importe quoi avec juste des connaissances en HTML et CSS! La bonne nouvelle est qu'il existe de nombreux types de projets HTML et CSS que les débutants peuvent utiliser pour s'entraîner au codage, développer leurs compétences, continuer à apprendre, améliorer leurs connaissances et même commencer à gagner de l'argent.

Le premier site Web que j'ai construit – le projet final d'une série de leçons vidéo sur une plate-forme d'apprentissage en ligne – a été réalisé uniquement avec HTML et CSS. Même s'il s'agissait d'une page Web statique de base pour une fausse boulangerie qui ne serait jamais vue ou hébergée nulle part, j'étais ravi. J'avais créé quelque chose qui n'existait pas auparavant, en utilisant du code. En tant que major anglais, utiliser le langage de cette manière tangible était nouveau pour moi, et HTML et CSS l'ont rendu possible. L'expérience m'a motivé à continuer d'apprendre — j'apprends encore aujourd'hui, même après des années de travail en tant qu'ingénieur logiciel.

La technologie vous convient-elle? Répondez à notre quiz de 3 minutes!

Vous apprendrez: Si un carrière dans la technologie est faite pour vous Quelles carrières technologiques correspondent à vos points forts

De quelles compétences avez-vous besoin pour atteindre vos objectifs

)

Dans cet article, nous verrons comment vous pouvez également utiliser HTML et CSS pour créer des projets et explorer l'industrie de la technologie, même si vous commencez tout juste votre voyage dans l'espace technologique.

Table des matières

  • Que puis-je construire avec HTML & CSS ?

    7 meilleurs projets HTML et CSS pour les débutants

    Où d'autre puis-je pratiquer ?

    Puis-je gagner de l'argent avec seulement HTML et CSS ?

    Que dois-je apprendre ensuite?

    Que puis-je construire avec HTML et CSS ?

    HTML et CSS sont la base des sites Web dans ce domaine ils fournissent une structure et un style à une page Web. Avec HTML, vous pouvez ajouter des éléments non interactifs tels que du texte et des images, et inclure des éléments interactifs tels que des liens, des boutons et des vidéos.

    Avec CSS, vous pouvez styliser des pages Web. Vous pouvez également rendre les sites Web réactifs en utilisant CSS. C'est possible avec les requêtes média, qui ont été introduites dans CSS3.

    (HTML en est à sa cinquième itération, vous le verrez donc appelé HTML5, pourquoi CSS en est à sa troisième — alias CSS3.)

    Un exemple CSS d'une requête média.

    Depuis l'ajout des media queries, il est possible de vérifier la largeur et la hauteur de l'appareil actuel, ainsi que l'orientation (paysage ou portrait). Cela signifie que vous pouvez rendre un site mobile responsive en utilisant uniquement HTML et CSS.

    Il est possible de créer des animations en CSS en modifiant progressivement les propriétés d'un élément. Et vous pouvez même créer des effets de défilement flashy (connus sous le nom de « parallaxe ») avec CSS.

    Tout en travaillant sur des projets HTML et CSS peut vous aider à créer de beaux sites Web, pour des sites plus complexes, vous voudront probablement utiliser JavaScript. Avec JavaScript, vous pouvez extraire des données d'une base de données, gérer différents états d'une application et ajouter facilement des éléments interactifs comme un curseur.

    Cela dit, il y a encore BEAUCOUP de choses à faire avec HTML et CSS seuls. Jetons un coup d'œil à quelques bonnes idées de projets à essayer.

    (Retour en haut.)

    7 meilleurs projets HTML et CSS pour les débutants

    Si vous cherchez à apprenez HTML et CSS et commencez à gagner de l'argent, voici quelques excellents projets HTML et CSS pour vous aider à affiner vos compétences et même être payé pour les utiliser.

    1. Créez un portfolio ou un site Web personnel simple

    Utilisez vos compétences pour montrez vos compétences! Un site Web simple est utile pour présenter vos projets à des employeurs potentiels et pour vous entraîner à rédiger des balises et à créer des feuilles de style. Un constructeur de site Web comme WordPress ou Squarespace pourrait vous aider à démarrer – vous pouvez même ajouter un CSS personnalisé pour le personnaliser et mettre vos compétences CSS à l'épreuve.

    Vous pouvez garder la conception simple si vous voulez vous concentrer sur la plongée dans le balisage et le style.5)

    5)

    Une image de la page de destination de mon premier site web de portfolio.

    2. Rendez votre CV interactif

    Ceci est pour votre propre marque comme ainsi que d'aiguiser vos compétences. Dans la même veine que la création de votre propre site Web personnel, la création d'un CV interactif est un moyen de montrer que vous connaissez vos compétences fondamentales tout en rendant votre CV amusant. Cet article sur dev.to par Alvaro Montoro vous explique comment faire cela du début à la fin.

    Une image du guide d'Alvaro Montaro pour créer un CV interactif avec HTML et CSS.

    3. Créer une newsletter par e-mail

    Il existe des opportunités d'emploi axées sur l'e-mail bâtiment qui nécessitent des connaissances HTML et CSS. Vous pouvez utiliser un service de newsletter par e-mail comme MailChimp et personnaliser les designs.

    Voici quelques idées sur les e-mails à créer pour la pratique:

      Créez une newsletter par e-mail pour partager votre parcours dans la technologie avec les leçons que vous avez appris et les projets que vous avez construits avec vos amis et votre famille

      Lancez une newsletter par e-mail des événements à venir dans la région ou de vos endroits locaux préférés

      Voici quelques rôles et emplois indépendants liés au courrier électronique à rechercher:

  • Concepteur d'e-mail

    Email développeur

    Développement HTML eloper

    4. Créer un site Web réactif statique

    Les utilisateurs accèdent aux sites Web de divers dispositifs. Cela signifie qu'ils visualisent le contenu sur différentes tailles d'écran. Un site Web réactif a un contenu formaté en fonction de la taille de l'écran à l'aide de requêtes multimédia CSS et HTML. Il est important de savoir comment procéder, alors prenez ce site Web personnel, ce portfolio ou ce site fictif et faites-le fonctionner sur toutes les tailles de fenêtre d'affichage.

      Voici quelques idées de sites Web à créer pour la pratique:

      Une page web pour un restaurant imaginaire

      Une page biographique sur votre auteur préféré

      Une simple page de destination marketing pour l'entreprise d'un ami ou d'un membre de la famille ou pour afficher son travail personnel

      Voici quelques idées de ce que opportunités de freelance à rechercher pour créer un site web responsive statique :

      5)

    • Trouver un projet où vous personnalisez un site WordPress ou Squarespace

      Offrez vos services à un restaurant cherchant à avoir une présence en ligne avec un site web statique et des pages de menu

    C'est aussi une opportunité d'apprendre Flexbox pour construire un système de grille qui s'effondre facilement en fonction de la taille de l'écran.

    5. Construire un formulaire

    Savoir assembler des contrôles interactifs pour construire un formulaire est extrêmement utile dans le développement Web. Vous utilisez des boutons, des entrées, des formulaires et des éléments HTML pour permettre la saisie de l'utilisateur. C'est également l'occasion de montrer vos compétences UX et UI en rendant le formulaire accessible, en prenant des décisions concernant le texte d'aide d'espace réservé et en créant des étiquettes pour les champs de formulaire.

    6. Créer une animation

    Une animation ? Avec seulement HTML et CSS ? Ouais, c'est possible ! Vous pouvez mettre vos compétences CSS à l'épreuve en créant des formes et des animations pour décomposer les données ou pour rendre votre site Web plus interactif. Par exemple, vous pouvez utiliser une animation lorsqu'un utilisateur survole un élément.

    Voici quelques idées d'animations à créer:

      Interactions sur votre site personnel pour indiquer à l'utilisateur où il se trouve

      Une animation pour saluer vos utilisateurs

      )

      7. Contribuer à un projet open source

      Même avec seulement HTML et Compétences CSS, vous pouvez contribuer à un projet open source. Le travail open source est un excellent moyen d'acquérir une expérience du monde réel tout en perfectionnant vos compétences. Pour des idées sur la façon de commencer, apprenez-en plus ici : Qu'est-ce que l'Open Source ? Comment contribuer à votre premier projet open source

      Vous pouvez trouver des projets open source sur des sites d'hébergement comme GitHub.

      (Retour au sommet.)

      La technologie vous convient-elle? Répondez à notre quiz de 3 minutes!

      Vous apprendrez: Si un carrière dans la technologie est faite pour vous Quelles carrières technologiques correspondent à vos points forts

      De quelles compétences avez-vous besoin pour atteindre vos objectifs

      ) Où puis-je pratiquer ?

      Skillcrush (c'est nous !) propose un camp de codage gratuit ⛺️ qui introduit le HTML et le CSS. Vous pouvez commencer immédiatement et écrire votre premier code HTML en quelques minutes.

    • freeCodeCamp est génial car ils fournissent un travail orienté projet qui est essentiel pour créer un portfolio ou un site personnel.

      Udemy propose ce cours HTML et CSS gratuit sur sa plateforme d'apprentissage en ligne.

    • Les Odin Project propose un cours gratuit principalement autodirigé. Les activités proviennent de vidéos YouTube, de tutoriels freeCodeCamp et d'autres blogs.

      Il existe de nombreux endroits pour apprendre à coder en ligne gratuitement. Une fois que vous vous êtes mis les pieds dans l'eau, consultez le programme complet et personnalisé Break Into Tech de Skillcrush. Il s'agit d'un programme zéro-emploi conçu pour les débutants en technologie qui cherchent à démarrer une nouvelle carrière, avec des voies rapides dans le développement et la conception front-end.

      (Retour en haut.)

      Pouvez Je gagne de l'argent avec uniquement du HTML et du CSS?

      Regardons la prochaine question qui pourrait vous préoccuper: est-il possible de commencer à gagner de l'argent avec seulement ces deux? compétences fondamentales ? Les connaissances HTML et CSS sont-elles vraiment précieuses dans une scène technologique où tout le monde semble savoir comment les utiliser?

      Oui! Vous ne trouverez peut-être pas une liste exhaustive de titres de poste, mais il est possible de trouver un travail qui correspond à vos compétences en HTML et CSS. En fait, ces compétences, ainsi que vos autres compétences comme le design ou le marketing, peuvent être la porte d'entrée de votre carrière dans la technologie, en particulier avec quelques projets HTML et CSS déjà à votre actif, et vous pouvez apprendre plus de langues au fur et à mesure.

      Rechercher des e-mails de construction de travaux

      Une façon de gagner de l'argent en utilisant uniquement HTML et CSS est de travailler sur les e-mails. Ne pas écrire d'e-mails – les formater, les concevoir et coder ces conceptions.

      Les individus et les organisations utilisent des newsletters et des campagnes par e-mail pour communiquer avec leurs lecteurs et/ou utilisateurs. Ces e-mails peuvent être formatés pour être conformes à une marque ou à un système de conception plus large. Ils doivent également généralement être réactifs, ce qui signifie que le contenu fonctionne et est bien formaté sur tous les appareils, y compris: les téléphones mobiles, les ordinateurs de bureau et les tablettes de toutes tailles.

      Avec vos connaissances en HTML et CSS, vous pourriez être qualifié pour postuler à des emplois de développeur d'e-mails HTML ou de spécialiste en marketing par e-mail. Un bon œil pour la conception et les compétences en conception Web sont également utiles pour ces rôles.

      Recherchez des emplois de maintenance de site Web

      Les équipes ont également besoin de personnes ayant des compétences HTML et CSS pour maintenir les sites Web à jour et fonctionner correctement. Si vous connaissez HTML et CSS, il existe des possibilités de créer du contenu pour le Web, d'aider à la gestion de projets Web et de fournir une assistance pour le bon fonctionnement d'un site Web.

      Voici une liste de titres de poste liés au site Web où les connaissances HTML et CSS (et l'expérience avec les projets HTML et CSS ci-dessus) sont utiles:

        Spécialiste du contenu et de l'assistance du site Web

        Chef de projet site Internet

        Webmestre

        Développeur WordPress

        Éditeur du site

      Postulez pour des emplois de développeur front-end d'entrée de gamme

      Avoir des compétences en HTML et CSS vous donne la possibilité de mettre le pied dans la porte pour en savoir plus sur l'espace technologique et développer vos compétences au travail, y compris l'accès à des emplois frontaux de niveau d'entrée ou à des emplois de développeur Web junior.

      Dans ces postes, vous en apprendriez beaucoup plus que HTML et CSS. On s'attend à ce que vous appreniez des langages de programmation (tels que JavaScript, par exemple) et soyez capable d'apporter une contribution plus importante au processus de création et d'exploitation du site Web et de l'application.

      (Retour en haut. )

      Quelles compétences dois-je acquérir ensuite?

      L'apprentissage fait partie intégrante du travail dans la technologie, qu'il s'agisse d'approfondir ou d'approfondir vos compétences actuelles. Dans cet esprit, il existe de nombreux chemins différents que vous pouvez emprunter après vous être habitué à travailler avec HTML et CSS (et à créer des projets HTML et CSS !).

      L'un des plus les frameworks au nom unique – Sass – peuvent être un bon moyen d'améliorer vos compétences CSS. Sass est un langage d'extension de CSS qui vous permet d'écrire des propriétés et d'utiliser des règles CSS tout en autorisant également des variables et des blocs CSS réutilisables. C'est un excellent moyen de travailler sur vos connaissances actuelles et d'apprendre quelques concepts de programmation de base, tels que l'utilisation de variables.

      Si vous avez vraiment aimé choisir les couleurs, les polices et la mise en page visuelle pour le Web pages lors de la rédaction du balisage et de la création de feuilles de style, vous souhaiterez peut-être approfondir la conception de l'interface utilisateur (UI).

      En tant que concepteur d'interface utilisateur, vous déterminerez comment un site Web, une application ou un produit être formaté et stylisé et avoir un impact sur son fonctionnement pour l'utilisateur final. Apprendre à mettre en page une page Web dans des programmes comme Adobe Photoshop et créer des icônes dans Illustrator serait un bon point de départ dans votre parcours de conception.

      L'expérience utilisateur ou la conception UX peut également être utile vous intéresse. L'expérience utilisateur est le segment de la conception qui se concentre sur la façon dont un utilisateur utilise réellement un produit et ce qu'il en pense. Il existe plusieurs types de rôles différents dans l'espace UX.

      Si vous avez aimé parcourir des lignes de code et écrire du code tout en apprenant HTML et CSS, en apprenant un langage de programmation JavaScript ou Python peut être votre prochaine étape. JavaScript est dynamique et vaste dans son utilité, et l'ajouter à vos côtelettes technologiques fait de vous un candidat plus fort pour plus de rôles de développement. Python est un excellent langage à apprendre si vous êtes intéressé par la création d'applications Web ou si vous êtes curieux de la science des données et de l'apprentissage automatique.

      Il existe certainement de nombreuses voies différentes pour acquérir des compétences techniques. Avec HTML et CSS dans votre ceinture d'outils technologiques (ainsi que des projets HTML et CSS dans votre portefeuille), vous êtes sur la bonne voie pour une carrière dans la technologie.

      (Retour en haut. )

      La technologie vous convient-elle? Répondez à notre quiz de 3 minutes!

    • Vous apprendrez: Si un carrière dans la technologie est faite pour vous Quelles carrières technologiques correspondent à vos points forts

      De quelles compétences avez-vous besoin pour atteindre vos objectifs

      )

      Laisser un commentaire

      Votre adresse e-mail ne sera pas publiée.