Ces 5 jeux vous apprendront comment créer un site Web

La construction d'un site Web à partir de zéro peut être gratifiante. Cependant, apprendre à en créer un peut sembler intimidant au début. Vous devrez connaître HTML, CSS et JavaScript. Vous devriez également avoir une certaine connaissance de la conception d'interface pour créer une navigation plus facile de votre site.

De nombreuses personnes supposent que l'apprentissage de ces compétences nécessiterait une lecture approfondie de code, de regarder des tutoriels techniques sur YouTube ou de suivre des cours sur chaque sujet. Toutes ces méthodes d'apprentissage sont efficaces, mais de nombreuses personnes, y compris moi-même, trouvent qu'il est difficile de s'engager avec eux. Cela est dû au manque de pratique pratique avec ces méthodes.

Ce qui m'amène à proposer une façon unique d'apprentissage qui peut le rendre plus interactif et gamifiant « . Jouer à des jeux pour pratiquer différents sujets, tels que la conception et la programmation, peut aider à la mémorisation. Cela peut également stimuler la préparation lorsque vous appliquez vos connaissances aux scénarios du monde réel. C'est pourquoi j'explore cinq jeux qui peuvent vous aider à acquérir des connaissances des compétences nécessaires pour créer des sites Web.

5

Allez à l'aventure avec codédex!

L'une des premières choses que vous devrez apprendre à créer des sites Web est le langage de programmation, HTML, qui signifie «Language de balisage hypertexte». Cette langue forme la façon dont le texte, les images et autres médias sont disposés numériquement. HTML est généralement mieux présenté avec l'aide de CSS et JavaScript Code, que je couvrirai plus tard dans cet article.

Bien que Codédex couvre de nombreux langages, c'est l'une des rares ressources qui enseigne la programmation HTML sous la forme d'un jeu. Dans ce programme, vous jouerez à divers jeux appelés « quêtes » pour Exp. Les quêtes vous font écrire du code sur un script au centre de l'écran, avec un texte de présentation pour décrire le concept de l'exercice à gauche du code. À droite se trouve un terminal qui affichera le résultat de la quête, qui est la sortie du code que vous avez écrit. Avec chaque quête que vous terminez avec succès, plus vous gagnerez en expans exploité pour déverrouiller des quêtes plus avancées de concepts plus complexes de HTML.

J'ai trouvé que la disposition de ce jeu était invitante car les trois éléments de « Explication », « Script » et « Sortie » sont tous sur le même écran. J'apprécie également l'approche décontractée de l'apprentissage, car vous pouvez gagner Exp à votre rythme sans aucune « punition » donnée à votre personnage pour ne pas avoir écrit le code correctement. Cette nature indulgente donne un peu à Codédex une sensation « confortable », car vous pouvez prendre votre temps à apprendre les matières en son sein.

4

Designercize vous donne des défis de conception amusants

Le «design» est l'une des considérations les plus importantes à avoir lors de la création d'un site Web. Chaque site Web populaire a son propre look unique. Par exemple, sur Google, il est simple de trouver des informations dans le moteur de recherche à partir de la disposition de texte de base de leurs résultats, les en-têtes étant plus grands que le texte de description de leurs entrées. La façon dont vous concevez ce que vos utilisateurs voient le plus compte le plus lorsque vous souhaitez plus de rétention des utilisateurs sur votre site.

Designercize n'est pas un jeu en ligne avec lequel vous interagissez comme les autres entrées de cette liste; Cependant, il est conçu pour être un modèle pour créer des jeux / exercices pratiques. Le site génère des défis qui suivent les spécifications, tels que la difficulté et le temps, vous inviter à concevoir des pages Web sur des sujets spécifiques pour aider différentes démographies. Les entrées « design », « pour » et « pour aider » sont toutes générées au hasard, ce qui rend moins prévisible de savoir ce que vous obtiendrez ensuite.

La conception simple de la conception peut être appliquée dans de nombreuses situations. Cela peut être l'auto-pratique de vos propres compétences, un défi entre amis, ou même un défi à relever aux candidats potentiels à l'embauche. La nature ouverte de son utilisation me fait fortement recommander cette application pour les débutants et les experts en conception de sites Web.

3

Apprenez à ne pas concevoir un site Web avec l'utilisateur inyerface

L'interface utilisateur (UI) est complexe, mais elle semble trompeusement simple. L'interface utilisateur est la conception de la façon dont les utilisateurs interagissent avec une application. Où cliquer, ce qu'il y a à regarder, comment les choses bougent et bien d'autres questions basées sur l'action sont couvertes dans ce domaine. À mon avis, c'est la chose la plus difficile à apprendre dans le développement Web en raison de la façon dont les utilisateurs peuvent être imprévisibles.

Malgré l'imprévisibilité, il y a plusieurs choses que vous devez éviter dans la conception de l'interface utilisateur qui peuvent agacer les utilisateurs. De nombreux exemples de ces éléments sont présentés dans le jeu User Inyerface. Cette expérience numérique semble brisée au début, mais lorsque vous naviguez sur le site Web, vous apprendrez que ses « bogues » sont par conception. Des boutons cliquables qui ne font rien, des fenêtres contextuelles aléatoires qui vous éloignent de la tâche que vous faites, et les menus déroulants avec une terrible navigation ne sont que quelques exemples des défis que le site Web a pour vous.

Autant que ce site me fait mal, je recommande fortement de l'expérimenter au moins une fois pour comprendre ce pas Pour faire tout en développant l'interface utilisateur de votre site. Les choses que vous avez du mal à faire dans ce jeu devraient être rappelées lorsque vous implémentez des fonctionnalités similaires à vos propres sites Web. Grâce à la frustration, l'utilisateur Inyerface vous enseigne pourquoi avoir une interface utilisateur fonctionnelle rendra votre site Web plus agréable pour les utilisateurs.

2

Formulez votre maîtrise de javascript avec une saga d'ascenseur

Pour en revenir aux langages de programmation utilisés dans le développement Web, parlons de ce qu'est JavaScript (JS). JS est utilisé pour développer le comportement du contenu dynamique sur des sites Web tels que le déménagement du texte, des vidéos, etc. En raison de sa syntaxe compliquée et de la quantité d'informations requises pour connaître sans assistance sur Internet, cette langue est considérée comme la plus difficile à apprendre du trio de développement Web.

Le défi de « gamifier » ce langage difficile à apprendre a été relevé par les développeurs de la saga d'ascenseur. Leur jeu vous invite à trouver des solutions à des questions qui suivent la structure générale de: « Transporter X People en x secondes ou moins » dans une simulation d'ascenseur visuel. La seule façon de résoudre ces questions est d'écrire du code JS. Cela nécessite des connaissances de syntaxe pour jouer. N'ayez pas peur cependant, car le jeu vous fournit le code de base du programme et une API qui fournit des commandes utiles à envisager d'utiliser.

Ce que j'aime le plus dans la saga d'ascenseur, c'est la communauté qui s'est formée pour cela. Sur les forums du jeu, d'autres utilisateurs partagent leurs solutions aux questions et essaient de trouver le moyen le plus efficace de terminer leurs invites. Je me retrouve à s'amuser plus de voir ce que les autres ont pu découvrir dans ce jeu que de programmer mes propres solutions.

1

Construire une histoire en utilisant du code dans le codage de la fantaisie

Pour terminer cet article, je voulais jeter un coup d'œil à CSS, qui signifie «Fis de style en cascade». CSS est utilisé pour styliser l'apparence du code HTML sur les pages Web. Cela vous permet de les rendre plus propres et de personnaliser l'apparence du texte sur les pages Web. Il est facile à apprendre et est considéré comme une pierre angulaire du développement du World Wide Web.

Pour aider à apprendre CSS, je recommande fortement certains des jeux d'aventure de Coding Fantasy. Dans leurs jeux de rôle (RPG), vous écrivez du code CSS pour déplacer votre groupe pour se déplacer sur une carte de carreaux et attaquer les ennemis. Dans Flex Box Adventure, vous jouez le roi Arthur qui lutte contre un trio de frères maléfiques. Alors que dans leur autre jeu CSS, Grid Attack, vous allez dans une quête noble pour sauver le monde. Les deux jeux vous font utiliser « les pouvoirs de la grille CSS » pour vaincre les ennemis et accomplir des missions.

Ces jeux d'aventure mignons sont une façon amusante d'apprendre le CSS à travers le genre de RPG. Son approche facile vient du public prévu du site des jeunes apprenants, mais je crois que le codage de fantasme peut toujours être joué par des personnes âgées qui souhaitent apprendre à développer des sites Web de manière nostalgique.

---

La construction de sites Web est très utile pour la croissance personnelle et professionnelle. Cependant, le développement de ces compétences peut être difficile, en particulier pour ceux qui n'ont pas de formation en programmation. Mais j'espère qu'essayer ces cinq jeux peut rendre le processus d'apprentissage plus facile et plus amusant!