Saltar al contenido

Retos frontend

REST Countries API with color theme switcher

Ver en vivoP谩gina del retoC贸digo

Nivel en Frontend Mentor: Avanzado

Reto:
  • Ver todos los pa铆ses de la API en la p谩gina principal.
  • Buscar por pa铆s usando un campo de entrada de texto.
  • Filtrar los pa铆ses por regi贸n.
  • Hacer clic en un pa铆s para ver m谩s informaci贸n en una p谩gina separada.
  • Hacer clic en los pa铆ses fronterizos en la p谩gina de detalles
  • Alternar el tema entre modo claro y oscuro (opcional)
ReactJS
REST Countries API with color theme switcher

Rock Paper Scissors / Lizard Spock

Ver en vivoP谩gina del retoC贸digo

Nivel en Frontend Mentor: Avanzado

Reto:
  • Ver el dise帽o 贸ptimo para el sitio para escritorio (1366px) y m贸vil (375px).
  • Jugar a piedra papel o tijeras contra la computadora.
  • Mantener la puntuaci贸n despu茅s de refrescar la p谩gina.
  • Bonus
    • Jugar a piedra, papel, tijeras, lagartija o spock contra la computadora (opcional).
ReactJS
Rock Paper Scissors / Lizard Spock

Chat App CSS Illustration

Ver en vivoP谩gina del retoC贸digo

Nivel en Frontend Mentor: Intermedio

Reto:
  • Ver el dise帽o 贸ptimo para el sitio para escritorio (1440px) y m贸vil (375px).
  • Ver los estados para todos los elementos interactivos.
  • Ver la interfaz del chat animada en la entrada inicial (opcional).
HTML5CSS
Chat App CSS Illustration

Manage landing page

Ver en vivoP谩gina del retoC贸digo

Nivel en Frontend Mentor: Intermedio

Reto:
  • Ver el dise帽o 贸ptimo para el sitio para escritorio (1440px) y m贸vil (375px).
  • Ver los estados para todos los elementos interactivos.
  • Ver todos los testimonios en un slider horizontal.
  • Recibir un mensaje de error cuando se env铆e el formulario del newsletter si:
    • La entrada esta vac铆a.
    • La direcci贸n de correo electr贸nico no est谩 formateada correctamente.
ReactJS
Manage landing page

Easybank landing page

Ver en vivoP谩gina del retoC贸digo

Nivel en Frontend Mentor: Intermedio

Reto:
  • Ver el dise帽o 贸ptimo para el sitio para escritorio (1440px) y m贸vil (375px).
  • Ver los estados para todos los elementos interactivos.
ReactJS
Easybank landing page

Job listings with filtering

Ver en vivoP谩gina del retoC贸digo

Nivel en Frontend Mentor: Intermedio

Reto:
  • Ver el dise帽o 贸ptimo para el sitio para escritorio (1440px) y m贸vil (375px).
  • Ver los estados para todos los elementos interactivos.
  • Filtrar la lista de ofertas basada en las categor铆as seleccionadas.
ReactJS
Job listings with filtering

Weather Forecast

Ver en vivoP谩gina del retoC贸digo

Nivel en Frontend Mentor: Intermedio

Reto:
  • Mostrar el clima actual, incluidas las condiciones clim谩ticas, la temperatura, la humedad, la velocidad del viento y la fecha y la hora.
  • Visualizaci贸n para mostrar el cambio de temperatura, el cambio de humedad y las condiciones clim谩ticas de cada d铆a.
ReactJS
Weather Forecast

LoopStudios Landing Page

Ver en vivoP谩gina del retoC贸digo

Nivel en Frontend Mentor: Junior

Reto:
  • Ver el dise帽o 贸ptimo para el sitio para escritorio (1440px) y m贸vil (375px).
  • Ver los estados para todos los elementos interactivos.
Svelte
LoopStudios Landing Page

Clipboard Landing Page

Ver en vivoP谩gina del retoC贸digo

Nivel en Frontend Mentor: Junior

Reto:
  • Ver el dise帽o 贸ptimo para el sitio para escritorio (1440px) y m贸vil (375px).
  • Ver los estados para todos los elementos interactivos.
ReactJS
Clipboard Landing Page

Social Media Dashboard

Ver en vivoP谩gina del retoC贸digo

Nivel en Frontend Mentor: Junior

Reto:
  • Ver el dise帽o 贸ptimo para el sitio para escritorio (1440px) y m贸vil (375px).
  • Ver los estados para todos los elementos interactivos.
  • Poder cambiar el tema de color a claro u oscuro.
ReactJS
Social Media Dashboard
Descubre m谩s sitios indie