Cursos Empresas Blog Live Conf Eventos Precios

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:

¡Espero tus soluciones en la sección de comentarios!

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

Curso para Conseguir Trabajo como Frontend Developer

Clase 10 de 22

Clase 10 / 22

Comentarios (21)21 comentarios

christian rojas

Hace 5 años

Wow, con estos ejercicios propuestos me doy cuenta que me falta mucho por conocer de JavaScript para poder encontrar las soluciones. Espero pronto terminar la escuela de JavaScript y volver a esta clase para dar mis soluciones.

Éxitos a todos en sus carreras

Luis Alejandro Vera Hernandez

JUAN CAMILO CAMPO TANGARIFE

Hace 4 años

Así me quedó el ejercicio de los Giffs que me pareció divertido.

)

Felix Torres Javier Antonio

te quedó chilo

Joel Dominguez Merino

Excelente ejercicios para poder en practica los conocimientos que vamos adquiriendo. En mi caso me pondre las pilas con Javascript ya que es lo que aún me falta pero espero pronto poder compartir mis soluciones 🚀

Camila Silva Bernal

Hace 3 años

Esta es mi app de todo list

https://todo-list-emoticon.netlify.app

Aquí mi último reto, me faltan cosas que mejorar, pero para el reto creo que es suficiente.

link: https://musicapp-4a349.web.app/

Orangel Brito

Para el buscador de gif ¿Como hacer para que se muestren las imagenes una vez que se dijite 3 letras?

Dario Fernando Burbano Hernandez

Hace un año

Juan Omar Palma álvarez

hola, alguien sabe como incluir un archivo template en nodejs estoy tratando de searar la cabecera y el footer de las demas vistas para reutilizar el código

Algien me puede ayudar?

Alejandro Chavez

¿Será mucho hacerlos con Next.js?

Francisco Ponce

A mi parecer no, pero sería muy cool si pudieras justificar con alguna feature del porqué elegir Next y no React / JS Vanilla y DOM.

Entiendo FranciscoEP, ayer decidí usar JS Vanilla y DOM por la simplicidad y porque no tengo projects con Vanilla.

Maestra, @Estefany Aguilar, no entendí bien, como debe de funcionar el To-Do List, podría poner mas detalle?

Ricardo Rito Anguiano

Hola Javi! En platzi hay un curso donde realizamos un To-Do List paso a paso. Que además es buenisimo para los fundamentos en react https://platzi.com/cursos/react/

Suerte!

Hola Ricardo, la cuestión es que no entendí el funcionamiento del TODO List de emojis que indica la maestra.

esto no entendo: 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 alguien me diera mas detalle estaría genial, pro mientras haré el TODO List básico

Alfonso Neil Jiménez Casallas

Hace 2 años

jajajajaja, muy chistosos esos memes de GIPHY XD

Juan Camilo Zuniga

Angel Bernechea

aqui esta el Todo-List que ya habia hecho unas clases anteriores le segui haciendo algunas modificaciones para darle un toque mas de personalidad

https://54albert54.github.io/curso-react-intro/

Edmundo Salamanca Villa

La app de Gifs

Pablo Pincay Alvarez

Esta app la hice de otro curso, la tengo que mejorar y a su vez hacer los demas que se ven muy interezantes.

Gifs: Link

Abierto a recibir feedback, ambos tienen simple responsive:

GIFinder
ToDo

fabian ortega

hola comunidad de Platzi, terminare los cursos de JS y volvere a este contenido para tratar de resolver los ejercicios.

dejo este comentario, como recordatorio

ya tengo el de los gif, ahí humildemente!

Quedo chido, solo que en desktop deberia ser de 3 columnas!

Tienes razón

Dejaré mi comentari por aquí, terminaré el curso y realizaré el proyecto.

Esteban Vladimir Alvarenga Gutiérrez

Dejaré mi comentario acá. Continuaré otros cursos que tengo pendientes y si o si volveré y con los ejercicios resueltos y a compartirlos. ¡¡Ánimos a todos!!

. dejo este comentario, como recordatorio

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

Progreso 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