4Geeks chosen to deliver AI education in the Bahamas alongside Harvard, Oxford, and Columbia.See more
Image: 4geeks-devs-logo_1763162063433
ACCEDER
Gratis·Ejercicio interactivo

Construye diseños de sitios web con CSS

Aprende a construir diseños con un tutorial interactivo y auto-corregido. Domina las propiedades CSS como display, position, float y z-index. Entiende cómo centrar contenido, crear barras laterales y usar pseudo-elementos. Mejora tus habilidades de diseño web con tutoriales prácticos y auto-corregidos.

Este ejercicio incluye

Technical Skills
HTML CSS
Asistencia de IA para guía personalizada
Código real, resultado en tiempo real
Validación instantánea con tests
Progreso guardado en tu ruta

Prueba este ejercicio

Crea una cuenta y obtén acceso inmediato a este ejercicio

By signing up, you agree to the Terms and Conditions and Privacy Policy

Already have an account?

Nivel

EASY

Tiempo estimado

8 horas

Acceso

Gratis

Requisitos previos

Ninguno

Sobre este ejercicio

Aprende a construir diseños con un tutorial interactivo y auto-corregido. Domina las propiedades CSS como display, position, float y z-index. Entiende cómo centrar contenido, crear barras laterales y usar pseudo-elementos. Mejora tus habilidades de diseño web con tutoriales prácticos y auto-corregidos.

Syllabus

Mira el contenido que incluye este ejercicio

1

Welcome to Layouts

Aprende las diferencias entre display y position, explora flexbox, floats, centrado de contenido y diseños de barra lateral con :before y :after.

2

Display None

Practica ocultar elementos con visibility y display:none, mostrar elementos de lista en línea y convertir strong en elementos de bloque.

3

Position Relative vs Absolute

Practica aplicando posicionamiento relativo y absoluto a un div y compara las diferencias visuales entre ambos.

4

Move the image behind the text

Use the z-index property to send an image behind text, controlling element layering in your layout.

5

Float example

Practica el uso de la propiedad float para colocar una imagen a un lado del texto, aplicando margin-right para separar correctamente ambos elementos.

...

Obtén un certificado de IA respaldado por 4Geeks

Este ejercicio forma parte de un curso real. Descubre cuál es el tuyo

Elige entre AI Engineering, AI Flex o AI Fluency, nuestros programas de inteligencia artificial pensados para llevarte de cero a certificado, sin importar tu experiencia previa. El 86% de nuestros egresados consigue trabajo en el sector en un promedio de 3 meses. 
Compara los 3 programas y encuentra el que se adapte a tu ritmo y objetivos.
Explorar opciones
Code editor on laptop

Ejercicios relacionados

Sigue aprendiendo sobre los temas de este ejercicio

Tutorial para Aprender Bootstrap desde Cero

Tutorial para Aprender Bootstrap desde Cero

bootstrap
html-css

Domina Bootstrap con ejercicios prácticos sobre sistemas de cuadrícula, barras de navegación, secciones hero y más. Aprende a aplicar estilos de Bootstrap a tus elementos HTML, usa reglas y trucos…

Probar este ejercicio
Aprende cómo usar e interactuar con Formularios en HTML

Aprende cómo usar e interactuar con Formularios en HTML

javascript
html-css
formularios

Domina el arte de los formularios HTML con ejercicios interactivos que abarcan entradas de texto, áreas de texto, entradas de fecha y números, menús desplegables y más. Aprende validación de…

Probar este ejercicio
Aprende cómo manipular el DOM con JavaScript

Aprende cómo manipular el DOM con JavaScript

javascript
html-css
the-dom

Paso a paso, ve sobre todos los conceptos y métodos del DOM: Usa Javascript para manipular los estilos de los elementos de HTML.

Probar este ejercicio
Construye diseños de sitios web con CSS

Construye diseños de sitios web con CSS

html-css

Aprende a construir diseños con un tutorial interactivo y auto-corregido. Domina las propiedades CSS como display, position, float y z-index. Entiende cómo centrar contenido, crear barras laterales y usar pseudo-elementos.…

Probar este ejercicio
Aprende CSS con Ejercicios Interactivos

Aprende CSS con Ejercicios Interactivos

front-end
html-css
desarrollo-web

Aprende CSS con una docena de ejercicios interactivos y auto-corregidos. Estos ejercicios de CSS son ideales para principiantes que buscan aprender y practicar conceptos fundamentales de CSS, incluidos selectores, reglas…

Probar este ejercicio
Aprende lo básico de HTML Interactivamente

Aprende lo básico de HTML Interactivamente

html-css
layouts

Aprende los tags de HTML más populares y cómo utilizarlos con ejemplos interactivos de la vida real diseñados para simplificar el aprendizaje. Con calificación automática y soluciones en video, podrás…

Probar este ejercicio