Article original : An Animated Introduction to Web Development from Back to Front

Le développement web combine plusieurs technologies pour créer des applications interactives qui s'exécutent sur des serveurs web et des navigateurs. Les applications web modernes nécessitent une compréhension à la fois du côté serveur (back end) et du côté client (front end) et de la manière dont ils communiquent entre eux. Cela implique d'apprendre des langages ainsi que des outils et des frameworks qui rationalisent le développement.

Le développement web a considérablement évolué au cours de la dernière décennie. Les développeurs d'aujourd'hui travaillent avec des frameworks sophistiqués, construisent des API, gèrent des bases de données et créent des interfaces utilisateur réactives. L'écosystème continue de croître avec l'émergence régulière de nouveaux outils.

Ce tutoriel vous permettra de commencer à apprendre certains des outils et technologies les plus utilisés du métier. Vous apprendrez JavaScript, HTTP, Node, Express, JSON, SQLite, Mongo, HTML, CSS, Web Components, React et GraphQL.

Même s'il y a 35 programmes différents, il y a beaucoup de technologies intéressantes que je ne couvre pas. Espérons que ce matériel éveillera votre intérêt et que vous commencerez un voyage pour apprendre l'écosystème merveilleux construit autour du web.

Une Introduction Animée au Développement Web

Pour rendre l'apprentissage du développement web plus accessible, j'ai créé un tutoriel interactif intitulé "Une Introduction au Développement Web de l'Arrière vers l'Avant". Ce "livre" utilise des replay de code annotés pour démontrer comment construire des applications web étape par étape.

Contrairement aux tutoriels traditionnels qui mélangent des extraits de code partiels avec des explications partielles, les replay de code rendent tout le code visible avec des liens vers celui-ci dans l'explication. Vous verrez exactement comment je construis chaque programme.

Pour voir un replay de code, cliquez sur les commentaires dans le panneau de gauche. Chaque commentaire met à jour le code dans l'éditeur et met en évidence le changement. Lisez l'explication, étudiez le code et utilisez le tuteur IA intégré si vous avez des questions. Pour plus d'informations sur les replay de code, vous pouvez regarder une courte démonstration ici.

Vous pouvez accéder gratuitement au "livre" de replay de code ici : https://playbackpress.com/books/webdevbook

Note sur les Prérequis : Ce n'est pas une introduction à la programmation. Vous devriez avoir une certaine expérience en programmation car je ne couvrirai pas les bases comme les instructions if, les boucles et les fonctions. Si vous avez déjà programmé dans un langage quelconque, vous devriez pouvoir suivre.

Si vous cherchez une introduction à la programmation, j'ai d'autres livres qui introduisent la programmation en C++ et Python ainsi que d'autres sur le site Playback Press.

Table des Matières

1. JavaScript

2. Le Back End : Node, Express, SQLite et Mongo

3. Le Front End : HTML, CSS, Bootstrap et Vues Express

4. React

5. GraphQL

Commencez

J'espère que cette introduction animée vous aidera à comprendre les concepts fondamentaux du développement web et vous donnera les moyens de commencer à construire vos propres applications web. Plongez-vous dedans, expérimentez et faites-moi savoir ce que vous en pensez !

Si vous avez des questions ou des commentaires, je serais ravi de les entendre. Les commentaires et les réflexions sont les bienvenus à tout moment : mark@playbackpress.com

Si vous souhaitez soutenir mon travail et aider à garder Playback Press gratuit pour tous, envisagez de faire un don en utilisant GitHub Sponsors. J'utilise toutes les donations pour les coûts d'hébergement. Votre soutien m'aide à continuer à créer du contenu éducatif comme celui-ci. Merci !