WeWeb tutorial, part 1

📊 Three-Way Translation Comparison: English / French / Spanish

---

1. INTRODUCTION – Understanding Web Languages

English (reference)	Français (original)	Español (traducción)
Understand the basics of Web languages	Comprenez les bases des langages du Web	Comprender los fundamentos de los lenguajes web
You just opened WeWeb and you want to create something right away: drag a button, change a color, see the result. That’s normal, that’s the power of « No-Code ».	Vous venez d’ouvrir WeWeb et vous avez envie de créer tout de suite : glisser un bouton, changer une couleur, voir le résultat. C’est normal, c’est la force du « No-Code ».	Acabas de abrir WeWeb y quieres crear algo de inmediato: arrastra un botón, cambia un color, mira el resultado. Es normal, ese es el poder del « sin código ».
However, you will soon encounter a frustrating situation: you want to place an element on the right, but it stays stuck on the left. You want to enlarge an image, but all the text next to it moves.	Cependant, vous allez vite rencontrer une situation frustrante : vous voulez placer un élément à droite, mais il reste bloqué à gauche. Vous voulez agrandir une image, mais c’est tout le texte à côté qui bouge.	Sin embargo, pronto te encontrarás con una situación frustrante: quieres colocar un elemento a la derecha, pero se queda atascado a la izquierda. Quieres ampliar una imagen, pero todo el texto que la rodea se desplaza.
Why? Is the tool broken?	Pourquoi ? Est-ce que l’outil est cassé ?	¿Por qué? ¿Está rota la herramienta?
No. It simply obeys invisible rules: those of computer code.	Non. C’est simplement qu’il obéit à des règles invisibles : celles du code informatique.	No. Simplemente obedece a reglas invisibles: las del código informático.
Even though WeWeb hides the code to make your life easier, it doesn’t erase it. To master the tool, you don’t need to know how to write code, but you must understand its logic.	Même si WeWeb cache le code pour vous faciliter la vie, il ne l’efface pas. Pour maîtriser l’outil, vous n’avez pas besoin de savoir écrire ce code, mais vous devez comprendre sa logique.	Aunque WeWeb oculta el código para facilitarte la vida, no lo borra. Para dominar la herramienta, no necesitas saber cómo escribir este código, pero sí comprender su lógica.
In this chapter, we’ll see how a web page is built. You’ll discover that behind every beautiful site hide three simple ingredients: a structure (HTML), an organization (Layout), and decoration (CSS).	Dans ce chapitre, nous allons voir comment est fabriquée une page web. Vous allez découvrir que derrière chaque joli site se cachent trois ingrédients simples : une structure (HTML), une organisation (Layout) et une décoration (CSS).	En este capítulo, veremos cómo se crea una página web. Descubrirás que detrás de cada sitio web atractivo se encuentran tres ingredientes básicos: una estructura (HTML), una organización (diseño) y una decoración (CSS).

---

2. HOW DOES A WEB PAGE WORK?

English (reference)	Français (original)	Español (traducción)
How does a web page work? Imagine a web page not as a sheet of paper that you draw on, but rather as a LEGO construction.	Comment fonctionne une page web ? Imaginez une page web non pas comme une feuille de papier sur laquelle on dessine, mais plutôt comme une construction en LEGO.	¿Cómo funciona una página web? Imagina una página web no como una hoja de papel sobre la que dibujas, sino como una construcción de LEGO.
Each piece must fit into another. For your browser (like Chrome or Safari) to display this construction, it follows a precise recipe made up of three steps.	Chaque pièce doit s’emboîter dans une autre. Pour que votre navigateur (comme Chrome ou Safari) puisse afficher cette construction, il suit une recette précise composée de trois étapes.	Cada pieza debe encajar con la siguiente. Para que tu navegador (como Chrome o Safari) pueda mostrar esta construcción, sigue una receta precisa compuesta por tres pasos.

---

3. HTML: THE SKELETON OF YOUR PAGE

English (reference)	Français (original)	Español (traducción)
HTML: The skeleton of your page The first step is structure. That’s the role of HTML (HyperText Markup Language).	L’HTML : Le squelette de votre page La première étape, c’est la structure. C’est le rôle du langage HTML.	HTML: El esqueleto de tu página El primer paso es la estructura. Este es el papel de HTML.
HTML doesn’t care about the beauty of your page. It cares about saying what things are. It defines the raw elements: « This is a heading, » « This is a paragraph, » « This is an image. »	L’HTML ne s’occupe pas de la beauté de votre page. Il s’occupe de dire ce que sont les choses. Il définit les éléments bruts : « Ceci est un titre », « Ceci est un paragraphe », « Ceci est une image ».	HTML no se preocupa por la estética de tu página. Se preocupa por decir qué son las cosas. Define los elementos básicos: « Esto es un encabezado », « Esto es un párrafo », « Esto es una imagen ».
Imagine you’re building a house. HTML is the structural work: foundations, concrete walls, beams балки .	Imaginez que vous construisez une maison. L’HTML, c’est le gros œuvre : les fondations, les murs en béton, les poutres.	Imagina que estás construyendo una casa. El HTML representa la estructura: los cimientos, los muros de hormigón, las vigas.
At this stage, the house isn’t painted, there’s no furniture, it’s gray and raw. But without it, the house collapses.	À ce stade, la maison n’est pas peinte, il n’y a pas de meubles, c’est gris et brut. Mais sans cela, la maison s’écroule.	En esta etapa, la casa no está pintada, no tiene muebles, es gris y está vacía. Pero sin él, la casa se derrumba.
A web page is a structure before it’s a design. Just like the walls of a house, if you remove the HTML, nothing remains.	Une page web est une structure avant d’être un design. Toute comme les murs d’une maison, si vous supprimez l’HTML, il ne reste plus rien.	Una página web es una estructura antes que un diseño. Al igual que las paredes de una casa, si se elimina el HTML, no queda nada.
The golden rule to remember when using WeWeb: everything works by nesting (boxes within boxes).	La règle d’or à retenir pour utiliser WeWeb : tout fonctionne par imbrication (des boîtes dans des boîtes).	La regla de oro que hay que recordar al usar WeWeb es: todo funciona mediante anidamiento (cajas dentro de cajas).
In HTML, and therefore in WeWeb, you rarely place an element « in empty space. » You have a big box (a Section). Inside, you put a medium box (a Container). Inside, you put a small box (a Button).	En HTML, et donc dans WeWeb, on place rarement un élément « dans le vide ». Vous avez une grande boîte (une Section). Dedans, vous mettez une boîte moyenne (un Conteneur). Dedans, vous mettez une petite boîte (un Bouton).	En HTML, y por lo tanto en la web, rara vez colocamos un elemento « en un espacio vacío ». Tienes una caja grande (una sección). Dentro, colocas una caja de tamaño mediano (un contenedor). Dentro, colocas una cajita (un botón).
We often use family terms to describe this: the big box is the Parent, and the elements inside are its Children.	On utilise souvent des termes de famille pour décrire cela : la grande boîte est le Parent, et les éléments à l’intérieur sont ses Enfants.	Para describir esto, a menudo se utilizan términos familiares: la caja grande es el Padre y los objetos que hay dentro son sus Hijos.
Why is this important? Because if you move the Parent, all the Children follow!	Pourquoi est-ce important ? Parce que si vous déplacez le Parent, tous les Enfants suivent !	¿Por qué es importante? Porque si mueves el elemento padre, ¡todos los hijos lo siguen!
It’s exactly like a moving box: if you carry the box, the books inside come with it.	C’est exactement comme un carton de déménagement : si vous portez le carton, les livres à l’intérieur viennent avec.	Es como una caja de mudanza: si la llevas, los libros que hay dentro se van con ella.
When you look at the left panel (the explorer), you see this hierarchy. Each time you drag a block into another, you create this Parent-Child relationship without writing code.	Quand vous regardez le panneau de gauche (l’explorateur), vous voyez cette hiérarchie. Chaque fois que vous glissez un bloc dans un autre, vous créez cette relation Parent-Enfant sans écrire de code.	En el panel izquierdo (el explorador), puedes ver esta jerarquía. Cada vez que arrastras un bloque sobre otro, creas esta relación padre-hijo sin necesidad de escribir código.

---

4. LAYOUT: ORGANIZING THINGS

English (reference)	Français (original)	Español (traducción)
Layout: Organizing things Once we have our boxes (HTML), we need to organize them.	Le Layout : Ranger les affaires Une fois que nous avons nos boîtes (HTML), il faut les ranger.	El diseño: Organizar las cosas Una vez que tenemos nuestras cajas (HTML), necesitamos organizarlas.
On the Web, this organization is called layout: it’s the use of certain CSS properties (like Flexbox) to tell how elements should be positioned relative to each other.	Sur le Web, cette organisation s’appelle le layout : c’est l’usage de certaines propriétés CSS (comme Flexbox) pour dire comment les éléments doivent se positionner les uns par rapport aux autres.	En la web, esta organización se llama diseño: es el uso de ciertas propiedades CSS (como Flexbox) para especificar cómo deben posicionarse los elementos entre sí.
If you don’t give any instructions, HTML elements have a somewhat dumb default behavior: they stack one below another, at the top left.	Si vous ne donnez aucune instruction, les éléments HTML ont un comportement par défaut un peu bête : ils s’empilent les uns sous les autres, en haut à gauche.	Si no se proporcionan instrucciones, los elementos HTML tienen un comportamiento predeterminado bastante absurdo: se apilan uno encima del otro en la esquina superior izquierda.
To create a modern design, you must tell the browser how to organize them. Simplifying, there are two main ways to arrange elements:	Pour créer un design moderne, vous devez dire au navigateur comment les organiser. En simplifiant, il existe deux grandes manières de ranger des éléments :	Para crear un diseño moderno, es necesario indicarle al navegador cómo organizarlos. Para simplificar, existen dos formas principales de organizar los elementos:
1. Vertically: One below another (in a column).	1. Verticalement : Les uns sous les autres (en colonne).	1. Verticalmente: Uno debajo del otro (en una columna).
2. Horizontally: One next to another (in a row).	2. Horizontalement : Les uns à côté des autres (en ligne).	2. Horizontalmente: Uno al lado del otro (en línea).
Warning: It’s often the Parent that decides how its Children are arranged.	Attention : C’est souvent le Parent qui décide comment se rangent ses Enfants.	Advertencia: A menudo son los padres quienes deciden cómo se comportan sus hijos.
Organize your boxes with Layout. If you want to align three buttons side by side, you shouldn’t try to force each button to move. You must select the box that contains them (the Parent) and tell it: « Arrange your children horizontally. »	Rangez vos boîtes avec le Layout. Si vous voulez aligner trois boutons côte à côte, vous ne devez pas essayer de forcer chaque bouton à bouger. Vous devez sélectionner la boîte qui les contient (le Parent) et lui dire : « Range tes enfants à l’horizontale ».	Organiza tus cajas con el diseño. Si quieres alinear tres botones uno al lado del otro, no intentes forzar el movimiento de cada botón. Debes seleccionar el cuadro que los contiene (el Padre) e indicarle: « Organiza los elementos secundarios horizontalmente ».
This is often where beginners get stuck in WeWeb. They try to move the final element, when they need to give the order to the container.	C’est souvent là que les débutants bloquent sur WeWeb. Ils essaient de bouger l’élément final, alors qu’il faut donner l’ordre au conteneur.	Aquí es donde los principiantes suelen quedarse atascados en WeWeb. Intentan mover el último elemento, cuando en realidad necesitan dar la orden al contenedor.

---

5. CSS: DECORATION

English (reference)	Français (original)	Español (traducción)
CSS: Decoration We have the structure (the house) and the organization (room placement). Now we need to make it look nice. That’s the job of CSS (Cascading Style Sheets).	Le CSS : La décoration Nous avons la structure (la maison) et l’organisation (le placement des pièces). Maintenant, il faut rendre ça joli. C’est le travail du CSS (Cascading Style Sheets).	CSS: Decoración Tenemos la estructura (la casa) y la distribución (la ubicación de las habitaciones). Ahora necesitamos que se vea bien. Esa es la función de CSS.
CSS only manages appearance: text color, font, rounded borders, spaces between elements (margins).	Le CSS gère uniquement l’apparence : La couleur du texte. La police d’écriture. Les bordures arrondies. Les espaces entre les éléments (les marges).	CSS solo gestiona la apariencia: El color del texto. La fuente. Los bordes redondeados. Los espacios entre los elementos (los márgenes).
CSS is like the paint, wallpaper, and decoration of your house. It can’t build a wall (that’s HTML’s job), but it can paint it blue.	Le CSS est comme la peinture, le papier peint et la décoration de votre maison. Il ne peut pas construire un mur (ça, c’est l’HTML), mais il peut le peindre en bleu.	CSS es como la pintura, el papel tapiz y la decoración de tu casa. No puede construir una pared (para eso está HTML), pero puede pintarla de azul.
Customize your site’s appearance with CSS. Don’t try to use CSS to fix a structural problem. If your text is shifted to the side, changing its color won’t help. Style dresses the structure, it doesn’t replace it.	Customiser l’apparence de votre site avec le CSS. N’essayez pas d’utiliser du CSS pour régler un problème de structure. Si votre texte est décalé sur le côté, changer sa couleur ne servira à rien. Le style habille la structure, il ne la remplace pas.	Personaliza la apariencia de tu sitio con CSS. No intentes usar CSS para solucionar un problema estructural. Si el texto está desplazado hacia un lado, cambiarle el color no servirá de nada. El estilo embellece la estructura; no la reemplaza.

---

6. THE DOM: THE INVISIBLE TREE

English (reference)	Français (original)	Español (traducción)
The DOM: The invisible tree Finally, a quick technical note. When your browser reads the HTML code, it creates an in-memory representation called the DOM.	Le DOM : L’arbre invisible Pour finir, un petit mot technique. Quand votre navigateur lit le code HTML, il crée une représentation en mémoire qu’on appelle le DOM.	El DOM: El árbol invisible Por último, una breve nota técnica. Cuando tu navegador lee el código HTML, crea una representación en memoria llamada DOM.
It’s a kind of family tree of your page. Each node of this tree represents an HTML element (or a piece of text).	C’est une sorte d’arbre généalogique de votre page. Chaque nœud de cet arbre représente un élément HTML (ou un bout de texte).	Es como un árbol genealógico de tu página. Cada nodo de este árbol representa un elemento HTML (o un fragmento de texto).
Why am I telling you this? Because WeWeb is a tool that manipulates this tree for you.	Pourquoi je vous parle de ça ? Parce que WeWeb est un outil qui manipule cet arbre pour vous.	¿Por qué te cuento esto? Porque WeWeb es una herramienta que manipula este árbol por ti.
When you change a color in WeWeb, the tool tells the browser: « Find the button’s branch and paint it red. »	Quand vous changez une couleur dans WeWeb, l’outil va dire au navigateur : « Trouve la branche du bouton et peins-la en rouge ».	Cuando cambias un color en WeWeb, la herramienta le indica al navegador: « Busca la rama del botón y píntala de rojo ».
When you move a block, WeWeb cuts a branch of the tree and pastes it elsewhere.	Quand vous déplacez un bloc, WeWeb coupe une branche de l’arbre et la recolle ailleurs.	Cuando mueves un bloque, WeWeb corta una rama del árbol y la vuelve a pegar en otro lugar.
You don’t need to see this tree, but knowing it exists helps you understand that WeWeb isn’t magic: it’s a remote control to operate the browser.	Vous n’avez pas besoin de voir cet arbre, mais savoir qu’il existe vous aide à comprendre que WeWeb n’est pas magique : c’est une télécommande pour piloter le navigateur.	No es necesario que veas este árbol, pero saber que existe te ayuda a comprender que WeWeb no es magia: es un control remoto para operar el navegador.

---

7. JAVASCRIPT AND DATA: BRINGING IT TO LIFE

English (reference)	Français (original)	Español (traducción)
JavaScript and Data: Bringing it to life! We’ve built the walls (HTML) and applied the paint (CSS). But for now, our house has no electricity. If you press a switch, nothing happens.	JavaScript et Données : rendre cela vivant ! Nous avons construit les murs (HTML) et appliqué la peinture (CSS). Mais pour l’instant, notre maison est sans courant. Si vous appuyez sur un interrupteur, rien ne se passe.	JavaScript y datos: ¡Dándoles vida! Hemos construido las paredes (HTML) y aplicado la pintura (CSS). Pero por ahora, nuestra casa no tiene luz. Si aprietas un interruptor, no pasa nada.
To make the page alive and interactive, developers use a third language: JavaScript.	Pour rendre la page vivante et interactive, les développeurs utilisent un troisième langage : le JavaScript.	Para que la página cobre vida y sea interactiva, los desarrolladores utilizan un tercer lenguaje: JavaScript.
In WeWeb, you won’t need to write complex lines of code for this, but you’ll manipulate three concepts that are its direct translation:	Dans WeWeb, vous n’aurez pas besoin d’écrire de lignes de code complexes pour cela, mais vous manipulerez trois concepts qui en sont la traduction directe :	En WeWeb, no necesitarás escribir líneas de código complejas para esto, pero manipularás tres conceptos que son su traducción directa:

7.1 WORKFLOWS

English (reference)	Français (original)	Español (traducción)
1. Workflows JavaScript is used to say: « If the user does this, then that happens. » In WeWeb, this is called a Workflow. It’s a sequence of logical actions that you assemble visually.	1. Les Workflows Le JavaScript sert à dire : « Si l’utilisateur fait ceci, alors il se passe cela ». Dans WeWeb, cela s’appelle un Workflow. C’est une suite d’actions logiques que vous assemblez visuellement.	1. Flujos de trabajo JavaScript se usa para indicar: « Si el usuario hace esto, entonces sucede aquello ». En WeWeb, esto se llama flujo de trabajo. Es una secuencia de acciones lógicas que se ensamblan visualmente.
In code: We write an onClick function.	En code : On écrit une fonction onClick.	En el código: Escribimos una función onClick.
In WeWeb: You create a Workflow triggered by a « Click. »	Dans WeWeb : On crée un Workflow déclenché par un « Click ».	En WeWeb: Se crea un flujo de trabajo que se activa mediante un « Clic ».

7.2 VARIABLES

English (reference)	Français (original)	Español (traducción)
2. Variables For an application to work, it needs to « remember » certain things: is the menu open? Is the user in « Dark Mode »? This information is stored in Variables.	2. Les Variables Pour qu’une application fonctionne, elle doit se « souvenir » de certaines choses : est-ce que le menu est ouvert ? Est-ce que l’utilisateur est en « Dark Mode » ? Ces informations sont stockées dans des Variables.	2. Las variables Para que una aplicación funcione, necesita « recordar » ciertas cosas: ¿Está abierto el menú? ¿Está el usuario en « Modo oscuro »? Esta información se almacena en variables.
A variable in WeWeb plays the same role as a reactive state (for example, a useState in React or a value stored in a global Store like Redux): it’s a stored value that, when changed, automatically updates the interface.	Une variable dans WeWeb joue le même rôle qu’un état réactif (par exemple un useState en React ou une valeur stockée dans un Store global comme Redux) : c’est une valeur mémorisée qui, lorsqu’elle change, met automatiquement à jour l’interface.	En WeWeb, una variable desempeña el mismo papel que un estado reactivo (por ejemplo, un useState en React o un valor almacenado en un Store global como Redux): es un valor almacenado que, cuando cambia, actualiza automáticamente la interfaz.

7.3 COLLECTIONS

English (reference)	Français (original)	Español (traducción)
3. Collections Finally, your site will need to display real data (product lists, users) coming from an external database (like Airtable or Supabase). In traditional development, this is called making an API request. In WeWeb, you simply create a Collection.	3. Les Collections Enfin, votre site aura besoin d’afficher des données réelles (liste de produits, utilisateurs) venant d’une base de données externe (comme Airtable ou Supabase). En développement classique, on appelle cela faire une requête API. Dans WeWeb, on crée simplement une Collection.	3. Las colecciones Finalmente, tu sitio deberá mostrar datos reales (lista de productos, usuarios) de una base de datos externa (como Airtable o Supabase). En el desarrollo tradicional, esto se llama hacer una solicitud API. En WeWeb, simplemente creas una Colección.
A Collection is a list of data that WeWeb fetches for you from outside and keeps available so you can display it on your pages.	Une Collection est une liste de données que WeWeb va chercher pour vous à l’extérieur et qu’il garde à disposition pour que vous puissiez les afficher dans vos pages.	Una colección es una lista de datos que WeWeb recuperará de fuentes externas y mantendrá disponibles para que los muestres en tus páginas.
Now that you have the complete overview (Structure, Style, Logic, and Data), let’s summarize everything.	Maintenant que vous avez la vue d’ensemble complète (Structure, Style, Logique et Données), résumons tout cela.	Ahora que ya tienes una visión general completa (estructura, estilo, lógica y datos), vamos a resumirlo todo.

---

8. YOUR TURN – PRACTICAL EXERCISE

English (reference)	Français (original)	Español (traducción)
Your turn Let’s move to practice. We’re not going to open WeWeb yet, but we’re going to learn to « read » a web page like a pro. This is an essential skill called structural analysis.	À vous de jouer Passons à la pratique. Nous n’allons pas encore ouvrir WeWeb, mais nous allons apprendre à « lire » une page web comme un pro. C’est une compétence essentielle appelée l’analyse structurelle.	Tú decides Pongámonos manos a la obra. Todavía no vamos a abrir WeWeb, pero vamos a aprender a « leer » una página web como un experto. Esta es una habilidad esencial llamada análisis estructural.

Context

English (reference)	Français (original)	Español (traducción)
Context Imagine you’re on an online shopping site. You see a « Product Card » for a pair of sneakers. Visually, it’s a white rectangle with:	Contexte Imaginez que vous êtes sur un site de vente en ligne. Vous voyez une « Carte Produit » pour une paire de baskets. Visuellement, c’est un rectangle blanc avec :	Contexto Imagina que estás en un sitio de compras en línea. Ves una « Ficha de producto » para un par de zapatillas. Visualmente, es un rectángulo blanco con:
– A photo of the shoe at the top.	– Une photo de la chaussure en haut.	– Una foto del zapato en la parte superior.
– The model name below (« Air Max »).	– Le nom du modèle en dessous (« Air Max »).	– El nombre del modelo que aparece a continuación (« Air Max »).
– At the very bottom, the price (« €120 ») on the left, and a « Buy » button on the right.	– Tout en bas, le prix (« 120€ ») à gauche, et un bouton « Acheter » à droite.	– En la parte inferior, el precio (« €120 ») se encuentra a la izquierda y el botón « Comprar » a la derecha.

Instructions

English (reference)	Français (original)	Español (traducción)
Instructions Try to describe this card using the three concepts seen above:	Consigne Essayez de décrire cette carte en utilisant les trois concepts vus plus haut :	Orden Intenta describir este mapa utilizando los tres conceptos que se muestran arriba:
– Structure (HTML): What are the boxes?	– Structure (HTML) : Quelles sont les boîtes ?	– Estructura (HTML): ¿Cuáles son las cajas?
– Layout (Organization): How are they arranged (vertical or horizontal)?	– Layout (Organisation) : Comment sont-elles rangées (vertical ou horizontal) ?	– Diseño (Organización): ¿Cómo están dispuestos (vertical u horizontalmente)?
– Style (CSS): What is purely decorative?	– Style (CSS) : Qu’est-ce qui est purement décoratif ?	– Estilo (CSS): ¿Qué es puramente decorativo?
Take 2 minutes to think about it before opening the answer key.	Prenez 2 minutes pour y réfléchir avant d’ouvrir le corrigé.	Tómate 2 minutos para pensarlo antes de abrir la clave de respuestas.

---

9. SUMMARY

English (reference)	Français (original)	Español (traducción)
In summary Keep in mind: boxes (HTML) → arrangement (Layout) → styling (CSS).	En résumé Gardez en tête : boîtes (HTML) → rangement (Layout) → habillage (CSS).	En resumen Ten en cuenta: cuadros (HTML) → diseño → estilos (CSS).
A page is a set of nested boxes (Parents and Children).	Une page est un ensemble de boîtes imbriquées (Parents et Enfants).	Una página es un conjunto de cajas anidadas (Padres e Hijos).
Elements are arranged either in a column (vertical) or in a row (horizontal). The Parent decides the arrangement.	On range les éléments soit en colonne (vertical), soit en ligne (horizontal). C’est le Parent qui décide du rangement.	Los elementos se organizan en columna (vertical) o en fila (horizontal). El padre decide cómo se organizan.
Color, size, and borders are just styling.	La couleur, la taille et les bordures ne sont que de l’habillage.	El color, el tamaño y los bordes son solo decorativos.
WeWeb is an interface that allows you to manipulate these languages (HTML/CSS).	WeWeb est une interface qui te permet de manipuler ces langages (HTML/CSS).	WeWeb es una interfaz que permite manipular estos lenguajes (HTML/CSS).

---

Verbs list

Here is the revised list of unique verbs, marked with * where the French and Spanish forms share a clear visual similarity with the English base, and organized into separate tables by CEFR level (from A1 to C2).

Within each level, verbs are sorted alphabetically by English.

Legend: * = the three languages share a similar-looking root (cognates)

---

A1

English	Français	Español
be	être	ser / estar
become	devenir	convertirse
build	construire	construir
buy *	acheter	comprar
call *	appeler	llamar
can (to be able)	pouvoir	poder
change *	changer	cambiar
come	venir	venir
create *	créer	crear
cut	couper	cortar
do / make	faire	hacer
drag	glisser	arrastrar
draw (paint)	dessiner	dibujar / pintar
find	trouver	encontrar
fit (into)	emboîter	encajar
follow	suivre	seguir
get (stuck)	rester (bloqué)	quedarse (atascado)
give	donner	dar
go	aller	ir
have	avoir	tener
help *	aider	ayudar
hide	cacher	ocultar
know (something)	savoir	saber
learn	apprendre	aprender
live	vivre	vivir
look (at)	regarder	mirar
move	bouger / déplacer	mover(se) / desplazar
need (to)	avoir besoin de	necesitar
open *	ouvrir	abrir
paint	peindre	pintar
place	placer	colocar
press	appuyer!	apretar!
put	mettre	poner
read	lire	leer
remember	se souvenir	recordar
remove	supprimer / enlever	eliminar / quitar
see	voir	ver
show	montrer	mostrar
speak *	parler	hablar
take (time)	prendre	tomar
tell (say)	dire	decir
think (about)	réfléchir (à)	pensar (en)
understand *	comprendre	comprender
use *	utiliser	usar / utilizar
want	vouloir	querer
work	fonctionner / marcher	funcionar
write	écrire	escribir

---

A2

English	Français	Español
apply *	appliquer	aplicar
arrange	ranger	organizar
assemble *	assembler	ensamblar
break (collapse)	s’écrouler!	derrumbarse!
carry	porter	llevar
choose	choisir	elegir
decide *	décider	decidir
describe *	décrire	describir
discover *	découvrir	descubrir
erase	effacer	borrar
exist *	exister	existir
explain *	expliquer	explicar
fetch (go get)	chercher (aller chercher)	recuperar / buscar
fill (in)	remplir !!!	llenar
keep (maintain)	garder	mantener
leave (be left)	rester	quedar(se)
let (allow)	laisser	dejar / permitir
master *	maîtriser	dominar
meet	rencontrer	encontrar(se)
need (require)	avoir besoin de	necesitar
organize *	organiser	organizar
play (a role)	jouer (un rôle)	desempeñar (un papel) !!!
prepare *	préparer	preparar
push (press)	appuyer (sur)	apretar / presionar
receive *	recevoir !!!	recibir
remember	se rappeler	recordar
replace *	remplacer	reemplazar
represent *	représenter	representar
seem	sembler	parecer
separate *	séparer	separar
stack	empiler !!!	apilar !!!
stay	rester	quedar(se)
store *	stocker	almacenar !!!
try *	essayer	intentar
update *	mettre à jour	actualizar

---

B1

English	Français	Español
align *	aligner	alinear
avoid *	éviter	evitar
behave	se comporter	comportarse
block (get stuck) *	bloquer	bloquear / atascar
consist (of) *	consister (en)	consistir (en)
define *	définir	definir
display *	afficher	mostrar / visualizar
enlarge *	agrandir	ampliar !!!
force *	forcer	forzar
frustrate *	frustrer	frustrar
handle (manage)	gérer	manejar
illustrate *	illustrer	ilustrar
include *	inclure	incluir
increase *	augmenter	aumentar
interact *	interagir	interactuar
manipulate *	manipuler	manipular
mean (signify)	vouloir dire	significar / querer decir
mention *	mentionner	mencionar
nest	imbriquer !!!	anidar !!!
obey *	obéir (à)	obedecer
operate (pilot) *	piloter	operar / pilotar
paste	coller	pegar
prevent *	empêcher	impedir
produce *	produire	producir
provide *	fournir	proporcionar
publish *	publier	publicar
remove *	supprimer	eliminar
require *	exiger / nécessiter	requerir
solve *	résoudre	resolver
suppose *	supposer	suponer
surround *	entourer	rodear !!!
trigger *	déclencher !!!	activar / desencadenar !!!

---

B2

English	Français	Español
analyze *	analyser	analizar
belong (to)	appartenir (à)	pertenecer (a)
compare *	comparer	comparar
complicate *	compliquer	complicar
conclude *	conclure	concluir
customize *	personnaliser	personalizar
eliminate *	éliminer	eliminar
emphasize *	souligner !!!	enfatizar / subrayar !!!
enable *	permettre	permitir / posibilitar
encounter *	rencontrer	encontrar(se)
enhance *	améliorer	mejorar
establish *	établir	establecer
evaluate *	évaluer	evaluar
execute *	exécuter	ejecutar
generate *	générer	generar
implement *	implémenter	implementar
infer *	déduire	inferir / deducir
integrate *	intégrer	integrar
isolate *	isoler	aislar
obtain *	obtenir	obtener
omit *	omettre	omitir
position *	positionner	posicionar
preserve *	préserver	preservar
prioritize *	prioriser	priorizar
query (API)	requêter !!!	consultar / hacer una consulta !!!
recognize *	reconnaître	reconocer
refine *	affiner !!!	refinar
respond *	répondre	responder
retrieve *	récupérer	recuperar
shift	décaler !!!	desplazar !!!
specify *	spécifier	especificar
structure *	structurer	estructurar
summarize *	résumer	resumir
transform *	transformer	transformar

---

C1

English	Français	Español
articulate *	articuler	articular
conceptualize *	conceptualiser	conceptualizar
contextualize *	contextualiser	contextualizar
deduce *	déduire	deducir
differentiate *	différencier	diferenciar
encapsulate *	encapsuler	encapsular
extrapolate *	extrapoler	extrapolar
facilitate *	faciliter	facilitar
hierarchize *	hiérarchiser	jerarquizar
illustrate *	illustrer	ilustrar
infer *	inférer	inferir
leverage (use effectively)	tirer parti de !!!	aprovechar
mediate *	médiatiser	mediar
optimize *	optimiser	optimizar
reconcile *	concilier	reconciliar / conciliar
scaffold	étayer !!!	andamiar / estructurar !!!
simulate *	simuler	simular
synchronize *	synchroniser	sincronizar
synthesize *	synthétiser	sintetizar

---

C2

English	Français	Español
architect (design) *	architecturer	arquitecturar / diseñar
compartmentalize *	compartimenter	compartimentar
deconstruct *	déconstruire	deconstruir
discriminate (distinguish finely) *	discriminer	discriminar
dissect *	disséquer	diseccionar
granularize	granulariser	granularizar
instantiate *	instancier	instanciar
iteratively refine	affiner itérativement	refinar iterativamente
juxtapose *	juxtaposer	yuxtaponer
meta-analyze *	méta-analyser	meta-analizar
operationalize *	opérationnaliser	operacionalizar
parameterize *	paramétrer	parametrizar
recursively apply	appliquer récursivement	aplicar recursivamente
reify * !!!	réifier	reificar
subsume * !!!	subsumer	subsumir
triangulate *	trianguler	triangular
vectorize *	vectoriser	vectorizar

---

Notes

A1 contains the highest number of verbs – this reflects the instructional, action-oriented nature of the original tutorial text.

Duplicates removed – each verb appears only once, even if it could fit multiple contexts.

Cognates (*) – marked where French and Spanish share a clear Latin root similar to English. Not marked for Germanic-root verbs (e.g., build → construire/construir is not a direct visual match, so no *).

Most difficult verbs

Вы выделили глаголы, которые показались вам особенно сложными, необычными или заслуживающими отдельного внимания, пометив их тремя восклицательными знаками !!! (иногда вместе со звёздочкой *!!!).

Я собрал все такие глаголы из ваших таблиц в отдельный список. Для каждого из них я дам:

1. Простое объяснение (на примерах из веб-разработки).
2. Мнемотехнику или совет по запоминанию (как связать французский, испанский и английский варианты).

---

📌 Список « сложных » глаголов (отмеченных !!!)

1. appuyer (fr) / apretar (es) — to press

• Контекст: « Si vous appuyez sur un interrupteur, rien ne se passe. » (Если вы нажмете на выключатель, ничего не произойдет.)
• Пример: Appuyez sur le bouton « Envoyer » / Aprieta el botón « Enviar » (Нажмите кнопку « Отправить »).
• Как запомнить: Во французском appuyer похоже на английское apply (применить). В испанском apretar — это также « сжимать », « затягивать » (как ремень). Представьте, что вы применяете (apply) силу, чтобы нажать на кнопку.

2. s’écrouler (fr) / derrumbarse (es) — to collapse

• Контекст: « Mais sans cela [HTML], la maison s’écroule. » (Но без него [HTML] дом рушится.)
• Пример: Le site web peut s’écrouler sous la charge / El sitio web puede derrumbarse bajo la carga (Сайт может рухнуть под нагрузкой).
• Как запомнить: Во французском écrouler звучит как « э-кру-ле » — представьте, как с грохотом (crash, crumble) рассыпается конструкция. В испанском derrumbar(se) родственно английскому derumble (разрушить). Связка: Crash (англ.) → Écrouler (фр.) → Derrumbar (исп.).

3. remplir (fr) / llenar (es) — to fill (in)

• Контекст: « On remplit les espaces. » (Мы заполняем промежутки.)
• Пример: Remplir un formulaire / Llenar un formulario (Заполнить форму).
• Как запомнить: Французский remplir похож на английское replenish (пополнять, наполнять снова). Испанский llenar легко запомнить по фразе « Llenar de gasolina » (залить бензин полный бак — full). Связка: Replenish/Full → Remplir/Llenar.

4. desempeñar (un papel) (es) — to play (a role)

• Контекст: « Une variable joue le même rôle / desempeña el mismo papel » (Переменная играет ту же роль).
• Пример: El CSS desempeña un papel crucial en el diseño (CSS играет ключевую роль в дизайне).
• Как запомнить: В испанском desempeñar состоит из des- + empeñar (закладывать, брать на себя обязательство). Буквально: « снять с себя обязательство (выполнив его) ». Английское to play a role можно связать с to perform (выполнять, исполнять). Desempeñar = to perform a role.

5. recevoir (fr) / recibir (es) — to receive

• Контекст: « WeWeb reçoit des données. » (WeWeb получает данные.)
• Пример: Recevoir une requête / Recibir una solicitud (Получить запрос).
• Как запомнить: Это классическая когната (родственное слово) с английским receive. Французское recevoir и испанское recibir очень похожи на латинский корень recipere. Просто запомните: Re (назад) + Capere (брать) → получать.

6. empiler (fr) / apilar (es) — to stack

• Контекст: « Les éléments HTML s’empilent les uns sous les autres. » (Элементы HTML складываются друг под другом.)
• Пример: Empiler des boîtes / Apilar cajas (Складывать коробки в стопку).
• Как запомнить: Французское empiler происходит от pile (стопка, куча). Английское pile (куча, стопка). Испанское apilar — от pila (стопка). Связка: Pile (англ.) → Empiler / Apilar.

7. stocker (fr) / almacenar (es) — to store

• Контекст: « On stocke les données. » (Мы сохраняем данные.)
• Пример: Stocker des informations / Almacenar información (Хранить информацию).
• Как запомнить: Английское stock (запас, склад) → французское stocker. Испанское almacenar происходит от almacén (склад). Связка через английское warehouse (склад): у французов « stock », у испанцев « almacén ».

8. ampliar (es) — to enlarge, to expand

• Контекст: « Vous voulez agrandir une image / ampliar una imagen. » (Вы хотите увеличить изображение.)
• Пример: Ampliar la foto (Увеличить фото).
• Как запомнить: Свяжите с английскими словами ample (обильный, большой) и amplify (увеличивать, усиливать). Испанское ampliar — прямой родственник этих слов.

9. rodear (es) — to surround

• Контекст: « Tout le texte à côté bouge / todo el texto que la rodea se desplaza. » (Весь текст, который окружает её [картинку], смещается.)
• Пример: Los márgenes rodean el texto (Поля окружают текст).
• Как запомнить: Английское road (дорога). Представьте, что дорога (road) окружает (rodear) поле. Или roda (колесо) — оно « окружает » ось.

10. déclencher (fr) / desencadenar (es) — to trigger

• Контекст: « Un Workflow déclenché par un clic / activar mediante un clic. » (Рабочий процесс, запускаемый кликом.)
• Пример: Un événement déclenche une action / Un evento desencadena una acción (Событие запускает действие).
• Как запомнить: Очень сильное слово. Déclencher = dé- (от-) + clencher (защёлка, засов). Буквально: « снять с защёлки » → запустить, спустить курок. В испанском desencadenar = des- (от-) + cadena (цепь) → « освободить от цепи ». Связка: Trigger (спусковой крючок) → Déclencher (снять с защёлки) → Desencadenar (освободить от цепи).

11. souligner (fr) / subrayar / enfatizar (es) — to emphasize, underline

• Контекст: « Pour souligner un point important. » (Чтобы подчеркнуть важный момент.)
• Пример: Ce code souligne l’importance de la structure / Este código subraya la importancia de la estructura (Этот код подчеркивает важность структуры).
• Как запомнить: Французский souligner = sous (под) + ligne (линия) → « подчеркивать ». Испанский subrayar = sub (под) + raya (линия) → тоже « подчеркивать ». Английское underline — то же самое. Испанское enfatizar — прямая когната с английским emphasize.

12. requêter (fr) — to query (an API)

• Контекст: « Faire une requête API / hacer una consulta API » (Сделать API-запрос).
• Пример: Le frontend requête la base de données (Фронтенд запрашивает базу данных).
• Как запомнить: Английское query (запрос). Французское requête — это и есть « запрос ». Глагол requêter образован от существительного. Испанский использует описательный оборот hacer una consulta (сделать запрос). Запомните связку Query → Requête → Requêter.

13. affiner (fr) — to refine

• Контекст: « Pour affiner le design » (Чтобы улучшить/доработать дизайн).
• Пример: Affiner les détails (Доработать детали).
• Как запомнить: Свяжите с английским fine (хороший, тонкий, мелкий). Affiner = делать более fine (тонким, качественным). Испанское refinar — прямая когната с английским refine.

14. décaler (fr) / desplazar (es) — to shift, move sideways

• Контекст: « Si votre texte est décalé sur le côté » (Если ваш текст сдвинут в сторону).
• Пример: Une marge décale le texte / Un margen desplaza el texto (Отступ сдвигает текст).
• Как запомнить: Décaler = dé- (от-) + cale (клин, подпорка) → « вынуть клин » → сдвинуть. В испанском desplazar = des- + plaza (место) → « сдвинуть с места ». Связка через английское displace (смещать, вытеснять).

15. tirer parti de (fr) — to leverage, take advantage of

• Контекст: « Pour tirer parti des fonctionnalités » (Чтобы воспользоваться функциями).
• Пример: Tirer parti du CSS pour le style / Aprovechar el CSS para el estilo (Использовать CSS для стилизации).
• Как запомнить: Это устойчивое выражение. Tirer = тянуть, parti = партия/сторона. Буквально: « извлечь выгоду ». Английское leverage (рычаг, использовать как рычаг). Испанское aprovechar (использовать с пользой). Запомните фразу: Tirer parti = Get an advantage.

16. étayer (fr) — to scaffold, to support

• Контекст: « Pour étayer la structure » (Чтобы подкрепить/укрепить структуру).
• Пример: Des exemples étayent la théorie (Примеры подкрепляют теорию).
• Как запомнить: Очень книжное слово. Связано с étai (подпорка, подкос). Английское stay (подпорка, штаг на корабле) — это родственное слово (через германские корни). Испанское andamiar происходит от andamio (строительные леса, scaffolding). Запомните: Étai/Stay (подпорка) → Étayer = ставить подпорки, обосновывать.

17. reify (en) / réifier (fr) / reificar (es) — to reify

• Контекст: « To reify an abstract concept » (Сделать абстрактное понятие осязаемым, « овеществить »).
• Пример: Le code réifie la logique en objets / El código reifica la lógica en objetos (Код воплощает логику в объектах).
• Как запомнить: Это философский/программистский термин. Латинский корень res (вещь, предмет). Reify = превратить в вещь. Французское réifier и испанское reificar — прямые когнаты. Связка: Res (вещь, лат.) → Reify.

18. subsume (en) / subsumer (fr) / subsumir (es) — to subsume

• Контекст: « To subsume one rule under another » (Подвести одно правило под другое, включить в более общую категорию).
• Пример: Ce cas est subsumé sous une règle générale / Este caso se subsume bajo una regla general (Этот случай подпадает под общее правило).
• Как запомнить: Латинский корень sub- (под) + sumere (брать). Subsume = взять под (общую категорию). Во всех трёх языках слово выглядит почти одинаково (subsume, subsumer, subsumir).

---

📊 Сводная таблица самых важных (по вашему запросу)

Английский	Французский	Испанский	Короткий способ запомнить
to trigger	déclencher	desencadenar	Снять с защёлки / освободить от цепи
to shift	décaler	desplazar	Вынуть клин / сдвинуть с места
to stack	empiler	apilar	Pile (стопка) → empiler / apilar
to query	requêter	hacer una consulta	Query → Requête → Requêter
to refine	affiner	refinar	Fine (тонкий/хороший) → affiner
to surround	entourer	rodear	Road (дорога) → rodear (окружать)
to fill	remplir	llenar	Replenish / Full → remplir / llenar
to collapse	s’écrouler	derrumbarse	Crash / Crumble → écrouler / derrumbar

Эти глаголы встречаются в технических текстах реже базовых, но именно они придают языку точность и профессиональное звучание. Сосредоточьтесь на первой половине списка (до B2), так как C1-C2 слова встречаются в основном в очень продвинутых академических или юридических текстах.