Edelmiro Anton

Latest comments

• 

  MichaelDAbadJr•100

  @MichaelDAbadJrSubmitted 3 months ago

  What are you most proud of, and what would you do differently next time?

  I'm proud of how much it looks exactly like the figma design. I'm proud of the component structure.

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

  I found trying to use paths for images in json quite difficult to implement. I still haven't figured it out. I created a json file to extract profile data so that way I can scale it up in the future. Since I wasn't able to correctly extract a file path to the image in the json file, I imported it in the component that needed it.

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

  I would like help on how to properly put a file path in json file to properly extract the heroImg and dynamically render it, into a react component.

  

  Social Links Profile using React.js

  #react

  1

  30
  

  Edelmiro Anton•70

  @EdelmiroAntonPosted 3 months ago

  Hey Michael! Congrats to finish this challenge! I really like your project structure applying the benefits of React :D

  One thing I'd like to comment is that you should put in practice and take into account the ARIA Landmarks. Including semantic HTML or ARIA Roles will let you organize and structure your web page.

  On the web sites, we should have at least one <main> some heading tag (<h1>, <h2>), etc or a <section>, for example. This way we'll contribuite with the accesibility and for whom use the screen readers.

  If you havent'd done so yet, I recommend you this site: ARIA Landmarks.

  Also I have installed the Chrome extension Landmark Navigation via Keyboard or Pop-up to analize how the sites are structured.

  I hope this feedback finds you useful.

  Happy coding and go on!

  0
• 

  Sena Abodan•80

  @Ss-e-N-aaSubmitted 3 months ago

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

  i tried making the app as close to the design as possible, but there were some elements i could not match properly .

  

  Blog preview card using React

  #react

  1

  40
  

  Edelmiro Anton•70

  @EdelmiroAntonPosted 3 months ago

  Hey! Congrats to finish this Challenge! I like how you apply the hover and the smooth transitions :) I should do the same haha.

  Regarding to the solution, I see you did the Blog Card for desktop devices. This should be when the window widh is >=1440px according the style-guide.md.

  There are little styles differences for the mobile approach:

  • There are no black borders,
  • The Typography and the Card img are smallers.

  I use React too, so I share this piece of code to show you how I change the Card img when the window width is >=1440px.

  • First I get the window width and store the value in my width variable with useState Hook:

  const [width, setWidth] = useState(window.innerWidth);
  

  • Every time the handleResize function triggers, my width variable will be updated:

    const handleResize = () => {
      setWidth(window.innerWidth);
    };
  

  • Finally I use the useEffect Hook to add the Resize event listener and pass my handleResize function as callback. Also I clean-up the effect with the clean-up function before my component leaves the screen and execute the next effect (is a good practice to avoid memory leaks ;) )

    useEffect(() => {
      window.addEventListener("resize", handleResize);
      return () => window.removeEventListener("resize", handleResize);
    }, []);
  

  Hope this feedback helps you!

  Go on and Happy Coding :D

  Marked as helpful

  1
• 

  Christo_Diaz•100

  @ChristoDiZSubmitted 3 months ago

  What are you most proud of, and what would you do differently next time?

  De como logre dar diseño a este reto

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

  aun me cuesta como centrar, pero intentando se aprende

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

  Necesito saber como centrar auto en el eje Y, ya que con tailwind coloco my-auto y no hace nada

  

  Mis inicios en el Frontend-HTML & TAILWINDCSS

  #tailwind-css

  1

  20
  

  Edelmiro Anton•70

  @EdelmiroAntonPosted 3 months ago

  Hola! Te dejo unos comentarios respecto a tu consulta sobre como centar en el eje Y. En mi caso, lo que hice fue utilizar las propiedades: flex justify-center items-center h-screen dentro del body. Te explico una por una:

  • Flex: equivale a display:flex.
  • Justify-center: centra los items sobre el eje X.
  • items-center: alinea los items sobre el eje Y.
  • h-screen: equivale a un height:100vh. De esta forma ocupará el 100% del alto de tu pantalla.

  Por otro lado, te recomiendo instalar Tailwind CLI (https://tailwindcss.com/docs/installation) en lugar de CDN. De esta forma, podrás tener el archivo tailwind.config.ts donde podrás customizar tus propios estilos. La instalación me resultó un poco engorrosa pero este video en YouTube (https://www.youtube.com/watch?v=arftp8kFBBg&ab_channel=Devtamin) fue de mucha ayuda, espero que te sirva a vos tambien!

  Un abrazo y a seguir codeando :D

  Marked as helpful

  0