1 de 2 | Aprender a Programar en Web: Guía Paso a Paso para Principiantes

TL;DR
¿Quieres aprender a programar en web? Empieza dominando HTML, CSS y JavaScript. Luego explora el backend con lenguajes de servidor y bases de datos. Construye proyectos reales y únete a la comunidad online para consolidar tus habilidades.

Empecemos...

Aprender a programar en web es sin duda intimidante al principio, pero con una buena guía y una buena dosis de motivación es algo utilísimo en este mundo moderno. En esta nota, te llevaré de la mano en un viaje paso a paso para que puedas ir adquiriendo las habilidades necesarias y convertirte en un programador web.

Primero, a dominar los fundamentos:

1.- HTML

El lenguaje base de la web. Aprende a estructurar el contenido de una página web utilizando etiquetas y elementos. HTML son las siglas de HyperText Markup Language (Lenguaje de Marcado de Hipertexto). Es el código que se utiliza para estructurar una página web y sus contenidos. Para que se entienda mejor, piensa en HTML como el esqueleto de una página web. Define los elementos básicos como:

• Títulos: Los encabezados que organizan la información.

• Párrafos: Bloques de texto.

• Imágenes: Fotos o gráficos que aparecen en la página.

• Enlaces: Conexiones a otras páginas web.

• Listas: Elementos organizados en viñetas o números.

CURSOS
En Codecademy hay un curso gratuito de HTML.
En Femxa hay este curso, no es gratuito pero cuenta con tutor personal: Programación HTML5

RECURSOS
Libros | Lee "HTML and CSS: Design and Build Websites" de Jon Duckett. Libro de cabecera para todos los que quieren empezar con el pie derecho. También lee “Head First HTML and CSS” de Elisabeth Robson y Eric Freeman que trae un enfoque más divertido y casual.

Páginas web | Agrega a tu bookmark de navegador a MDN Web Docs y sus conceptos básicos de HTML. Una recurrente y referencia obligada para acudir cuando hay dudas. Y también a W3Schools que cuenta con tutoriales, referencias y ejemplos de código para aprender.

Podcast | CodeNewbie es un podcast para principiantes en programación, con entrevistas a desarrolladores y consejos para aprender a programar.

YouTube | Existe un canal llamado Net Ninja que tiene muchos tutoriales claros y concisos sobre HTML, CSS, JavaScript y otras tecnologías web.

2.- CSS

Lo que le da estilo a tus páginas web. Aprende a controlar colores, fuentes, diseño y la apariencia general con CSS. En otras palabras, si HTML es el esqueleto de una página web, CSS es la piel y la ropa controlando aspectos como:

• Colores: Define el color del texto, fondo, bordes, etc.

• Fuentes: Determina el tipo de letra, tamaño y estilo (negrita, cursiva, etc.).

• Diseño: Controla la posición de los elementos en la página, márgenes, espaciado, etc.

• Efectos visuales: Permite añadir sombras, bordes redondeados, animaciones y otros efectos.

CURSOS
Los cursos de CSS en freeCodeCamp son bastante buenos así como en Platzi. Ahí se encuentra este otro curso que complementará tus conocimientos de HTML muy bien.

RECURSOS
Libros | "CSS Secrets" de Lea Verou y “CSS: The Definitive Guide” de Eric Meyer y Estelle Weyl. Son dos libros que tienes que leer. Uno para crear efectos visuales sorprendentes y el otro es una guía exhaustiva sobre CSS, ideal para aquellos que desean profundizar en el lenguaje.

Podcast | The CSS Podcast. Un podcast dedicado exclusivamente a CSS, con discusiones sobre nuevas características, mejores prácticas y técnicas avanzadas.

Youtube | Explora sus videos y sigue a Kevin Powell, una gran ayuda para todo lo referente a CSS y más.

Segundo nivel, la interacción

3.- JavaScript

El lenguaje de la interactividad. Si HTML es el esqueleto y CSS la piel y la ropa, JavaScript es el cerebro que le da vida al sitio web. Imagina una página web sin JavaScript: sería como un documento estático, sin movimiento ni respuesta a tus acciones. JavaScript permite que las páginas web sean dinámicas e interactivas, respondiendo a tus clics, movimientos del ratón y otras acciones:

• Cambiar el contenido de una página web: Puede mostrar u ocultar elementos, modificar texto, cambiar imágenes, etc.

• Validar formularios: Puede comprobar que los datos introducidos en un formulario sean correctos antes de enviarlos.

• Crear animaciones: Puede crear efectos visuales como deslizamientos, desvanecimientos y otros movimientos.

• Reaccionar a eventos: Puede responder a acciones del usuario, como clics, movimientos del ratón, pulsaciones de teclas, etc.

• Manipular el navegador: Puede abrir nuevas ventanas, mostrar alertas, cambiar la URL, etc.

• Comunicarse con el servidor: Puede enviar y recibir datos del servidor sin necesidad de recargar la página (AJAX).

CURSOS
Otro curso gratuito e indispensable de codecadamy “Learn Javascript”. Es interactivo y cubre los fundamentos del lenguaje. También tienen cursos más avanzados sobre frameworks como React y Node.js.

RECURSOS
Libros | "Eloquent JavaScript" de Marijn Haverbeke lo puedes leer completo en su página web o si prefieres lo impreso, también lo puedes adquirir ahí. También, añade a tu librería la serie de libros “You Don't Know JS” de Kyle Simpson que profundizan en los conceptos más complejos de JavaScript, ideal para aquellos que ya tienen conocimientos básicos.

Podcast | JavaScript Jabber es un podcast con entrevistas a expertos en JavaScript y discusiones sobre las últimas tendencias y tecnologías.

YouTube | Mattias Petter Johansson en su canal Fun Fun Function tiene una serie de videos divertidos y educativos sobre JavaScript.

--- Medio Tiempo ---

¡Felicidades! Ya has dado los primeros pasotes en tu camino como programador web. Con HTML y CSS, puedes crear páginas web estáticas con un diseño atractivo. Con JavaScript exploramos cómo añadir interactividad a tus páginas web. En la próxima nota, exploraremos cómo darles vida con JavaScript.

¿Necesitas guía en tu camino como programador web?

Contáctame para una asesoría personalizada.