{"id":25,"date":"2019-04-27T02:12:29","date_gmt":"2019-04-27T02:12:29","guid":{"rendered":"https:\/\/alexcgdesign.com\/blog\/?p=25"},"modified":"2026-10-18T20:27:20","modified_gmt":"2026-10-18T20:27:20","slug":"pagina-web-con-html-css-y-javascript","status":"publish","type":"post","link":"https:\/\/alexcgdesign.com\/blog\/pagina-web-con-html-css-y-javascript\/","title":{"rendered":"Dise\u00f1o de p\u00e1gina web con HTML, CSS y JavaScript: una agencia responsive paso a paso"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Este es un <strong>dise\u00f1o de p\u00e1gina web con HTML, CSS y JavaScript<\/strong> completo: la web de una agencia con preloader, men\u00fa que cambia al hacer scroll, secciones de equipo y servicios, y una galer\u00eda de trabajos que se filtra por categor\u00eda. Todo es responsive y lo haces desde cero.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">El curso tiene 4 cap\u00edtulos. Aqu\u00ed tienes el primero, el c\u00f3digo de cada paso explicado y la plantilla completa para descargarla gratis.<\/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=\"Como CREAR UNA PAGINA WEB desde 0 \u25b6\ufe0f HTML5 CSS3 y JS [RESPONSIVE Y MODERNA] 2024 \u2714\ufe0f\" width=\"1290\" height=\"726\" src=\"https:\/\/www.youtube.com\/embed\/_5HMNZsm6xE?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=_5HMNZsm6xE\" 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> la p\u00e1gina web de una agencia, adaptable a m\u00f3viles, lista para usarla como portafolio o para tu empresa.<\/li>\n\n\n\n<li><strong>Tecnolog\u00edas:<\/strong> HTML, CSS (variables, Flexbox, <code>object-fit<\/code>) y JavaScript con un poco de jQuery.<\/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 una sola pantalla para una agencia de desarrollo web: cabecera con imagen y degradado, equipo, servicios, trabajos con filtro y pie de p\u00e1gina con redes sociales. Cada parte 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>Pantalla de carga<\/td><td>Preloader de Loading.io que desaparece con jQuery<\/td><\/tr><tr><td>Cabecera<\/td><td>Degradado sobre una imagen y efecto parallax con <code>background-attachment: fixed<\/code><\/td><\/tr><tr><td>Men\u00fa<\/td><td>Cambia de transparente a s\u00f3lido al hacer scroll, con JavaScript<\/td><\/tr><tr><td>Equipo y trabajos<\/td><td>Tarjetas con Flexbox y <code>object-fit: cover<\/code><\/td><\/tr><tr><td>Galer\u00eda de trabajos<\/td><td>Filtro por categor\u00eda con jQuery<\/td><\/tr><tr><td>M\u00f3vil<\/td><td>Men\u00fa hamburguesa que se cierra al tocar fuera<\/td><\/tr><\/tbody><\/table><\/figure>\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-moderna-html-css-javascript-1024x576.webp\" alt=\"Dise\u00f1o de p\u00e1gina web con HTML, CSS y JavaScript: agencia AlexCG Design con equipo, servicios y galer\u00eda de trabajos\" class=\"wp-image-3347\" title=\"\" srcset=\"https:\/\/alexcgdesign.com\/blog\/wp-content\/uploads\/2026\/10\/pagina-web-moderna-html-css-javascript-1024x576.webp 1024w, https:\/\/alexcgdesign.com\/blog\/wp-content\/uploads\/2026\/10\/pagina-web-moderna-html-css-javascript-300x169.webp 300w, https:\/\/alexcgdesign.com\/blog\/wp-content\/uploads\/2026\/10\/pagina-web-moderna-html-css-javascript-720x405.webp 720w, https:\/\/alexcgdesign.com\/blog\/wp-content\/uploads\/2026\/10\/pagina-web-moderna-html-css-javascript-768x432.webp 768w, https:\/\/alexcgdesign.com\/blog\/wp-content\/uploads\/2026\/10\/pagina-web-moderna-html-css-javascript.webp 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">El curso completo son 4 videos:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.youtube.com\/watch?v=_5HMNZsm6xE\" target=\"_blank\" rel=\"noopener\">Cap\u00edtulo 1: el HTML de toda la p\u00e1gina<\/a> (37 min)<\/li>\n\n\n\n<li><a href=\"https:\/\/www.youtube.com\/watch?v=U6mEbFdavik\" target=\"_blank\" rel=\"noopener\">Cap\u00edtulo 2: el dise\u00f1o con CSS<\/a> (50 min)<\/li>\n\n\n\n<li><a href=\"https:\/\/www.youtube.com\/watch?v=gHPi_ge9wM4\" target=\"_blank\" rel=\"noopener\">Cap\u00edtulo 3: el men\u00fa con JavaScript y la versi\u00f3n m\u00f3vil<\/a> (41 min)<\/li>\n\n\n\n<li><a href=\"https:\/\/www.youtube.com\/watch?v=9CskOPQOp9w\" target=\"_blank\" rel=\"noopener\">Cap\u00edtulo 4: el filtro de la galer\u00eda y el scroll a cada secci\u00f3n<\/a> (19 min)<\/li>\n<\/ol>\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 editor de c\u00f3digo, por ejemplo Visual Studio Code.<\/li>\n\n\n\n<li>Los iconos de los servicios, de <a href=\"https:\/\/www.flaticon.com\/\" target=\"_blank\" rel=\"noopener\">Flaticon<\/a> (PNG blanco de 64 px), y los de redes sociales, de <a href=\"https:\/\/fontawesome.com\/\" target=\"_blank\" rel=\"noopener\">Font Awesome<\/a>.<\/li>\n\n\n\n<li><a href=\"https:\/\/jquery.com\/\" target=\"_blank\" rel=\"noopener\">jQuery<\/a> para el filtro y el scroll suave, y un preloader de <a href=\"https:\/\/loading.io\/css\/\" target=\"_blank\" rel=\"noopener\">Loading.io<\/a>.<\/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 el proyecto y los recursos<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Crea una carpeta con <code>index.html<\/code>, <code>estilos.css<\/code>, una carpeta <code>img<\/code> para las fotos y una <code>js<\/code> para los scripts. En el <code>&lt;head&gt;<\/code> enlaza tu hoja de estilos y la hoja de Font Awesome desde su CDN, que es lo que dibuja los iconos de YouTube, Facebook y GitHub del pie. Los scripts van al final del <code>&lt;body&gt;<\/code>, con jQuery primero porque <code>filtro.js<\/code> lo necesita.<\/p>\n\n\n\n<pre class=\"wp-block-code language-html\"><code>&lt;link rel=\"stylesheet\" href=\"estilos.css\"&gt;\n&lt;link rel=\"stylesheet\" href=\"https:\/\/use.fontawesome.com\/releases\/v5.3.1\/css\/all.css\" integrity=\"sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU\"\n    crossorigin=\"anonymous\"&gt;\n\n&lt;script src=\"js\/jquery.js\"&gt;&lt;\/script&gt;\n&lt;script src=\"js\/main.js\"&gt;&lt;\/script&gt;\n&lt;script src=\"js\/filtro.js\"&gt;&lt;\/script&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\">Escribe el men\u00fa y la cabecera<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">El men\u00fa vive dentro del <code>&lt;header&gt;<\/code>: un contenedor con el logo, los cinco enlaces y el icono de men\u00fa para m\u00f3vil. Cada enlace tiene un <code>id<\/code> propio porque en el \u00faltimo paso JavaScript los usar\u00e1 para hacer scroll a su secci\u00f3n. El icono de hamburguesa es el car\u00e1cter <code>&amp;#9776;<\/code>, as\u00ed no hace falta otra fuente ni otra imagen.<\/p>\n\n\n\n<pre class=\"wp-block-code language-html\"><code>&lt;nav id=\"nav\" class=\"nav1\"&gt;\n    &lt;div class=\"contenedor-nav\"&gt;\n        &lt;div class=\"logo\"&gt;\n            &lt;img src=\"img\/logo.png\" alt=\"\"&gt;\n        &lt;\/div&gt;\n        &lt;div class=\"enlaces\" id=\"enlaces\"&gt;\n            &lt;a href=\"#\" id=\"enlace-inicio\" class=\"btn-header\"&gt;Inicio&lt;\/a&gt;\n            &lt;a href=\"#\" id=\"enlace-equipo\" class=\"btn-header\"&gt;Equipo&lt;\/a&gt;\n            &lt;a href=\"#\" id=\"enlace-servicio\" class=\"btn-header\"&gt;Servicios&lt;\/a&gt;\n            &lt;a href=\"#\" id=\"enlace-trabajo\" class=\"btn-header\"&gt;Trabajos&lt;\/a&gt;\n            &lt;a href=\"#\" id=\"enlace-contacto\" class=\"btn-header\"&gt;Contacto&lt;\/a&gt;\n        &lt;\/div&gt;\n        &lt;div class=\"icono\" id=\"open\"&gt;\n            &lt;span&gt;&amp;#9776;&lt;\/span&gt;\n        &lt;\/div&gt;\n    &lt;\/div&gt;\n&lt;\/nav&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 las secciones de equipo, servicios y trabajos<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Las tres secciones repiten el mismo patr\u00f3n: un t\u00edtulo, un subt\u00edtulo con la clase <code>after<\/code> y una fila de cajas. En la galer\u00eda, cada trabajo lleva su categor\u00eda como clase (<code>programacion<\/code>, <code>dise\u00f1o<\/code> o <code>marketing<\/code>) y cada bot\u00f3n del filtro la guarda en <code>data-nombre<\/code>. Esa coincidencia es lo que despu\u00e9s usa el filtro.<\/p>\n\n\n\n<pre class=\"wp-block-code language-html\"><code>&lt;div class=\"botones-work\"&gt;\n    &lt;ul&gt;\n        &lt;li class=\"filter active\" data-nombre='todos'&gt;Todos&lt;\/li&gt;\n        &lt;li class=\"filter\" data-nombre='dise\u00f1o'&gt;Dise\u00f1o&lt;\/li&gt;\n        &lt;li class=\"filter\" data-nombre='programacion'&gt;Programacion&lt;\/li&gt;\n        &lt;li class=\"filter\" data-nombre='marketing'&gt;Marketing&lt;\/li&gt;\n    &lt;\/ul&gt;\n&lt;\/div&gt;\n&lt;div class=\"galeria-work\"&gt;\n    &lt;div class=\"cont-work programacion\"&gt;\n        &lt;div class=\"img-work\"&gt;\n            &lt;img src=\"img\/programacion1.jpeg\" alt=\"\"&gt;\n        &lt;\/div&gt;\n        &lt;div class=\"textos-work\"&gt;\n            &lt;h4&gt;Programacion&lt;\/h4&gt;\n        &lt;\/div&gt;\n    &lt;\/div&gt;\n&lt;\/div&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\">Define las variables de CSS<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Antes de dar estilo a nada, el cap\u00edtulo 2 guarda colores, tama\u00f1os y espacios en variables dentro de <code>:root<\/code>. Al estar en la ra\u00edz, todos los elementos pueden usarlas. La ventaja se ve en el responsive: para reducir los m\u00e1rgenes en m\u00f3vil solo cambias <code>--margenes<\/code>, no cada secci\u00f3n.<\/p>\n\n\n\n<pre class=\"wp-block-code language-css\"><code>:root{\n  --color1: rgb(219,144,.5);\n  --color2: rgba(23, 180, 83, 0.877);\n  --color3: rgba(11,194,211, 0.623);\n  --fondo: #f2f2f2;\n  --titulos: 33px;\n  --margenes: 60px;\n  --espacios: 10px;\n  --espacios-contenido:45px;\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\">Dale a la cabecera un degradado con efecto parallax<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">El fondo de la cabecera son dos capas en un solo <code>background<\/code>: primero un degradado semitransparente de naranja a verde y azul, y debajo la foto. Con <code>background-attachment: fixed<\/code> la imagen se queda quieta mientras el contenido sube, y ese es el efecto parallax.<\/p>\n\n\n\n<pre class=\"wp-block-code language-css\"><code>header{\n  width: 100%;\n  height:600px;\n  background: linear-gradient(to bottom,\n  rgba(211,135,20, .6),\n  rgba(29,241,171, .6),\n  rgba(7,109,150, .45)\n  ), url(img\/fondo.jpg);\n  background-attachment: fixed;\n  background-position: center;\n  background-size: cover;\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\">Ordena las tarjetas con Flexbox y object-fit<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Las tarjetas del equipo est\u00e1n en una fila Flexbox con <code>flex-wrap<\/code>, as\u00ed que bajan de l\u00ednea cuando no caben. Cada tarjeta mide 400 px de alto: el 80 % para la foto y el 20 % para el texto. <code>object-fit: cover<\/code> hace que la foto llene su caja sin deformarse, recortando lo que sobra.<\/p>\n\n\n\n<pre class=\"wp-block-code language-css\"><code>.card{\n  display: flex;\n  justify-content: space-around;\n  flex-wrap: wrap;\n}\n\n.content-card{\n  width: 31%;\n  box-shadow: 0 0 6px 0 rgba(0,0,0,.5);\n  overflow: hidden;\n  height:400px;\n}\n\n.content-card img{\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\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\">Cambia el men\u00fa al hacer scroll<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">El men\u00fa tiene dos estados en CSS: <code>.nav1<\/code>, transparente y de 80 px, y <code>.nav2<\/code>, con fondo y de 100 px. En el cap\u00edtulo 3, JavaScript lee cu\u00e1nto has bajado (<code>window.pageYOffset<\/code>) y a partir de 300 px cambia una clase por la otra. La funci\u00f3n tambi\u00e9n se ejecuta al cargar la p\u00e1gina, por si alguien la recarga a mitad del scroll.<\/p>\n\n\n\n<pre class=\"wp-block-code language-js\"><code>function menus(){\n    let Desplazamiento_Actual = window.pageYOffset;\n\n    if(Desplazamiento_Actual &lt;= 300){\n        nav.classList.remove('nav2');\n        nav.className = ('nav1');\n        nav.style.transition = '1s';\n        menu.style.top = '80px';\n        abrir.style.color = '#fff';\n    }else{\n        nav.classList.remove('nav1');\n        nav.className = ('nav2');\n        nav.style.transition = '1s';\n        menu.style.top = '100px';\n        abrir.style.color = '#000';\n    }\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\">Haz el men\u00fa hamburguesa para m\u00f3viles<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Por debajo de 700 px los enlaces pasan a ser un panel fijo con <code>width: 0<\/code>, es decir, escondido. Al tocar el icono, <code>apertura()<\/code> le da un 70 % del ancho de la pantalla, y al volver a tocarlo lo cierra. Un tercer evento cierra el men\u00fa si tocas en cualquier otra parte de la p\u00e1gina.<\/p>\n\n\n\n<pre class=\"wp-block-code language-css\"><code>@media screen and (max-width: 700px){\n  .enlaces{\n    position: fixed;\n    top:80px;\n    background: #2c3e50;\n    left: 0;\n    height: 100%;\n    transition: 1s;\n    width: 0;\n    overflow: hidden;\n  }\n}<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code language-js\"><code>function apertura(){\n    if(cerrado){\n        menu.style.width = '70vw';\n        cerrado = false;\n    }else{\n        menu.style.width = '0%';\n        menu.style.overflow = 'hidden';\n        cerrado = true;\n    }\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\">Muestra un preloader mientras carga la p\u00e1gina<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">El <code>&lt;body&gt;<\/code> empieza con la clase <code>hidden<\/code> (sin scroll) y una capa negra a pantalla completa con la animaci\u00f3n de Loading.io encima. Cuando la p\u00e1gina termina de cargar, jQuery desvanece la capa y quita la clase.<\/p>\n\n\n\n<pre class=\"wp-block-code language-css\"><code>.centrado{\n  position: fixed;\n  width: 100vw;\n  height: 100vh;\n  background: #000;\n  z-index: 100;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code language-js\"><code>window.addEventListener('load', function(){\n    $('#onload').fadeOut();\n    $('body').removeClass('hidden');\n    menus();\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\">Filtra la galer\u00eda de trabajos con jQuery<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">En el cap\u00edtulo 4, al hacer clic en un bot\u00f3n, este se marca como activo y sus hermanos pierden la clase. Despu\u00e9s se lee su <code>data-nombre<\/code>: con \u00abtodos\u00bb se muestran todas las cajas, y con una categor\u00eda se ocultan las que no la tienen y se muestran las que s\u00ed.<\/p>\n\n\n\n<pre class=\"wp-block-code language-js\"><code>$('.filter').click(function () {\n    $(this).addClass('active').siblings().removeClass('active');\n    let valor = $(this).attr('data-nombre');\n    if (valor == 'todos') {\n        $('.cont-work').show('1000');\n    } else {\n        $('.cont-work').not('.' + valor).hide('1000');\n        $('.cont-work').filter('.' + valor).show('1000');\n    }\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\">Lleva cada enlace a su secci\u00f3n con scroll suave<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Cada enlace del men\u00fa evita su comportamiento normal y anima el scroll hasta la posici\u00f3n de su secci\u00f3n. Se restan 100 px porque es lo que mide el men\u00fa fijo: sin eso, el t\u00edtulo de la secci\u00f3n quedar\u00eda tapado.<\/p>\n\n\n\n<pre class=\"wp-block-code language-js\"><code>let equipo = $('#equipo').offset().top;\n\n$('#enlace-equipo').on('click', function(e){\n    e.preventDefault();\n    $('html, body').animate({\n        scrollTop: equipo -100\n    },600);\n});<\/code><\/pre>\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\">El curso es de 2018. Hoy puedes conseguir el mismo scroll sin jQuery: pon <code>scroll-behavior: smooth<\/code> en el <code>html<\/code>, <code>href=\"#equipo\"<\/code> en el enlace y <code>scroll-margin-top: 100px<\/code> en la secci\u00f3n. Y si quieres controlar el tama\u00f1o de los subt\u00edtulos, a\u00f1ade <code>--subtitulos<\/code> a <code>:root<\/code>: <code>.contenedor p<\/code> la usa, pero no est\u00e1 definida.<\/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\">La plantilla tiene el proyecto completo: <code>index.html<\/code>, <code>estilos.css<\/code>, <code>main.js<\/code>, <code>filtro.js<\/code>, jQuery, todas las im\u00e1genes y los iconos de Flaticon. Es libre de derechos de autor: \u00fasala como quieras.<\/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:\/\/alexcgdesign.com\/blog\/descarga-una-pagina-web-con-html-css-y-javascript\/\">Descargar la plantilla<\/a><\/div>\n<\/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\">Patrocinador oficial del curso<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Hostinger<\/strong> es el patrocinador oficial del curso. Si quieres publicar esta p\u00e1gina en internet con tu propio dominio, <a href=\"https:\/\/hostinger.com\/alexcg\" rel=\"sponsored noopener\" target=\"_blank\">entra con el enlace de AlexCG Design<\/a>.<\/p>\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 esta plantilla en mis proyectos?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">S\u00ed. La plantilla es libre de derechos de autor: desc\u00e1rgala, cambia los textos, las fotos y los colores, y \u00fasala como base para tu portafolio, tu empresa o la p\u00e1gina de un cliente. Los iconos de Flaticon s\u00ed piden atribuir al autor si no tienes licencia, como explico en el cap\u00edtulo 1.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u00bfNecesito jQuery para hacer esta p\u00e1gina web?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Solo para dos cosas: el filtro de la galer\u00eda y el scroll suave del men\u00fa, que se usan para ahorrar tiempo. El men\u00fa que cambia al hacer scroll y el men\u00fa hamburguesa est\u00e1n hechos con JavaScript puro. Si prefieres no usar jQuery, el scroll suave hoy se resuelve con CSS (mira el consejo despu\u00e9s de los pasos).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u00bfC\u00f3mo cambio los colores del dise\u00f1o?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Desde las variables de <code>:root<\/code>. Los t\u00edtulos, las l\u00edneas bajo los subt\u00edtulos y los botones del filtro usan <code>--color1<\/code>: si cambias su valor, cambian todos a la vez. El archivo trae otros dos colores, verde y azul, preparados en <code>--color2<\/code> y <code>--color3<\/code>.<\/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\/como-crear-una-pagina-web-con-html-css-js\/\">P\u00e1gina web con HTML, CSS y JavaScript paso a paso<\/a><\/li>\n\n\n\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-desde-0\/\">P\u00e1gina web con efecto skew<\/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<\/ul>\n\n\n\n<div class=\"wp-block-group acg-cta is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"acg-cta__eyebrow wp-block-paragraph\">Curso<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Domina HTML5 y CSS3<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Mi curso para dise\u00f1ar p\u00e1ginas web modernas desde cero, como esta.<\/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:\/\/alexcgdesign.com\/descuento-diseno-web-moderno\/\">Ver el curso<\/a><\/div>\n<\/div>\n<\/div>\n\n","protected":false},"excerpt":{"rendered":"<p>Crea el dise\u00f1o de una p\u00e1gina web de agencia con HTML, CSS y JavaScript: preloader, men\u00fa que cambia con el scroll y galer\u00eda con filtro. Plantilla gratis.<\/p>\n","protected":false},"author":1,"featured_media":3347,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acg_migrated":"2026-10-18","footnotes":""},"categories":[2,3,5],"tags":[13,7,9,14],"class_list":["post-25","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno-web","category-plantillas-de-web","category-tutorial","tag-como-crear-una-pagina-web-desde-0","tag-diseno-web","tag-html5","tag-pagina-web-adaptable-a-dispositivos-moviles"],"blocksy_meta":{"styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":7}},"_links":{"self":[{"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/posts\/25","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=25"}],"version-history":[{"count":0,"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/posts\/25\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/media\/3347"}],"wp:attachment":[{"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/media?parent=25"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/categories?post=25"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/tags?post=25"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}