Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

URL-Shorten-API landingPage with SASS

Can 235

@escarcan

Desktop design screenshot for the URL shortening API landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
  • API
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


how can i improve? specially with JS (still need to refactor)

Community feedback

Darko 980

@dtomicic

Posted

First of all I wanna say nice job on the project.

You should set the width of the image in percentage since you've set the first image's width in rem your whole website goes out of viewport on mobile devices (see here) and this is how it looks like when you set the width of it to 100%. On bigger screens you would have to adjust accordingly.

Other than that everything looks nice besides some smaller mistakes but those shouldn't bother your. Good job and keep it up 👍

Marked as helpful

0

Can 235

@escarcan

Posted

@dtomicic thanks! i fixed it!

0
Danilo Blas 6,300

@Sdann26

Posted

Hola Carlos!

Te ha quedado bastante bien, estaba viendo tu JS y me parece que te quedo espectacular, respecto a la funcionalidad creo que todo bien solo podría decir que elimines los comentarios.

Respecto al diseño te recomendaría comenzar agregar transiciones para que no se vea tan espontaneo los cambios por ejemplo a los elementos con hover agregarles transition: all 200ms; (el primer valor es la propiedad y el segundo el tiempo si solo quieres que el efecto sea al color pondrías transition: color 200ms;) y te lo recomiendo bastante porque le agrega belleza a tu web. Ahora como acotación personal yo agrego una media querie llamada hover te pondré un ejemplo sencillo pero depende de ti si quieres investigar sobre esta. La media querie hover sirve para detectar si estas en un dispositivo tactil o uno que no es tactil ya que hover es una propiedad que no funciona bien en celulares ya que no existe el puntero.

Por ejemplo:

.clase-generica{
   color: red;
}

@media (hover: hover){
   .clase-generica:hover{
      color: blue;
   }
}

@media (hover: none){
   .clase-generica:active{
      color: blue;
   }
}

Entonces en el primer media te detecta si estas en dispositivos de escritorio y cuando pasar po encima lo vuelve el rojo a azul y si estas en tablets o celulares por ejemplo solo se pone azul si dejas apretado. Es un buen tip y tiene bastante soporte esa caracteristica.

Solo podría agregar uno que otro detalle como en el apartado Advanced Statistic las cajas tiene un tamaño más pequeño en la parte de abajo o los iconos son un poco más grandes pero ya son detalles que dependes si lo modificas, en lo personal me parece que te ha quedado bastante bien y creo que ya solucionaste los problemas del reporte así que solo queda generar un nuevo reporte y actualizar el screen si es que llegas a cambiar esos detalle, igualmente te deseo el mejor de todos lo éxitos te quedo muy chulo tu trabajo Carlos.

0

Can 235

@escarcan

Posted

@Sdann26 Gracias por tus tips!, sin duda los tomare en cuenta, espero poder seguir viendo mas proyectos tuyos, un abrazo!

1
Danilo Blas 6,300

@Sdann26

Posted

@CarlosReyes84 Hola Carlos, actualmente me encuentro trabajando y con la universidad así que me tomaré un tiempo sin embargo te recomiendo que te crees una cuenta en Linkedin, es una red social enfocado en el entorno laboral donde puedes poner tu experiencia academica y laboral además de certificaciones, voluntariados, certificados, etc. te la recomiendo porque podrías interactuar con personas que ya están trabajando además que pueden reclutarte o puedes encontrar ofertas laborales que te interes. Es bastante buena si puedes date un tiempo para que las puedas ver.

0
Can 235

@escarcan

Posted

@Sdann26 Gracias! de momento siento que mi nivel aun es muy pobre y no tengo experiencia, ni proyectos para poder hacer un buen perfil, es por eso que aun me encuentro aprendiendo y practicando, cuando ya me sienta capaz de tener un buen nivel y portafolio me lanzare a buscar ofertas laborales.

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord