Prácticas CSS de páginas web completas
Después de haber estudiado HTML y CSS con los tutoriales ofrecidos en la plataforma, lo ideal es poner en práctica todo lo aprendido a través de prácticas resueltas. A continuación te proporcionamos algunas prácticas con su solución para que puedas practicar todo lo aprendido.
1. Prácticas CSS páginas web completas
Si quieres aprender o mejorar tus prácticas CSS de webs, aquí te dejamos ejemplos de prácticas y ejercicios para comprobar tu aprendizaje y seguir trabajando en conseguir escribir un código CSS limpio, coherente y eficiente.
1.1. Práctica CSS resuelta. Blog con aside
A partir de la página web que se te proporciona, debes escribir las reglas CSS necesarias para lograr una página web que tenga el mismo aspecto que la siguiente imagen en la que se muestra la página web visualizada en dos dispositivos con diferentes resoluciones de pantalla:
Referencias:
Ancho de pantalla superior a 800px:
Ancho de pantalla inferior o igual a 800px:
Código html:
<div class="contenedorPrincipal">
<header>
<nav>
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Servicios</a></li>
<li><a href="#">Blog</a></li>
</ul>
</nav>
</header>
<main>
<img src="https://cdn.pixabay.com/photo/2015/09/09/19/56/office-932926_960_720.jpg" alt="imagen">
<section>
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et nisi facilis facere sint tempora? Quos a harum quisquam, sit ratione rem similique quod in est eius ducimus architecto voluptatibus odio.</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sed, blanditiis reiciendis placeat corporis nostrum ipsa totam distinctio, id, tenetur repellat asperiores officiis natus eius optio dolor aspernatur officia error veniam.</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatum aliquid alias hic! Aut illo aspernatur, quo vero officia, hic totam adipisci architecto itaque quibusdam, repellat fuga nam nesciunt quos voluptatibus.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dicta quae laborum magni enim tenetur sit aut reprehenderit quos. Excepturi, laboriosam nemo amet placeat explicabo facilis aliquid rerum quas incidunt soluta!</p>
</section>
</main>
<aside>
<h2>Lorem ipsum</h2>
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
</ul>
</aside>
<footer>
<p>Eniun</p>
</footer>
</div>
Indicaciones:
- Ya que no queremos que el navegador nos ponga márgenes y paddings predefinidos, empecemos poniendo el selector universal: magen 0, padding 0 y utilizaremos la propiedad box-sizing: border-box
- Fuente de tipo Arial.
- Color de fondo: #425067
- El contenedor principal (menú, main, footer) está centrado y tiene un ancho máximo de 1000px.
- El header ocupa el 100% del ancho, 48px de alto y tiene un fondo de color #eeeeee.
- Las listas que hay dentro del header no tienen ningún estilo (quitar la viñeta) y flotan a la izquierda.
- Los enlaces que hay dentro de las listas del header no tienen subrayado, tienen un padding superior e inferior de 15px y derecho e izquierdo de 20px, tendrán la propiedad display:inline-block (de esta forma se tienen en cuenta los paddings y los valores de width y height) y el color del texto es #2d3646. Cuando pasas el ratón por encima el color de fondo es #e52f6e y el texto de color blanco.
- La etiqueta main tiene el color de fondo blanco, está flotando a la izquierda y mide 70% de ancho.
- La imagen que hay dentro del main ocupa el 100%.
- La sección tiene un padding de 30px.
- Los párrafos que hay dentro de la sección tienen el texto justificado, tienen un margen inferior de 16px y un interlineado de 1.5 em.
- El título h1 tiene un margen inferior de 20px y un tamaño de fuente de 1.6em.
- El aside mude un 30% de ancho, está flotando a la izquierda, tiene un fondo de #25d6c8 y un padding de 30px.
- Las listas del aside no tienen ningún estilo (quitamos la viñeta), tienen un margen inferior de 16px y borde inferior de 1px sólido de color negro.
- El h2 del aside es de color negro, tiene un magen inferior de 20px y el tamaño de la fuente es de 1.4em.
- El footer tiene un ancho del 70%, un padding de 60px y un color de fondo de #e52f6e. No olvides usar la propiedad que nos ayuda a limpiar los floats.
- Los párrafos que hay dentro del footer son de color blanco y están centrados.
Añade una media query para cambiar la versión de pantalla hasta 800px. En este caso, main, aside y footer van a medir el 100% y serán display:block.
**Sigue buenas prácticas en la creación de tus hojas de estilo. No te olvides de validar tu código y utilizar la extensión autoprefixer antes de entregar tu proye
Ejercicio resuelto en CodePen:
default
1.2. Práctica CSS resuelta. Miniatura de producto
Crea el código CSS necesario para crear la siguiente miniatura de producto. Utiliza métodos tradicionales (ni Bootstrap, ni Flexbox, ni CSS Grid).
Referencia:
Código html:
<main> <article> <img src="imgs/zapatos.jpg" alt="zapatos"> <div class="datos-productos"> <div class="borrar">x</div> <div class="nombre">Zapatos de piel</div> <div class="precio">39,99 $</div> <div class="colores"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </div> </div> </article> </main>
Indicaciones:
- La etiqueta <article> flota a la izquierda, tiene un ancho de 350 px, un alto de 140px, el fondo es de color #F7F3F3 y tiene un márgen de 10px.
- La etiqueta <img> tiene un padding de 20px, un ancho de 100px y flota a la izquierda.
- La clase .datos-productos flota a la derecha, tiene un padding de 20 píxeles y un ancho de 190 píxeles. Al usar padding, no te olvides de la propiedad box-sizing: border-box; (quítala y ponla para ver cómo excede el contenido y al no caber se descuadra)
- La clase .borrar flota a la derecha, tiene un padding superior e inferior de 0 px y de 5px a derecha e izquierda, tiene un borde sólido de 1px de color negro, tiene un border-radius de 5 px, un margen superior de -10px y un margen izquierdo de 10 px.
- La clase .nombre flota a la derecha y está en negrita.
- La clase .precio flota a la derecha tiene un color de texto de #666, un tamaño de fuente de 14px y un margen superior e inferior de 5px, recuerda que los elementos anteriores son floats y que si no ponemos clear:both; quedarán pegados a los anteriores en vez de en el lugar que queremos (el elemento es movido hacia abajo para limpiar elementos flotantes).
- La clase .colores debe tener también clear:both por el mismo motivo que la clase precio.
- La etiqueta li debe tener un ancho de 20px y un alto de 20px, display:inline-block (para que tenga en cuenta los valores de width y height que se asignen. Prueba a modificarlo por display:inline y verás que con esa propiedad no tiene en cuenta los valores de width y height definidos), tiene un border-radius de 5px un margen izquierdo de 5px, fondo marrón y un borde sólido de 1px de color negro.
Ejercicio resuelto en CodePen:
default
1.3. Práctica CSS resuelta. Web con menú, area hero con parallax, llamada a la acción, footer, botón de WhatsApp fijo, etc.
Crea el código HTML y CSS necesario para crear la siguiente web. Puedes utilizar el método que quieras: Flexbox, CSS Grid o el método tradicional.
Referencias:
Pantallas mayores a 700px:
Pantallas menores o iguales a 700px:
Todos los contenedores se ven a una columna.
Indicaciones:
Selector universal: margen 0, padding 0, fuente de tipo Roboto
El header está compuesto del logotipo y del menú:
- header: va a estar fijo en la parte alta (position: fixed), para que el menú se posicione en lo más alto le pondremos top:0px. como el resto de elementos deben pasar por debajo del header cuando haces scroll, vamos a ponerle z-index con valor 1, así nos aseguramos que siempre esté encima, el ancho del header es del 100% y el alto de 70px, el color de fondo es #F7F9FA,
- nav: mide como máximo 1024px y está centrado.
- logo (header img): como queremos centrar el logotipo y tenemos su tamaño, podemos calcular fácilmente el padding que debe tener para que quede centrado: padding: 18px 10px.
- ul: flotamos a la derecha el elemento ul.
- li: le quitamos estilo a las listas, padding: 0px, le ponemos display:inline para que tenga en cuenta el ancho y el alto de cada lista.
- nav li a: color negro, fuente 1em, quitar subrayado, como sabemos que el menú mide 70 píxeles se puede centrar poniendo line-height: 70px, como sabemos el tamaño del menú y del texto podemos poner: padding: 26px 10px;, cuando se pasa el puntero por encima cambia de color a #5E5D6E.
Vamos a hacer el contenedor del parallax:
.parallax {
background-image: url("https://www.eniun.com/wp-content/uploads/eniun-home-historia.jpg");
height: 400px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.parallax img{
max-width: 400px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
overflow: hidden;
}
Como el menú ahora está fijo, ha salido del flujo normal de la página y todos los contenedores que hay a continuación empiezan desde el principio (no se tiene en cuenta la posición del menú). Una solución sencilla es poner al body un padding-top de 70px. Otra solución sería añadir un contenedor que ocupe lo mismo que el menú sin position fixed.
Vamos a poner el botón de WhatsApp fijo:
- #btn-fixed: le añadimos position:fixed, definimos su posición en la pantalla bottom: 10px y right: 10px
- .fa-whatsapp: color verde, fuente 3em.
Vamos a hacer el call to action:
- .call-to-action: para que quede bonito el diseñador te dice que como máximo el texto que hay dentro ocupará 700px y que tendrá un margin: 150px auto y padding: 0 30px; el texto estará alineado en el centro.
- .big: fuente de 1.1em, interlineado de 1.5em.
- .call-to-action h2, .call-to-action p, .call-to-action button: márgen inferior de 20px.
- button: padding superior e inferior de 15px y derecho e izquierdo de 40px, de esta forma es pulsable (se cumple mínimo 44px para que sea pulsable), fondo de color negro, fuente de 1em, color blanco, vamos a ponerle una transición (transition: background 0.5s linear;) esta propiedad necesita prefijo para navegadores ( -webkit-transition: background 1s linear;), al pasar el cursor por encima se pone de color #4A4959.
Vamos a hacer el info-box con cajas flexibles:
- info-box: color de fondo #1C1D22, centramos los textos, color del texto blanco, ponemos un padding para darle aire de 110px tanto inferior como superior.
- h2: vamos a conseguir algo de aire poniendo un margen inferior de 30px.
- #flex-p: vamos a usar flexbox para maquetar los contenedores: justify-content: center, display:flex, flex-wrap: wrap.
- #flex-p p: le damos un padding de 30 px para darles aire y le ponemos que como máximo ocupen 300px.
El resto de contenedores se hacen como cada uno quiera manteniendo el diseño lo máximo posible.
Solución:
0
1.4. Desarrolla una página web responsive con CSS tradicional basándote en prototipos
Desarrolla una página web responsive basándote en los prototipos que se te proporcionan: uno para pantallas de escritorio (mayores a 800px) y otro para dispositivos móviles (menores a 800px). Se te facilita el código HTML inicial, excepto el contenedor del formulario, que deberás crear siguiendo el diseño del prototipo.
- Emplea técnicas tradicionales de CSS, evitando el uso de Flexbox y CSS Grid.
- Sigue buenas prácticas HTML y CSS, con atención a la correcta indentación, organización de código y uso eficiente de CSS.
- Asegúrate de que tu página sea visualmente fiel a los prototipos.
- Puedes modificar el código HTML pero no incluyas clases innecesarias si puedes hacerlo mediante selectores descendientes, selectores hijos, etc.
Código HTML:
<header>
<div class="container-center">
<h1>TRADE</h1>
<nav>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
<button>Sign Up</button>
<button>☰</button>
</nav>
</div>
</header>
<section class="cta">
<h2>Ready to get started?</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor indididunt ut labore et dolore magna aliqua.</p>
<button>Start free trial</button>
</section>
<section class="">
<!--Escribe aquí tu código HTML para crear el formulario-->
<!-- Join Our Newsletter
Subscribe to receive updates, access to exclusive deals, and more.
Name:
Email:
Subscribe-->
</section>
<footer>
<div class="container-center">
<div>
<h2>TRADE</h2>
<p>© 2000 – 2023</p>
<p>Privacy – Terms</p>
</div>
<div>
<h3>Product</h3>
<a href="#">Product</a>
<a href="#">Product</a>
<a href="#">Product</a>
</div>
<div>
<h3>Features</h3>
<a href="#">Feature</a>
<a href="#">Feature</a>
<a href="#">Feature</a>
</div>
<div>
<h3>Resources</h3>
<a href="#">Resource</a>
<a href="#">Resource</a>
<a href="#">Resource</a>
</div>
<div>
<h3>Company</h3>
<a href="#">Company</a>
<a href="#">Company</a>
<a href="#">Company</a>
</div>
</div>
</footer>
Prototipos:
Pantallas menores o iguales a 800px
Solución:
0
Puedes encontrar más ejercicios resueltos aquí: ejercicios de nivel básico y ejercicios de nivel intermedio.