Skip to content
OverviewSolutions
8
Comments
6
P

Raul Galicia

@raulgaliciabGuadalajara, Jalisco, México230 points

Frontend Developer

Latest solutions

View more solutions

Latest comments

  • Tsotne Meladze•1,120
    @tsotneforester
    What are you most proud of, and what would you do differently next time?

    This "Spartain" font was headache as it is not listed on Google Fonts, but it works if inserted accorging to way any another font from Google is insterted in html. had to modify root json, added lavbar acsent colors and planet size to display it according to planets real size

    • react-router
    • framed motion
    • keyboard-only partial
    • styled components
    • planet siz

    Planets fact - React

    #framer-motion#react#styled-components#vite#react-router
    1
    P
    Raul Galicia•230
    @raulgaliciab

    Hi Tsotne,

    This is a really great solution! I like how you animated the planet's image display.

    The only issue that I see is in the mobile version. When you open the Burger Menu, you can't close it with a click, you have to select a planet to close it. This is a minor detail but it may affect the UX.

    Great work! I just followed you on GitHub.

    Marked as helpful
  • P
    Raul Galicia•230
    @raulgaliciab

    Hi Yasir,

    Great solution! These are the points that I could see as a feedback:

    Overall project.

    • Having all the logic in one file may not be very readable and maintainable in the long run. With vanilla JavaScript, you could try using ES Modules.
    • Since you are using data.json, the content.txt file seems to have no purpose in the repository.
    • Don't forget to update the README.md with your insights. One of the points of doing the projects is to be able to show the results proudly. :)

    Checkout Modal:

    • You can still scroll the rest of the content when the modal is open. Try to add these styles to the body when the modal is open: overflow: hidden; height: 100vh;
    • If the content in the modal is too large you can't see it complete. One style that could help with this is overflow-y: auto;

    Images:

    • You are just using the mobile version of the images. For dynamic display according to screen resolution try the <picture> HTML tag.
    Marked as helpful
  • P
    Raul Galicia•230
    @raulgaliciab

    Hi Yahya. Great work with the challenge! These are the points that I see you could improve in the solution:

    Design:

    • To the results display you could add an italic style and a larger font

    JavaScript:

    • In the Click Event, it could be not easy to read the code with all the logic in one line.
    • The input validations are missing. You can send an empty input, invalid dates (like February 30th), and dates in the future.

    Repository:

    • Don't forget to change the README template
    Marked as helpful
  • Alberto José•630
    @alberto-rj
    What challenges did you encounter, and how did you overcome them?

    I got contrast errors between the background and foreground colors of the links, which were resolved using the Accessibility Insights for Web extension.

    What specific areas of your project would you like help with?

    👍 Any great feedback is appreciated!

    Animated Social Links Profile

    #animation#bem#lighthouse#accessibility
    1
    P
    Raul Galicia•230
    @raulgaliciab

    Hi Alberto

    Great work and also great additions to the challenge!

    Here is the feedback that I see:

    • For the CSS variables try to use more descriptive names. This will make the code more maintainable.
    • You are using px and rem in different classes for width and height. This might not be very clear for someone else reading the code. Try to use just one for consistency.
    Marked as helpful
  • Vasu Vallabh•190
    @coding-vasu
    What are you most proud of, and what would you do differently next time? Proud:

    Changing root font size scales all rem-based elements proportionally, For screens up to 28.5rem wide: Root font size: 12px (default is 16px) 🖥️

    Learn:
    1. To dive deep into the world of CSS and JavaScript animations.
    2. Crafting interactive elements that bring concepts to life.
    What challenges did you encounter, and how did you overcome them? Responsive Design Challenge:

    Making a responsive blog preview card, especially for small screensSolution: Studied blog posts and tutorials to understand responsive design, focusing on font sizes and rem units

    CSS Pseudo-classes Challenge:

    Understanding :active, :hover, and :focus (for tabindex)Solution: Consulted MDN docs to learn about these pseudo-classes

    What specific areas of your project would you like help with? CSS Reset
    • Question: What is the best CSS reset to use and why?
    • Goal: Understanding the advantages of different CSS reset options.
    Resources Needed
    • Guidelines for CSS class naming conventions
    • Best practices for CSS file structure
    • Comparison of popular CSS reset/normalize options
    • Tutorials on implementing BEM or other CSS methodologies

    MDN Docs, Wave Extension,

    #accessibility#bem
    1
    P
    Raul Galicia•230
    @raulgaliciab

    This is a great solution!

    The only issue that I noticed is that the desktop measurements are maintained in the mobile version. Looking at the Figma designs you can see that the mobile version is slightly narrow.

  • Elian Pujols•30
    @ElianPujols
    What are you most proud of, and what would you do differently next time?

    Estoy orgulloso de haber podido crear mi primer proyecto y poder compartirlo con los demás. Por otro lado no estoy seguro de si hare algo diferente la proxima vez. A continuar mejorando...

    What challenges did you encounter, and how did you overcome them?

    El desafio mas grande hasta ahora fue entender como estaba estructurado el ejercicio y lo solucione buscando ayuda en google.

    What specific areas of your project would you like help with?

    En el planteamiento del proyecto antes de inicial este mismo

    pequeña pagina, con targeta de codigo QR que utiliza flexbox

    1
    P
    Raul Galicia•230
    @raulgaliciab

    Hola Elian!

    Viendo el projecto en línea creo que podrías enfocarte más en que las dimensiones sean más exactas al diseño original, como por ejemplo los padding o los border-radious. Algo que me ayudó mucho fue basarme en el archivo de Figma para ver las medidas exactas.

    Algo que igual noté en el código es que pusiste la imagen en el mismo contenedor que los textos. Podría ayudar el ponerlos de forma separada para controlar mejor el flujo y los estilos.

    De igual forma se podría trabajar más en el responsive design. En algunas dimensiones pequeñas de celulares los textos se salen de sus contenedores.

    Podrías intentar usando font-size: 62.5% en la etiqueta html, para así usar rem en el font-size de los textos

    Gran trabajo!