Aprender HTML: Curso Code
Aprender HTML: Curso Code — Un curso de HTML con un editor de vista previa en vivo en tu bolsillo
Aprender HTML: Curso Code es un curso de HTML para iPhone y Android que pone un editor de HTML con vista previa en vivo a un toque de distancia en cada lección. Escribe una etiqueta, observa cómo se renderiza la página y avanza desde un primer encabezado hasta formularios, tablas, HTML5 semántico, accesibilidad y componentes web a lo largo de 40 cursos breves.
- Precio
- Gratis, actualización a Pro
- Plataformas
- iOS y Android
- Idiomas
- 22
- Clasificación por edad
- 4+
- Requisitos
- iOS 15.1 o posterior
- App Store
- 3.0 ★ (1)
Una etiqueta significa mucho más después de verla dibujar algo.
HTML es un lenguaje de marcado, así que la forma más rápida de entender un elemento nuevo es escribirlo y observar el resultado. Cada lección de esta app termina con el editor ya abierto, con la vista previa junto a tu marcado, y solo añades archivos CSS o JavaScript cuando estés preparado.
Qué es
Aprender HTML: Curso Code es un curso de HTML para iOS y Android con inicio gratuito que enseña el marcado de páginas web mediante 40 cursos y 159 lecciones breves, ordenadas desde principiante (A1) hasta avanzado (C1). Cada tema se combina con un editor de código HTML integrado y una vista previa instantánea, 20 proyectos guiados como un formulario de contacto y una tabla de precios accesible, 20 misiones de depuración y un mentor de AI, para que una persona que parte desde cero pueda pasar de un documento vacío a páginas semánticas, accesibles y bien estructuradas.
Dentro de la app
Qué aspecto tiene
El curso
Qué incluye el curso de HTML
40 cursos y 159 lecciones de la lista de cursos propia de la app, en el orden en que la ruta los enseña.
Estructura del documento, texto, enlaces, imágenes y listas
La estructura básica de cada página: la estructura del documento, los encabezados y párrafos, los enlaces y la navegación, las imágenes y figuras, y las listas ordenadas y no ordenadas.
Tablas, atributos y atributos globales
Cómo organizar datos en tablas y, después, los atributos que ajustan un elemento, incluidos los globales que funcionan en todas las etiquetas.
Formularios: conceptos básicos, controles avanzados y validación
Primero, los campos de entrada básicos; después, los controles más completos y, por último, los atributos de validación que permiten al navegador comprobar un campo antes de enviarlo.
HTML5 semántico, head y metadatos, audio y video
Los elementos semánticos, el head del documento y sus metadatos, y los elementos de audio y video.
Accesibilidad, roles ARIA y patrones ARIA avanzados
Conceptos básicos de accesibilidad, roles y atributos ARIA, y los patrones avanzados que se usan para widgets personalizados.
Atributos de datos, plantillas, canvas, SVG e iframes
Atributos de datos personalizados, plantillas HTML, el elemento canvas, SVG dentro de HTML y contenido incrustado en iframes.
Almacenamiento web, arrastrar y soltar, SEO y plantillas de correo electrónico
El almacenamiento web y la API de arrastrar y soltar, el SEO y las metaetiquetas sociales, y las reglas específicas de las plantillas de correo electrónico HTML.
Web Components, rendimiento y HTML a gran escala
Elementos personalizados, el shadow DOM, los mapas de importación y la mejora progresiva, además del rendimiento, la seguridad, las PWA y las pruebas, para terminar con HTML a gran escala.
Cómo funciona
Cómo aprendes una etiqueta: de la lectura al renderizado
Una lección es breve y el editor está justo al lado, así que leer un concepto y probarlo tienen lugar en la misma sesión.
Lee una lección breve
Retoma la ruta de aprendizaje donde la dejaste. Cada lección aborda una sola idea, como una lista sin ordenar o una imagen con texto alternativo, y dura unos minutos.
Escríbelo en el editor y observa la vista previa
Abre el editor y escribe el marcado. La vista previa vuelve a dibujar tu página, y las pestañas de CSS y JavaScript están disponibles cuando quieras darle estilo a la página o hacer que responda.
Compruébalo, corrígelo y crea con él
Un cuestionario y un desafío de programación cierran cada tema. Cuando una etiqueta o un error no está claro, el mentor de AI te lo explica, una misión de depuración te entrega una página rota para que la repares y un proyecto guiado te ayuda a crear algo que puedes mostrar.
Qué incluye
Qué incluye Learn HTML
40
Cursos de A1 a C1
Las 159 lecciones abarcan desde la estructura del documento, el texto, los enlaces, las imágenes y las listas, hasta las tablas, los formularios y HTML5 semántico, además de la accesibilidad, los componentes web, la seguridad y History and Navigation API.
En vivo
Editor de HTML con vista previa
Escribe el marcado y observa cómo se actualiza la página renderizada. Puedes añadir archivos CSS y JavaScript al mismo proyecto, para que un documento sencillo se convierta en un pequeño sitio web funcional.
20
Proyectos guiados
Creaciones paso a paso que incluyen una página de recetas, un formulario de contacto, una galería de fotos, una barra de navegación y una tabla de precios accesible.
20
Misiones de depuración
Errores reales que tendrás que localizar: un formulario de registro que no envía nada, una etiqueta que nadie puede tocar o una página que se carga alejada en un teléfono.
80
Guía rápida de etiquetas
Una lista de consulta con 80 etiquetas, elementos y atributos de HTML para esos momentos en los que sabes qué quieres, pero no cómo se llama.
50
Preguntas de entrevista
Cincuenta preguntas de entrevistas para desarrolladores web con respuestas claras, además de una biblioteca de código con ejemplos breves que puedes abrir y editar, y un espacio para guardar tu propio código y tus notas.
Información general
¿Qué es HTML y puedes aprenderlo escribiendo en un teléfono?
HTML (HyperText Markup Language) es el lenguaje que describe la estructura de una página web: qué texto es un encabezado, qué texto es un párrafo, adónde lleva un enlace y qué solicita un formulario. No es un lenguaje de programación, así que no tienes que enfrentarte a bucles ni variables, por lo que suele ser el primer paso para iniciarse en el desarrollo web. Como el resultado es visible en cuanto lo escribes, HTML se adapta bien a sesiones cortas desde el teléfono: una etiqueta es lo bastante pequeña como para escribirla con el pulgar y la vista previa muestra de inmediato si funciona.
Elementos, etiquetas y atributoslas tres palabras que aparecen en cada lección
Un elemento es un fragmento de contenido con un significado, escrito entre una etiqueta de apertura y una de cierre, por ejemplo, un párrafo o un elemento de lista. Los atributos se sitúan dentro de la etiqueta de apertura y la ajustan, como la dirección a la que apunta un enlace o el texto que describe una imagen. Casi todos los errores de los principiantes se deben a una etiqueta de cierre ausente o a un atributo mal colocado.
HTML semánticoencabezados, navegación, contenido principal y pie de página
Los elementos semánticos indican qué es un bloque de la página, en lugar de cómo se ve. Una barra de navegación, un artículo y un pie de página tienen su propio elemento, lo que ayuda a los lectores de pantalla, a los motores de búsqueda y a cualquiera que tenga que editar la página más adelante. Es el hábito que distingue una página ordenada de un montón de contenedores genéricos.
HTML, CSS y JavaScriptqué función cumple cada uno
HTML contiene la estructura y el contenido, CSS controla el aspecto de ese contenido y JavaScript añade comportamientos, como reaccionar a un clic. Aprender HTML primero les proporciona a los otros dos algo a lo que conectarse. El editor de la app ofrece pestañas independientes para HTML, CSS y JavaScript, para que mantengas separadas las tres funciones desde el principio.
Formularios y accesibilidaddonde las páginas sencillas se ponen serias
Los formularios son la forma en que una página solicita cualquier cosa al visitante y también donde comienzan la mayoría de los problemas de accesibilidad: una etiqueta que nadie puede tocar, un campo cuyo nombre no puede identificar un lector de pantalla. Las etiquetas, los atributos de validación y los roles ARIA son pequeños fragmentos de marcado que determinan si una página funciona para todo el mundo.
Encaja
Para quién es y para quién no
Es una buena opción si
- ¿Estás escribiendo tu primera página web y quieres que te expliquen cada etiqueta antes de usarla?
- Aprendes mejor cuando puedes ver el resultado de cada línea de inmediato
- ¿Gestionas un blog, una página de tienda o un portafolio y quieres editar el marcado que hay detrás?
- ¿Piensas pasar a CSS, JavaScript o al desarrollo front-end y quieres contar primero con bases sólidas?
- ¿Te estás preparando para una entrevista de desarrollador web y quieres practicar con preguntas?
No es la herramienta adecuada si
- Necesitas un flujo de trabajo completo de escritorio con archivos, carpetas y un servidor local
- Esperas que todos los cursos sean gratuitos; el primer curso, el primer proyecto guiado y dos misiones lo son, y Pro desbloquea el resto
- Ya escribes HTML de producción a diario y quieres una referencia en lugar de un curso
- Quieres aprender a usar una herramienta de diseño; esto trata sobre el marcado y el código detrás de las páginas
Preguntas
Preguntas frecuentes
¿Qué es Aprender HTML: Curso Code?
Aprender HTML: Curso Code es una app para iPhone y Android que enseña HTML desde la primera etiqueta hasta temas avanzados. Combina 40 cursos breves con un editor HTML integrado y una vista previa en directo, 20 proyectos guiados, 20 misiones de depuración y un mentor de IA. Puedes empezar gratis y está disponible en 22 idiomas.
¿De verdad puedo escribir y ver una vista previa de HTML en un teléfono?
Sí. El editor de Aprender HTML: Curso Code tiene pestañas de HTML, CSS y JavaScript, y la vista previa muestra la página que produce tu marcado. Un teléfono resulta cómodo para la práctica concentrada que necesita HTML, ya que las etiquetas son cortas. Una pantalla más grande solo resulta útil cuando tienes que manejar muchos archivos a la vez.
¿Necesito experiencia previa en programación para empezar?
No. La ruta comienza explicando cómo se construye un documento HTML y define cada término con un lenguaje sencillo antes de usarlo. HTML no tiene bucles ni variables que debas aprender primero, así que Aprender HTML: Curso Code considera que ser principiante total es lo normal, no una excepción.
¿Cuál es la diferencia entre HTML y CSS?
HTML define qué hay en la página y qué significa cada parte, como un encabezado, un enlace o un campo de formulario. CSS define su aspecto, incluidos los colores, el espaciado y la disposición. La app enseña HTML primero y te permite añadir archivos CSS en el editor, para que puedas ver cómo funcionan juntos sin mezclar sus funciones.
¿Cuánto se tarda en aprender los conceptos básicos de HTML?
La mayoría de las personas puede escribir una página sencilla y correcta después de unas pocas sesiones breves, porque los elementos esenciales son pocos: encabezados, párrafos, enlaces, imágenes, listas y formularios básicos. El material más avanzado, como la accesibilidad, la estructura semántica y los Web Components, requiere más tiempo. Las lecciones están diseñadas para completarse en minutos, por lo que mantener un hábito diario es realista.
¿Qué tipos de proyectos puedo crear en la app?
Los 20 proyectos guiados incluyen una página de recetas, un formulario de contacto, una galería de fotos, una barra de navegación y una tabla de precios accesible. Cada uno se crea paso a paso. Son pequeños a propósito, para que los termines y conserves el código en tus fragmentos guardados.
¿Learn HTML incluye accesibilidad y formularios?
Sí, y con bastante profundidad. Los formularios cuentan con tres cursos que cubren los conceptos básicos, los controles avanzados y los atributos de validación. La accesibilidad tiene sus propios cursos sobre los conceptos básicos, los roles ARIA y los patrones ARIA avanzados. Las misiones de depuración también incluyen errores como una etiqueta que nadie puede pulsar, lo que hace que estos temas sean prácticos y no abstractos.
¿La app es gratuita y qué añade Pro?
Puedes descargarla gratis y empezar de inmediato: se incluyen el primer curso, el primer proyecto guiado, dos misiones y el editor en directo, además de una cuota diaria para el mentor de IA. Pro desbloquea todos los cursos, proyectos y misiones, el examen para obtener el certificado y preguntas ilimitadas al mentor de IA, y elimina los anuncios.
Empezar
Escribe tu primera etiqueta y observa cómo se renderiza
Puedes empezar gratis en iOS y Android, en 22 idiomas.
Más de CoddyKit
Disponible en iOS y Android.