https://github.com/webmastervetea/tutorial-completo-de-desarrollo-web
Aprende a construir tu primera página web desde cero. Cubre los fundamentos de HTML5 (estructura, etiquetas semánticas, formularios, multimedia), las bases de CSS para dar estilo y el manejo de atributos y clases.
https://github.com/webmastervetea/tutorial-completo-de-desarrollo-web
css flexbox html5 javascript tutorial
Last synced: about 4 hours ago
JSON representation
Aprende a construir tu primera página web desde cero. Cubre los fundamentos de HTML5 (estructura, etiquetas semánticas, formularios, multimedia), las bases de CSS para dar estilo y el manejo de atributos y clases.
- Host: GitHub
- URL: https://github.com/webmastervetea/tutorial-completo-de-desarrollo-web
- Owner: webmastervetea
- License: other
- Created: 2025-12-04T07:52:36.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2025-12-19T11:51:52.000Z (4 months ago)
- Last Synced: 2025-12-22T04:29:42.839Z (4 months ago)
- Topics: css, flexbox, html5, javascript, tutorial
- Language: HTML
- Homepage: https://www.linkedin.com/in/oscarlizarragag/
- Size: 197 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Tutorial Completo de Desarrollo Web: Domina HTML5, CSS y Flexbox (Guía para Principiantes) [[Soporte](https://www.linkedin.com/in/oscarlizarragag/)]
Aprende a construir tu primera página web desde cero con este curso paso a paso.
Cubre los fundamentos de HTML5 (estructura, etiquetas semánticas, formularios, multimedia), las bases de CSS para dar estilo y el manejo de atributos y clases.
Incluye secciones clave sobre la organización de proyectos, el diseño responsivo con CSS Flexbox (Centrado perfecto y Barra de Navegación), y una introducción a JavaScript para añadir interactividad (variables y manipulación del DOM). Ideal para iniciarse en la programación front-end con ejemplos prácticos (Tarjeta de Perfil). |
Tienes el tutorial en formato .md (GitHub) o .html (si prefieres descargarlo y verlo tranquilamente desde tu movil o computadora)
### Temario
#### 1 ⚙️ HTML5 Básico: Estructura, Etiquetas y Fundamentos Semántico [[HTML](https://github.com/webmastervetea/tutorial-completo-de-desarrollo-web/blob/main/1-html-basico-estructura-etiquetas-y-fundamentos.html)] [[MD](https://github.com/webmastervetea/tutorial-completo-de-desarrollo-web/blob/main/1-html-basico-estructura-etiquetas-y-fundamentos.md)]
#### 2 🎨 Enlazando CSS a tu HTML [[HTML](https://github.com/webmastervetea/tutorial-completo-de-desarrollo-web/blob/main/2-css-para-principiantes-como-enlazar-hojas-de-estilo-a-html.html)] [[MD](https://github.com/webmastervetea/tutorial-completo-de-desarrollo-web/blob/main/2-css-para-principiantes-como-enlazar-hojas-de-estilo-a-html.md)]
#### 3 🏷️ ¿Qué son los Atributos en HTML? [[HTML](https://github.com/webmastervetea/tutorial-completo-de-desarrollo-web/blob/main/3-html-y-css-atributos-id-class-creacion-de-tablas.html)] [[MD](https://github.com/webmastervetea/tutorial-completo-de-desarrollo-web/blob/main/3-html-y-css-atributos-id-class-creacion-de-tablas.md)]
#### 4 📝 Formularios (``) [[HTML](https://github.com/webmastervetea/tutorial-completo-de-desarrollo-web/blob/main/4-formularios-html5-campos-entrada-contenido-multimedia.html)] [[MD](https://github.com/webmastervetea/tutorial-completo-de-desarrollo-web/blob/main/4-formularios-html5-campos-entrada-contenido-multimedia.md)]
#### 5 💻 El Ejemplo Práctico: Tarjeta de Perfil [[HTML](https://github.com/webmastervetea/tutorial-completo-de-desarrollo-web/blob/main/5-proyecto-practico-creacion-tarjeta-perfil-estilizada-html-css.html)] [[MD](https://github.com/webmastervetea/tutorial-completo-de-desarrollo-web/blob/main/5-proyecto-practico-creacion-tarjeta-perfil-estilizada-html-css.md)]
#### 6 ✨ Efecto "Hover" en CSS [[HTML](https://github.com/webmastervetea/tutorial-completo-de-desarrollo-web/blob/main/6-css-avanzado-basico-efecto-hover-transiciones-animacion-tarjetas.html)] [[MD](https://github.com/webmastervetea/tutorial-completo-de-desarrollo-web/blob/main/6-css-avanzado-basico-efecto-hover-transiciones-animacion-tarjetas.md)]
#### 7 📂 Organización de Proyectos Web (Estructura de Carpetas) [[HTML](https://github.com/webmastervetea/tutorial-completo-de-desarrollo-web/blob/main/7-organizacion-proyectos-web-estructura-carpetas-rutas-relativas.html)] [[MD](https://github.com/webmastervetea/tutorial-completo-de-desarrollo-web/blob/main/7-organizacion-proyectos-web-estructura-carpetas-rutas-relativas.md)]
#### 8 📐 Entendiendo Flexbox [[HTML](https://github.com/webmastervetea/tutorial-completo-de-desarrollo-web/blob/main/8-css-flexbox-dominando-los-ejes-alineacion-centrado-perfecto.html)] [[MD](https://github.com/webmastervetea/tutorial-completo-de-desarrollo-web/blob/main/8-css-flexbox-dominando-los-ejes-alineacion-centrado-perfecto.md)]
#### 9 🧭 Barra de Navegación con Flexbox [[HTML](https://github.com/webmastervetea/tutorial-completo-de-desarrollo-web/blob/main/9-proyecto-flexbox-creando-una-barra-de-navegacion-navbar-profesional.html)] [[MD](https://github.com/webmastervetea/tutorial-completo-de-desarrollo-web/blob/main/9-proyecto-flexbox-creando-una-barra-de-navegacion-navbar-profesional.md)]
#### 10 💡 Introducción a JavaScript [[HTML](https://github.com/webmastervetea/tutorial-completo-de-desarrollo-web/blob/main/10-introduccion-a-javascript-dom-variables-manejo-eventos.html)] [[MD](https://github.com/webmastervetea/tutorial-completo-de-desarrollo-web/blob/main/10-introduccion-a-javascript-dom-variables-manejo-eventos.md)]
#### 11 🖱️ Manipulación del DOM con un Botón [[HTML](https://github.com/webmastervetea/tutorial-completo-de-desarrollo-web/blob/main/11-javascript-practico-creando-interacciones-manipulando-dom.html)] [[MD](https://github.com/webmastervetea/tutorial-completo-de-desarrollo-web/blob/main/11-javascript-practico-creando-interacciones-manipulando-dom.md)]
#### 12 🌐 JavaScript Avanzado: Asincronía y APIs [[HTML](https://github.com/webmastervetea/tutorial-completo-de-desarrollo-web/blob/main/12-conceptos-avanzados-asincronia-javascript-preprocesadores-css.html)] [[MD](https://github.com/webmastervetea/tutorial-completo-de-desarrollo-web/blob/main/12-conceptos-avanzados-asincronia-javascript-preprocesadores-css.md)]
#### 13 🚀 Ejemplo Práctico de JavaScript Asíncrono (`async/await`) [[HTML](https://github.com/webmastervetea/tutorial-completo-de-desarrollo-web/blob/main/13-ejemplo-practico-consumo-api-reutilizacion-sass.html)] [[MD](https://github.com/webmastervetea/tutorial-completo-de-desarrollo-web/blob/main/13-ejemplo-practico-consumo-api-reutilizacion-sass.md)]
#### 14 📱 Diseño Web Responsivo (Responsive Design) [[HTML](https://github.com/webmastervetea/tutorial-completo-de-desarrollo-web/blob/main/14-diseno-responsivo-herramientas-depuracion.html)] [[MD](https://github.com/webmastervetea/tutorial-completo-de-desarrollo-web/blob/main/14-diseno-responsivo-herramientas-depuracion.md)]
#### 15 📱 Formatos de Próxima Generación (WebP y AVIF) [[HTML](https://github.com/webmastervetea/tutorial-completo-de-desarrollo-web/blob/main/15.html)] [[MD](https://github.com/webmastervetea/tutorial-completo-de-desarrollo-web/blob/main/15.md)]
#### 16 📱 El Poder de la Semántica HTML5 [[HTML](https://github.com/webmastervetea/tutorial-completo-de-desarrollo-web/blob/main/16.html)] [[MD](https://github.com/webmastervetea/tutorial-completo-de-desarrollo-web/blob/main/16.md)]
#### 17 📱 Google Fonts de Forma Profesional (Responsive Design) [[HTML](https://github.com/webmastervetea/tutorial-completo-de-desarrollo-web/blob/main/17.html)] [[MD](https://github.com/webmastervetea/tutorial-completo-de-desarrollo-web/blob/main/17.md)]
#### 19 📱 Optimización de Imágenes de Próxima Generación [[HTML](https://github.com/webmastervetea/tutorial-completo-de-desarrollo-web/blob/main/19.html)] [[MD](https://github.com/webmastervetea/tutorial-completo-de-desarrollo-web/blob/main/19.md)]
#### 20 📱 Arquitectura CSS: Metodología BEM (Block, Element, Modifier) [[HTML](https://github.com/webmastervetea/tutorial-completo-de-desarrollo-web/blob/main/20.html)] [[MD](https://github.com/webmastervetea/tutorial-completo-de-desarrollo-web/blob/main/20.md)]
#### 21 📱 Animaciones con Keyframes: Experiencias interactivas sin JavaScript [[HTML](https://github.com/webmastervetea/tutorial-completo-de-desarrollo-web/blob/main/21.html)] [[MD](https://github.com/webmastervetea/tutorial-completo-de-desarrollo-web/blob/main/21.md)]