Ejercicios prácticos de HTML, CSS y JS para entrevistas técnicas

Clase 10 de 22 • Curso para Conseguir Trabajo como Frontend Developer

Contenido del curso

Conoce tu perfil profesional

Preparación previa a presentar entrevistas técnicas

Cómo presentar entrevistas técnicas

Cómo resolver pruebas técnicas en casa

Experiencias, historias y traumas personales

3 ejercicios para poner en práctica tus habilidades en HTML, CSS y JS. Módulo: Prepárate para presentar entrevistas técnicas.

Para finalizar nuestro módulo, te compartiré 3 ejercicios para que pongas en práctica tus conocimientos en HTML, CSS y JS.

Buscador de GIF

Esta página debe contener una barra de búsqueda y una grid principal (con 3 columnas en desktop, 2 en tablet y 1 en mobile) que muestre GIF aleatorios. Una vez se digite 3 letras en la barra de búsqueda, se empiezan a mostrar GIF relacionados con la búsqueda en la grid principal.

Para este ejercicio, usa la API de GIPHY. Puedes tomar este diseño como referencia:

TODO List de emojis

Esta página debe contener una barra de búsqueda que recibirá como entrada las actividades de tu rutina diaria como: “comer”, “correr”, “pasear mascota”, “dormir”, entre otras; y un botón de “agregar” que se encargará de mostrar debajo de la barra de búsqueda un emoji correspondiente a la actividad ingresada.

Si se ingresa más de una actividad, deben mostrarse en forma de lista.

Adicionalmente, otra de las funciones de este TODO es que al darle clic al emoji (actividad), éste se debe remover de la lista. Puedes tomar este diseño como referencia:

Listado de música

Esta página debe mostrar las canciones de uno de los álbumes de tu artista favorito.

Adicional, deben existir 2 botones para cambiar el diseño de las canciones mostradas, ya sea para verlas en cuadrícula o en lista. Puedes tomar este diseño como referencia: