{"id":49073593,"url":"https://github.com/webmastervetea/tutorial-completo-de-desarrollo-web","last_synced_at":"2026-04-20T08:34:28.326Z","repository":{"id":327547601,"uuid":"1109730690","full_name":"webmastervetea/tutorial-completo-de-desarrollo-web","owner":"webmastervetea","description":"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. ","archived":false,"fork":false,"pushed_at":"2025-12-19T11:51:52.000Z","size":202,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-12-22T04:29:42.839Z","etag":null,"topics":["css","flexbox","html5","javascript","tutorial"],"latest_commit_sha":null,"homepage":"https://www.linkedin.com/in/oscarlizarragag/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/webmastervetea.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-12-04T07:52:36.000Z","updated_at":"2025-12-19T11:51:55.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/webmastervetea/tutorial-completo-de-desarrollo-web","commit_stats":null,"previous_names":["webmastervetea/tutorial-completo-de-desarrollo-web"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/webmastervetea/tutorial-completo-de-desarrollo-web","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webmastervetea%2Ftutorial-completo-de-desarrollo-web","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webmastervetea%2Ftutorial-completo-de-desarrollo-web/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webmastervetea%2Ftutorial-completo-de-desarrollo-web/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webmastervetea%2Ftutorial-completo-de-desarrollo-web/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/webmastervetea","download_url":"https://codeload.github.com/webmastervetea/tutorial-completo-de-desarrollo-web/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webmastervetea%2Ftutorial-completo-de-desarrollo-web/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32040336,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-20T00:18:06.643Z","status":"online","status_checked_at":"2026-04-20T02:00:06.527Z","response_time":94,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","flexbox","html5","javascript","tutorial"],"created_at":"2026-04-20T08:34:26.729Z","updated_at":"2026-04-20T08:34:28.313Z","avatar_url":"https://github.com/webmastervetea.png","language":"HTML","readme":"# Tutorial Completo de Desarrollo Web: Domina HTML5, CSS y Flexbox (Guía para Principiantes) [[Soporte](https://www.linkedin.com/in/oscarlizarragag/)]\n \n Aprende a construir tu primera página web desde cero con este curso paso a paso. \n\n 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. \n\nIncluye 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). |\nTienes el tutorial en formato  .md (GitHub) o .html (si prefieres descargarlo y verlo tranquilamente desde tu movil o computadora)\n### Temario\n\n#### 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)]\n#### 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)]\n#### 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)]\n#### 4 📝 Formularios (`\u003cform\u003e`) [[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)]\n#### 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)]\n#### 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)]\n#### 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)]\n#### 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)]\n#### 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)]\n#### 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)]\n#### 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)]\n#### 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)]\n#### 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)]\n#### 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)]\n\n#### 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)]  \n#### 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)] \n#### 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)]\n#### 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)] \n#### 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)] \n#### 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)] \n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebmastervetea%2Ftutorial-completo-de-desarrollo-web","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebmastervetea%2Ftutorial-completo-de-desarrollo-web","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebmastervetea%2Ftutorial-completo-de-desarrollo-web/lists"}