{"id":717,"date":"2023-07-01T03:05:43","date_gmt":"2023-07-01T03:05:43","guid":{"rendered":"https:\/\/alexcgdesign.com\/blog\/?p=717"},"modified":"2026-10-12T23:47:56","modified_gmt":"2026-10-12T23:47:56","slug":"como-crear-una-pagina-web-con-html-css-js","status":"publish","type":"post","link":"https:\/\/alexcgdesign.com\/blog\/como-crear-una-pagina-web-con-html-css-js\/","title":{"rendered":"C\u00f3mo crear una p\u00e1gina web con HTML, CSS y JavaScript paso a paso"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Aprende <strong>c\u00f3mo crear una p\u00e1gina web con HTML, CSS y JavaScript<\/strong> desde cero: una landing page completa, adaptable a m\u00f3viles, con slider de testimonios, preguntas frecuentes animadas, men\u00fa hamburguesa y un formulario que funciona de verdad.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Aqu\u00ed tienes el video completo para que lo veas y lo sigas paso a paso, el c\u00f3digo de cada paso explicado y el repositorio para descargarlo.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"\ud83d\ude80 COMO Crear una PAGINA WEB con ( HTML + CSS &amp; JS ) | PASO A PASO 2026\" width=\"1290\" height=\"726\" src=\"https:\/\/www.youtube.com\/embed\/9rnFV3vlJ3M?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-fe0a7de2 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button is-style-outline is-style-outline--1\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/www.youtube.com\/watch?v=9rnFV3vlJ3M\" target=\"_blank\" rel=\"noreferrer noopener\">Ver el video en YouTube<\/a><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group acg-callout is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"acg-callout__title wp-block-paragraph\">Al finalizar este tutorial lograr\u00e1s:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Resultado:<\/strong> una landing page responsive para un curso de CSS, publicada en internet.<\/li>\n\n\n\n<li><strong>Tecnolog\u00edas:<\/strong> HTML, CSS (Grid, Flexbox, custom properties) y JavaScript.<\/li>\n\n\n\n<li><strong>Nivel:<\/strong> principiante con nociones b\u00e1sicas de HTML y CSS.<\/li>\n\n\n\n<li><a href=\"#codigo-fuente\">Ir directo al c\u00f3digo fuente<\/a><\/li>\n<\/ul>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Qu\u00e9 vas a construir<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Una p\u00e1gina de venta para un curso de CSS: secci\u00f3n principal con imagen de fondo, beneficios del curso, tabla de precios, testimonios con slider, preguntas frecuentes y un pie de p\u00e1gina con formulario de suscripci\u00f3n. Todo sin frameworks, solo con HTML, CSS y JavaScript.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/alexcgdesign.com\/blog\/wp-content\/uploads\/2026\/10\/pagina-web-html-css-javascript-1024x576.webp\" alt=\"P\u00e1gina web hecha con HTML, CSS y JavaScript: landing page de un curso de CSS con slider, tabla de precios y preguntas frecuentes\" class=\"wp-image-3338\" title=\"\" srcset=\"https:\/\/alexcgdesign.com\/blog\/wp-content\/uploads\/2026\/10\/pagina-web-html-css-javascript-1024x576.webp 1024w, https:\/\/alexcgdesign.com\/blog\/wp-content\/uploads\/2026\/10\/pagina-web-html-css-javascript-300x169.webp 300w, https:\/\/alexcgdesign.com\/blog\/wp-content\/uploads\/2026\/10\/pagina-web-html-css-javascript-720x405.webp 720w, https:\/\/alexcgdesign.com\/blog\/wp-content\/uploads\/2026\/10\/pagina-web-html-css-javascript-768x432.webp 768w, https:\/\/alexcgdesign.com\/blog\/wp-content\/uploads\/2026\/10\/pagina-web-html-css-javascript.webp 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Cada parte de la p\u00e1gina practica una t\u00e9cnica distinta:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>Parte de la p\u00e1gina<\/th><th>T\u00e9cnica que aprendes<\/th><\/tr><\/thead><tbody><tr><td>Cabecera con imagen de fondo<\/td><td>CSS Grid, <code>::before<\/code> y <code>clip-path<\/code><\/td><\/tr><tr><td>Beneficios del curso<\/td><td>Grid responsive sin media queries (<code>auto-fit<\/code> + <code>minmax<\/code>)<\/td><\/tr><tr><td>Tabla de precios<\/td><td>Flexbox con <code>flex-wrap<\/code> y custom properties<\/td><\/tr><tr><td>Testimonios<\/td><td>Slider con JavaScript y atributos <code>data-id<\/code><\/td><\/tr><tr><td>Preguntas frecuentes<\/td><td>Acorde\u00f3n con <code>scrollHeight<\/code> y transiciones<\/td><\/tr><tr><td>Men\u00fa en m\u00f3vil<\/td><td>Men\u00fa hamburguesa con media queries y JavaScript<\/td><\/tr><tr><td>Pie de p\u00e1gina<\/td><td>Formulario funcional con Formspree<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Qu\u00e9 necesitas<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Un navegador con herramientas de desarrollo. En el video uso Firefox por su inspector de Grid.<\/li>\n\n\n\n<li>Visual Studio Code, un editor de c\u00f3digo para manipular archivos HTML.<\/li>\n\n\n\n<li>Conocimientos b\u00e1sicos de HTML y CSS. El JavaScript se explica desde cero.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Paso a paso<\/h2>\n\n\n\n<div class=\"wp-block-group acg-steps is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group acg-step is-layout-flow wp-block-group-is-layout-flow\">\n<h3 class=\"wp-block-heading\">Prepara la estructura del proyecto<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Crea una carpeta con tres subcarpetas: <code>css<\/code>, <code>images<\/code> y <code>js<\/code>. En <code>css<\/code> van dos archivos: <a href=\"https:\/\/necolas.github.io\/normalize.css\/\" target=\"_blank\" rel=\"noopener\"><code>normalize.css<\/code><\/a>, que iguala los estilos por defecto de todos los navegadores, y <code>estilos.css<\/code>, que ser\u00e1 tu hoja de estilos. En la ra\u00edz crea el <code>index.html<\/code> y enlaza los dos CSS en este orden, para que tus estilos tengan la \u00faltima palabra:<\/p>\n\n\n\n<pre class=\"wp-block-code language-html\"><code>&lt;link rel=\"shortcut icon\" href=\".\/images\/favicon.png\" type=\"image\/x-icon\"&gt;\n&lt;link rel=\"stylesheet\" href=\".\/css\/normalize.css\"&gt;\n&lt;link rel=\"stylesheet\" href=\".\/css\/estilos.css\"&gt;<\/code><\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-group acg-step is-layout-flow wp-block-group-is-layout-flow\">\n<h3 class=\"wp-block-heading\">Crea la secci\u00f3n principal con CSS Grid y custom properties<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">La cabecera (<code>.hero<\/code>) ocupa la altura de la pantalla y se divide en dos filas con Grid: 100 px para el men\u00fa y el resto para el t\u00edtulo. La imagen de fondo va en un pseudoelemento <code>::before<\/code>, con un degradado oscuro encima para que el texto se lea y un <code>clip-path<\/code> que le da el corte en pico de la parte inferior.<\/p>\n\n\n\n<pre class=\"wp-block-code language-css\"><code>:root {\n    --padding-container: 100px 0;\n    --color-title: #001A49;\n}\n\n.hero {\n    height: 100vh;\n    min-height: 600px;\n    max-height: 800px;\n    position: relative;\n    display: grid;\n    grid-template-rows: 100px 1fr;\n    color: #fff;\n}\n\n.hero::before {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    background-image: linear-gradient(180deg, #0000008c 0%, #0000008c 100%), url('..\/images\/computer.jpg');\n    background-size: cover;\n    clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 95%, 0 80%);\n    z-index: -1;\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">La custom property <code>--padding-container<\/code> es el truco que se repite en todo el proyecto. Cada secci\u00f3n puede redefinirla, por ejemplo <code>--padding-container: 0<\/code> en el men\u00fa, sin crear clases nuevas.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group acg-step is-layout-flow wp-block-group-is-layout-flow\">\n<h3 class=\"wp-block-heading\">Haz la secci\u00f3n de beneficios responsive sin media queries<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Las tarjetas de \u00abQu\u00e9 aprender\u00e1s\u00bb se reacomodan solas seg\u00fan el ancho de la pantalla. La clave es <code>repeat(auto-fit, minmax(260px, auto))<\/code>: Grid crea tantas columnas de al menos 260 px como quepan, y en m\u00f3vil pasan a una sola.<\/p>\n\n\n\n<pre class=\"wp-block-code language-css\"><code>.about__main {\n    display: grid;\n    gap: 1em;\n    grid-template-columns: repeat(auto-fit, minmax(260px, auto));\n}<\/code><\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-group acg-step is-layout-flow wp-block-group-is-layout-flow\">\n<h3 class=\"wp-block-heading\">Dise\u00f1a la tabla de precios con Flexbox<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Las tres tarjetas de precios usan Flexbox con <code>flex-wrap<\/code>, as\u00ed que bajan a otra l\u00ednea cuando no caben. Los colores de cada tarjeta son custom properties: la tarjeta destacada solo cambia sus valores con el modificador <code>--best<\/code>, sin repetir ni una regla.<\/p>\n\n\n\n<pre class=\"wp-block-code language-css\"><code>.price__element {\n    --color-plan: #696871;\n    --color-price: #1D293F;\n    --bg-cta: #fff;\n    width: 330px;\n    padding: 40px;\n}\n\n.price__element--best {\n    --color-plan: rgb(255 255 255 \/ 75%);\n    --color-price: #fff;\n    --bg-cta: #9F3919;\n    width: 370px;\n    background-color: #FF7143;\n}\n\n.price__price {\n    color: var(--color-price);\n}<\/code><\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-group acg-step is-layout-flow wp-block-group-is-layout-flow\">\n<h3 class=\"wp-block-heading\">Programa el slider de testimonios con JavaScript<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Cada testimonio es un <code>section.testimony__body<\/code> con un <code>data-id<\/code> (1, 2, 3\u2026). Solo el que tiene la clase <code>--show<\/code> es visible. Los botones de siguiente y anterior suman o restan 1 a la posici\u00f3n. Si te pasas del \u00faltimo vuelves al primero, y al rev\u00e9s.<\/p>\n\n\n\n<pre class=\"wp-block-code language-js\"><code>const sliders = [...document.querySelectorAll('.testimony__body')];\n\nconst changePosition = (add) =&gt; {\n    const currentTestimony = document.querySelector('.testimony__body--show').dataset.id;\n    let value = Number(currentTestimony) + add;\n\n    sliders[Number(currentTestimony) - 1].classList.remove('testimony__body--show');\n    if (value === sliders.length + 1 || value === 0) {\n        value = value === 0 ? sliders.length : 1;\n    }\n    sliders[value - 1].classList.add('testimony__body--show');\n};<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Como <code>dataset.id<\/code> devuelve texto, <code>Number()<\/code> evita que <code>\"1\" + 1<\/code> d\u00e9 <code>\"11\"<\/code>. Para a\u00f1adir otro testimonio solo copias la secci\u00f3n y le pones el siguiente <code>data-id<\/code>.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group acg-cta acg-cta--sponsor is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"acg-cta__eyebrow wp-block-paragraph\">Hosting recomendado<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Publica tu p\u00e1gina web con Hostinger<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Hostinger es el patrocinador oficial del curso. Con el cup\u00f3n <strong>ALEXCG<\/strong> tienes hasta un 90 % de descuento en hosting, con dominio gratis y certificado SSL incluidos.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/hostinger.com\/alexcg\" rel=\"sponsored noopener\" target=\"_blank\">Obtener el descuento<\/a><\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group acg-step is-layout-flow wp-block-group-is-layout-flow\">\n<h3 class=\"wp-block-heading\">Crea las preguntas frecuentes con efecto acorde\u00f3n<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Las respuestas empiezan con <code>height: 0<\/code> y una transici\u00f3n. Al hacer clic en una pregunta, JavaScript lee el <code>scrollHeight<\/code> de la respuesta (el alto que necesita para mostrarse completa) y se lo asigna. Si ya estaba abierta, la vuelve a 0. De paso gira la flecha.<\/p>\n\n\n\n<pre class=\"wp-block-code language-js\"><code>const titleQuestions = [...document.querySelectorAll('.questions__title')];\n\ntitleQuestions.forEach(question =&gt; {\n    question.addEventListener('click', () =&gt; {\n        let height = 0;\n        const answer = question.nextElementSibling;\n\n        question.children[0].classList.toggle('questions__arrow--rotate');\n        if (answer.clientHeight === 0) {\n            height = answer.scrollHeight;\n        }\n        answer.style.height = `${height}px`;\n    });\n});<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Un detalle que casi nadie explica: <a href=\"https:\/\/developer.mozilla.org\/es\/docs\/Web\/API\/Element\/scrollHeight\" target=\"_blank\" rel=\"noopener\"><code>scrollHeight<\/code><\/a> devuelve el alto del contenido, pero no el <code>padding<\/code> del contenedor. Por eso cada pregunta va dentro de un <code>div<\/code> extra, y JavaScript le a\u00f1ade la clase <code>questions__padding--add<\/code> (<code>padding-bottom: 30px<\/code>) al abrirla. Si le pones el padding directamente a la respuesta, el acorde\u00f3n se corta.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group acg-step is-layout-flow wp-block-group-is-layout-flow\">\n<h3 class=\"wp-block-heading\">Adapta la p\u00e1gina a m\u00f3viles con un men\u00fa hamburguesa<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Por debajo de 800 px el men\u00fa se convierte en una capa negra a pantalla completa, invisible hasta que se pulsa el icono. La X de cerrar usa otra custom property, <code>--show<\/code>, que solo se define cuando el men\u00fa est\u00e1 abierto.<\/p>\n\n\n\n<pre class=\"wp-block-code language-css\"><code>@media (max-width: 800px) {\n    .nav__link--menu {\n        position: fixed;\n        inset: 0;\n        background-color: #000;\n        display: flex;\n        flex-direction: column;\n        justify-content: space-evenly;\n        align-items: center;\n        opacity: 0;\n        pointer-events: none;\n        transition: .7s opacity;\n    }\n\n    .nav__link--show {\n        --show: block;\n        opacity: 1;\n        pointer-events: unset;\n    }\n}<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code language-js\"><code>const openButton = document.querySelector('.nav__menu');\nconst menu = document.querySelector('.nav__link');\nconst closeMenu = document.querySelector('.nav__close');\n\nopenButton.addEventListener('click', () =&gt; menu.classList.add('nav__link--show'));\ncloseMenu.addEventListener('click', () =&gt; menu.classList.remove('nav__link--show'));<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Si prefieres un men\u00fa que se despliega hacia abajo, mira el <a href=\"https:\/\/alexcgdesign.com\/blog\/como-crear-un-menu-desplegable-html-css-js\/\">men\u00fa desplegable con HTML, CSS y JavaScript<\/a>.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group acg-step is-layout-flow wp-block-group-is-layout-flow\">\n<h3 class=\"wp-block-heading\">Haz funcionar el formulario con Formspree<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">El formulario de suscripci\u00f3n del pie de p\u00e1gina env\u00eda los correos sin programar un backend. Te registras gratis en <a href=\"https:\/\/formspree.io\/\" target=\"_blank\" rel=\"noopener\">Formspree<\/a>, creas un formulario y pegas su direcci\u00f3n en el <code>action<\/code>. El <code>name=\"_replyto\"<\/code> le indica a Formspree que ese campo es el correo de quien escribe.<\/p>\n\n\n\n<pre class=\"wp-block-code language-html\"><code>&lt;form class=\"footer__form\" action=\"https:\/\/formspree.io\/f\/TU_ID\" method=\"POST\"&gt;\n    &lt;h2 class=\"footer__newsletter\"&gt;Suscr\u00edbete a la newsletter&lt;\/h2&gt;\n    &lt;div class=\"footer__inputs\"&gt;\n        &lt;input type=\"email\" placeholder=\"Email:\" class=\"footer__input\" name=\"_replyto\"&gt;\n        &lt;input type=\"submit\" value=\"Reg\u00edstrate\" class=\"footer__submit\"&gt;\n    &lt;\/div&gt;\n&lt;\/form&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Si quieres un formulario de contacto con varios campos y otra alternativa gratuita, tienes la gu\u00eda del <a href=\"https:\/\/alexcgdesign.com\/blog\/como-crear-formulario-html-css\/\">formulario HTML funcional sin backend<\/a>.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group acg-step is-layout-flow wp-block-group-is-layout-flow\">\n<h3 class=\"wp-block-heading\">Agrega las metaetiquetas para Google y redes sociales<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">El <code>title<\/code> y la <code>description<\/code> son lo que ve la gente al encontrar tu p\u00e1gina en Google. Las etiquetas Open Graph y Twitter controlan c\u00f3mo se ve el enlace al compartirlo en Facebook, WhatsApp o X, con imagen incluida.<\/p>\n\n\n\n<pre class=\"wp-block-code language-html\"><code>&lt;title&gt;Aprende CSS desde cero&lt;\/title&gt;\n&lt;meta name=\"description\" content=\"Descripci\u00f3n de tu p\u00e1gina para Google.\"&gt;\n\n&lt;meta property=\"og:type\" content=\"website\"&gt;\n&lt;meta property=\"og:title\" content=\"Aprende CSS desde cero\"&gt;\n&lt;meta property=\"og:image\" content=\"https:\/\/tu-dominio.com\/images\/css.jpg\"&gt;\n&lt;meta property=\"twitter:card\" content=\"summary_large_image\"&gt;<\/code><\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-group acg-step is-layout-flow wp-block-group-is-layout-flow\">\n<h3 class=\"wp-block-heading\">Publica tu p\u00e1gina web en internet<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">En el video ves dos caminos. <strong><a href=\"https:\/\/pages.github.com\/\" target=\"_blank\" rel=\"noopener\">GitHub Pages<\/a><\/strong> es gratis: creas un repositorio llamado <code>tu-usuario.github.io<\/code>, subes los archivos con GitHub Desktop y en unos minutos la p\u00e1gina est\u00e1 en l\u00ednea. <strong>Hostinger<\/strong> te da tu propio dominio, certificado SSL y correo: comprimes los archivos, los subes a <code>public_html<\/code> desde el administrador de archivos y los descomprimes ah\u00ed.<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group acg-callout acg-callout--tip is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"acg-callout__title wp-block-paragraph\">Consejo<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Si al publicar en Hostinger tu dominio no carga con <code>https:\/\/<\/code>, activa \u00abForzar HTTPS\u00bb en la secci\u00f3n de SSL del panel.<\/p>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"codigo-fuente\">C\u00f3digo fuente<\/h2>\n\n\n\n<div class=\"wp-block-group acg-download is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"wp-block-paragraph\">El repositorio tiene el proyecto completo: <code>index.html<\/code>, <code>estilos.css<\/code>, <code>normalize.css<\/code>, los tres scripts (<code>slider.js<\/code>, <code>questions.js<\/code> y <code>menu.js<\/code>) y todas las im\u00e1genes. Es el c\u00f3digo de la p\u00e1gina web con HTML, CSS y JavaScript tal como queda al final del video.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/github.com\/AlexCGDesign\/alexcgdesign.github.io\" target=\"_blank\" rel=\"noopener\">Descargar el c\u00f3digo en GitHub<\/a><\/div>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Preguntas frecuentes<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">\u00bfPuedo usar este c\u00f3digo en mis proyectos?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">S\u00ed. El proyecto es libre: desc\u00e1rgalo, c\u00e1mbiale los textos y los colores y \u00fasalo como base para tu portafolio o para la p\u00e1gina de un cliente. Si lo publicas, me encantar\u00eda verlo en los comentarios del video.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u00bfNecesito saber JavaScript para seguir el tutorial?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">No. El JavaScript del proyecto son tres scripts cortos y en el video se explican l\u00ednea por l\u00ednea: seleccionar elementos, escuchar clics y a\u00f1adir o quitar clases. Con saber HTML y un poco de CSS puedes seguirlo de principio a fin.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u00bfC\u00f3mo subo mi p\u00e1gina web a internet gratis?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Con GitHub Pages. Creas una cuenta en GitHub, un repositorio con el nombre <code>tu-usuario.github.io<\/code> y subes ah\u00ed tus archivos. Tu p\u00e1gina queda en esa direcci\u00f3n sin pagar nada. Si quieres un dominio propio (<code>.com<\/code>), necesitas un hosting.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">M\u00e1s proyectos<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/alexcgdesign.com\/blog\/crea-una-pagina-web-desde-0-con-efecto-wave\/\">P\u00e1gina web con efecto wave en HTML y CSS<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/alexcgdesign.com\/blog\/pagina-web-moderna-html-css\/\">P\u00e1gina web moderna con HTML5 y CSS3<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/alexcgdesign.com\/blog\/crea-una-pagina-web\/\">P\u00e1gina web con men\u00fa animado y efecto lightbox<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/alexcgdesign.com\/blog\/como-crear-un-menu-desplegable-html-css-js\/\">Men\u00fa desplegable con HTML, CSS y JavaScript<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/alexcgdesign.com\/blog\/como-crear-formulario-html-css\/\">Formulario HTML funcional sin backend<\/a><\/li>\n<\/ul>\n\n","protected":false},"excerpt":{"rendered":"<p>Crea paso a paso una p\u00e1gina web responsive con HTML, CSS y JavaScript: slider, preguntas frecuentes, men\u00fa hamburguesa y formulario. C\u00f3digo gratis en GitHub.<\/p>\n","protected":false},"author":1,"featured_media":3338,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acg_migrated":"2026-10-12","footnotes":""},"categories":[2],"tags":[],"class_list":["post-717","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno-web"],"blocksy_meta":{"styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":7}},"_links":{"self":[{"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/posts\/717","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/comments?post=717"}],"version-history":[{"count":0,"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/posts\/717\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/media\/3338"}],"wp:attachment":[{"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/media?parent=717"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/categories?post=717"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/tags?post=717"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}