Desarrollador web Full Stack

Por qué el responsive es indispensable Hoy, más de la mitad de las visitas a un sitio web se hacen desde un teléfono móvil. Una misma página debe mostrarse correctamente en una pantalla de 360 píxeles (px) de ancho, en una tableta de 768 px y en un m...

Una dimensión o dos dimensiones Ya ha utilizado Flexbox para construir una barra de navegación y una serie de tarjetas, y Grid para maquetar una página de inicio. Las dos herramientas forman parte del lenguaje Cascading Style Sheets (CSS) y pueden da...

Por qué Grid después de Flexbox En las actividades anteriores usted construyó una barra de navegación y una serie de tarjetas con Flexbox. Flexbox es un modelo unidimensional: organiza los elementos en una sola dirección, ya sea una fila o una column...

Por qué descomponer un problema Hasta ahora usted ha preparado su puesto de trabajo: un editor, un terminal, un navegador para inspeccionar el código fuente y Git para conservar el historial de sus versiones. Estas herramientas solo son útiles si sab...

Repaso rápido y salto de línea con flex-wrap En la actividad anterior usted construyó una barra de navegación con Flexbox. Ya conoce lo esencial: un contenedor recibe display: flex y sus hijos directos se convierten en elementos flexibles. Estos elem...

El principio de Flexbox: un contenedor y sus elementos En las actividades anteriores usted vio que los elementos de bloque se apilan unos debajo de otros y que los elementos en línea se colocan uno al lado del otro sin control preciso del espacio. Ta...

Las tres zonas de trabajo de Git En la actividad anterior usted instaló Git y creó el repositorio de su carpeta de trabajo con el comando «git init». Esa carpeta contiene ahora una subcarpeta oculta llamada «.git». Allí Git guarda todo el historial d...

Por qué necesita un control de versiones Hasta ahora ha aprendido a moverse por el terminal, a crear, copiar, mover y eliminar archivos, y a trabajar desde el terminal integrado en su editor. Falta una pieza esencial: poder guardar el historial de su...

Hasta ahora ha aprendido a manejar su editor de código y a controlar su ordenador desde el terminal. En esta lección añade una tercera herramienta a su entorno de desarrollador: el navegador web. Para un usuario corriente, el navegador solo sirve par...

Qué es el terminal integrado y por qué usarlo Hasta ahora usted ha trabajado con dos herramientas separadas: el editor de código, donde escribe y organiza sus archivos, y el terminal, donde ejecuta comandos como pwd, ls, cd, mkdir, cp, mv o rm. Cambi...

Por qué manipular archivos desde el terminal Ya sabe orientarse en el terminal: «pwd» le indica dónde se encuentra, «ls» lista el contenido de una carpeta y «cd» le permite cambiar de carpeta. El siguiente paso consiste en actuar sobre los archivos: ...

Orientarse en el terminal: el comando pwd En la actividad anterior usted abrió por primera vez un terminal, la herramienta que permite controlar el ordenador con comandos escritos. Esta forma de trabajar se llama interfaz de línea de comandos (CLI, d...

Qué es el terminal y por qué lo necesita Hasta ahora ha utilizado su ordenador mediante una interfaz gráfica de usuario (GUI, del inglés Graphical User Interface). Hace clic en iconos, arrastra archivos y abre menús. El terminal ofrece otra forma de ...

Qué es una extensión y por qué existe Usted ya ha instalado Visual Studio Code (VS Code), ha abierto su carpeta de trabajo y sabe moverse por el explorador, las pestañas y la paleta de comandos. Tal como viene al instalarlo, VS Code es un editor lige...

Las cinco zonas de la ventana Ya ha instalado Visual Studio Code (VS Code) y ha abierto su carpeta de trabajo. Ahora debe aprender a moverse con soltura dentro de la herramienta. Un desarrollador pasa varias horas al día en su editor, así que cada se...

Texto plano frente a texto enriquecido En las actividades anteriores usted ha visto que un programa es un conjunto de instrucciones escritas para un ordenador. También ha visto que esas instrucciones se guardan en archivos, ordenados en carpetas e id...

En la actividad anterior vio que el ordenador guarda su trabajo en archivos y que esos archivos se ordenan en carpetas. Ahora va a aprender a orientarse con precisión entre ellos. Un desarrollador pasa buena parte del día abriendo, creando y enlazand...

Por qué el ordenador necesita archivos En la actividad anterior vio que un programa es un conjunto de instrucciones escritas para un ordenador. Esas instrucciones no flotan en el aire: se guardan en algún sitio. Ese sitio es un archivo, y los archivo...

Un programa, una lista de instrucciones Un programa es una serie de instrucciones escritas por una persona para que un ordenador las ejecute. Cada instrucción indica una acción precisa: mostrar un texto, sumar dos números, guardar un dato o comprobar...

Bienvenido a la formación de Desarrollador Full-Stack. Este primer capítulo le presenta el oficio que va a aprender, las grandes familias de tecnologías que utilizará y el material que necesita para empezar. No hace falta ningún conocimiento previo: ...

En este capítulo aprenderás tres funcionalidades de JavaScript moderno (a partir de la versión llamada ECMAScript 2015, conocida como ES6) que sirven para escribir código más corto, legible y expresivo: la desestructuración, el operador de propagació...

Recordatorio teórico: En JavaScript, un objeto literal es una estructura que agrupa datos relacionados bajo la forma de pares clave-valor, por ejemplo { nombre: 'Camiseta', precio: 19.99, stock: 40 }. Cuando necesitamos manipular varios objetos del m...

RECORDATORIO TEÓRICO Un objeto literal en JavaScript es una estructura que agrupa datos (propiedades) y comportamientos (métodos) bajo un mismo nombre. Se declara con llaves: const usuario = { nombre: 'Ana', edad: 30 }. Cada propiedad es un par clave...

Un objeto literal es una de las estructuras de datos más importantes de JavaScript. Mientras que una matriz (array) sirve para almacenar una lista ordenada de elementos accesibles por su posición numérica, un objeto sirve para almacenar información o...

RECORDATORIO TEÓRICO En JavaScript moderno (ES6+), los arrays disponen de métodos de orden superior que permiten manipular colecciones de datos sin recurrir a bucles manuales. Los tres pilares son: `filter()`, que devuelve un nuevo array con los elem...