Skip to content
OverviewSolutions
16
Comments
464

Danilo Blas

@Sdann26Perú6,300 points

Hello, my name is Danilo Blas! I am a Computer Science student. I am passionate about web development as well as other fields such as UX/UI Design and Artificial Intelligence. In these challenges I will show all my skills in various technologies that I have learned.

I’m currently learning...

Javascript and React

Latest solutions

View more solutions

Latest comments

  • Danilo Blas•6,300
    @Sdann26Posted over 1 year ago

    Hi Patryk!

    It has turned out quite well but there are some things to improve.

    The texts order Summary and Annual Plan have the following color assigned hsl(223, 47%, 23%)

    Also add the background color to the body background-color: hsl(225, 100%, 94%);

    You could also add animations as a small transition, for example to this rule of your CSS transition: all 300ms

    #card .cardFooter button {
    ...
    transition: all 300ms;
}

    You can apply this to any rule that has hover, active, focus, etc.

    Good coding!

    Marked as helpful
    1
  • Danilo Blas•6,300
    @Sdann26Posted over 2 years ago

    Pedro te ha quedado bastante bien el proyecto aunque te recomendaría intentar ser más preciso con los detalles.

    Darle un min-heigth a la clase quote hace que se vea mucho espaciado entre la linea que separa la frase y el botón. Te recomendaría en todo caso quitarselo y a la clase quote darle un padding-bottom de 3.5em (Uso em ya que veo más recomendado usar medida relativas que absolutas en este caso.

    Entonces te quedaría así:

    position: relative;
text-align: center;
font-weight: 800;
width: 100%;
max-width: 640px;
border-radius: 32px;
padding: 32px 42px;
  padding-bottom: 32px;
background-color: var(--neutral-dark-grayish);
padding-bottom: 3.5em;

    Además a la paralabra ADVICE yo le pondría el atributo letter-spacing: 4px. Este atributo permite darle separación a las letras y que quede como el diseño.

    Bueno eso es lo que te recomendaría mejorar para que quede más fiel al diseño.

    Buena suerte :D.

    Marked as helpful
    1
  • Danilo Blas•6,300
    @Sdann26Posted over 2 years ago

    Hola CodingTube!

    Tu maquetación te ha quedado bastante limpia, me gusta. La funcionalidad esta bastante bien. En lo personal solo le cambiaría 4 cosas:

    a. Al <section class="rating-state"> le quitaría el margen, ya que no ayuda al centrado responsive ya que los margenes son estaticos, centra bien el horizontal pero en vertical no lo hace y por ejemplo en mi pantalla el componente se ve para marcar más abajo de lo que se debería, en cambio quitale los margenes y al body colocale además los siguientes atributos:

    { 
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   min-height: 100vh;
}

    b. Le cambiaría el color de la letra del footer ya que no contrasta bien, no digo que deba resaltar mucho pero el negro es muy opaco más bien utilizaría un color claro por ejemplo: color: rgba(149, 158, 172, 0.5);

    c. Agregale transiciones, a los botones, esto da un toque más profesional y es bastante amigable a la vista. A los elementos con las clases :hover, :active, etc. le puedes colocolar el atributo transition: transition: all 250ms;. Puedes leer la documentación para ver que valores le puedes dar.

    d. Coloca todo el <section> dentro de un <main>. Por temas de accesibilidad siempre debes tener 1 por página que englobe todo el contenido principal. Por cierto, además de hacer eso debes colocar un h1 tambien por página, puede agregarlo dentro del <main> y colocarlo con la clase sr-only que tengas los siguiente atributos con la finalidad de que este presente en el esquema de tu página pero no se pueda ver para que no altere el diseño:

    .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

    Hay un tema más si revisas el reporte, sale que no te recomienda usar los atributos ARIA que has usado, capaz no son permitidos en el elemento que has usado, pero te recomiendo que los elimines ya que el propio reporte te lo recomienda, una ves elimines todos los errores del reporte, generá uno nuevo :D.

    Y solo eso buena suerte.

    0
  • Danilo Blas•6,300
    @Sdann26Posted over 2 years ago

    Hola Alejandro!

    He revisado tu proyecto y respecto al maquetado te ha quedado 10 de 10, solo pequeños detalles con los tamaños pero te ha quedado en lo personal bastante bien.

    Respecto a tu código, si es que usas visual studio code o algún otro te recomendaría usar la extensión prettier para que formatee tu código y se vea mucho más "bonito", ya que entre etiquetas dejas vacios innecesarios además que es más legible cuando las etiqueas padres enmarcan a las hijas. Como recomendación por mi parte te diría que estudies metodología BEM para el nombramiento de tus clases, hará que todo se más ordenado y sencillo.

    Por ultimo debes eliminar los errores que te presenta el reporte de frontend mentor ya que eliminarlos te ayudará a mejorar bastante, para ellos agregan un <main> encima de <footer> y agrega todas las etiquetas dentro de <div class="card"></div> y esta dentro de <main>. Siempre debes tener un main que contenga todo el contenido principal de tu página una vez por cada página.

    Y con esto listo puedes generar un nuevo reporte y no deberían salirte ningún error.

    Eso seria todo, espero haberte ayudado :D!

    Marked as helpful
    0
  • Danilo Blas•6,300
    @Sdann26Posted almost 3 years ago

    Majito, felicitaciones por acabar este reto!

    Te ha quedado bastante bien, ya mejorarlo solo son pulir pequeños detalles en el padding o hacer la sombra más traslucida ya sea usando en ves de la variable del color una variable propia para sombras con transparencia.

    Tambien has tenido en cuenta tener 0 errores así que te ha quedado genial. Ya para mejorar a futuro puedes ir estudiando:

    • Reset.css y Normalize.css, para resetear los estilos de los navegadores por defecto.
    • Metodología para el nombramiento de tus clases, podría ser BEM ya que es la más sencilla y más usada.
    • Aprender SASS que es superset de CSS el cual le da más cualidades que ya tiene por defecto.

    Solo eso por mientras si es que no lo sabes. Good Coding! :D

    Marked as helpful
    2
  • Danilo Blas•6,300
    @Sdann26Posted almost 3 years ago

    Congratulations on finishing this challenge, CARREON!

    I would only recommend you to use some methodology for the naming of your classes as BEM but maybe you have seen it unnecessary as it is a small project. What I would mention is to change the <div class="attribution"> to <footer class="attribution"> since you are using it as this in your project, besides all the tags with content inside should be inside landmark tags (nav, main, footer, aside).

    That's all I could recommend you, you've got 10 out of 10 hehe.

    Good Coding!

    Marked as helpful
    0
View more comments