Skip to content
OverviewSolutions
45
Comments
30
Luis Colina
@Comet466

All comments

  • Luis Colina•1,043
    @Comet466Posted over 2 years ago

    nice work Raja, congratulations on completing this challenge, you succesfully make the api call and the region filter im gonna point out some problems i found

    • in mobile devices theres no continuity in the design, some country cards are bigger than others
    • the filter by name doesnt work, it triggers a call and a reload

    nice work

    Marked as helpful
    0
  • soransh singh•1,025
    @soransh-singhSubmitted over 2 years ago

    Love to have your feedback on my solution.

    I was trying to build a chat app using socket.io and ReactJs but got some trouble in completing that project. So Instead of that project, I did this to practice react.

    Advice Generator || using ReactJs and CSS

    1
    Luis Colina•1,043
    @Comet466Posted over 2 years ago

    love your solution @soransh-singh you really went out your way giving it your personal touch, i just finished this challenge myself i got a doubt maybe you could help me out, good luck with that chat app

    1
  • attano•50
    @khaledxyzSubmitted over 2 years ago

    I will add a 2 second cooldown to the button so the user knows why the app is lagging (api 2 seconds cooldown)

    Advices!

    1
    Luis Colina•1,043
    @Comet466Posted over 2 years ago

    hi attano, i just completed this challenge too, i like your solution a lot, i dealt with the cooldown by putting a transition in between the advice's to make UX more enjoyble

    Marked as helpful
    1
  • Luis Colina•1,043
    @Comet466Posted almost 3 years ago

    for some reason the styles of the product info didnt load in the preview screenshot

    0
  • Luis Colina•1,043
    @Comet466Posted about 3 years ago

    hi joel, one thing if you use the cross icon to delete an item, the counter doesnt update

    Marked as helpful
    0
  • Luis Colina•1,043
    @Comet466Posted about 3 years ago

    good work for this challenge largecat, the box looks like the intended design and its responsive, in the body tag where yor set the background image you can set the property background-repeat to no-repeat, so it doesn't look like that

    1
  • Luis Colina•1,043
    @Comet466Posted about 3 years ago

    gran trabajo Renato tu interfas se ve genial y responde bien a distintos tamaños de pantalla, voy a señalar un par de cosas a tomar en cuenta para mejorar aun mas tu solucion

    1. los elementos de los navegadores tienen un outline predeterminado que para muy pocos casos seria el mas adecuado para los colores que se estan utilizando en el layout, esto afecta directamente a tus usuarios que usen el teclado para moverse por tu sitio, puedes reiniciar estos elementos con la pseudo clase :focus e interactuando con la regla 'outline:' para modificarlo por algo mas acorde y vistoso

    2. no es considerado una practica recomendada el uso de la propiedad innerHTML ya que conlleva muchos riesgos de seguridad y hasta conflictos con los demas elementos de la pagina, para estos casos se recomienda ampliamente usar textContent en su lugar

    3. tienes muchos errores de accesibilidad Renato, esto en una practica para frontend no tiene ninguna repercusion pero ten en cuenta que el motor de busqueda de google (SEO) evalua esos errores y disminuye la exposicion del sitio, asi que seria una buena practica debuggear el layout.

    pero vamos que te quedo muy bonito de verdad, un abrazo y happy coding (<= solo suena bien en ingles)

    0
  • Luis Colina•1,043
    @Comet466Posted over 3 years ago

    nice job on this challenge guillermo, im gonna point out a few details so you can work on then and make your solution better

    1. in the workflow section the cards container is uneven, the first card got more space that the other making it not look a little off, you can fix these by declaring flex:1 on each .card container, doing this every card would take the same amount of space

    2. you declared two rows in the footer but you only really need one row, and center the social media icons, doing so the solution would look more like the intended solution

    3. you should add the pseudo class :hover to your bottoms to make them more interactive for your user

    hope to had helped you, keep coding

    Marked as helpful
    0
  • Alex•270
    @chillcodemaoSubmitted over 3 years ago

    I'm quite happy with how the landing page turned out. The only think that I'd like to see a different approach to is maybe a more efficient way to style the top banner images, just under the 'meet' logo.

    Meet landing page - HTML&CSS - using flex

    1
    Luis Colina•1,043
    @Comet466Posted over 3 years ago

    hey alex nice work in this challenge, is responsive and you used semantic HTML for the markup thats an amazing practice for more readable and consistent code, just a few thing to point out: 1.Add :focus pseudo class to interactive elements like the buttons etc. Use outline property to make your website more accessible to keyboard users. Focusable elements have a default style that damages the presentation furthermore every browser has a slightly different default style for the outline, so you probably want to change the default style. 2. Add :hover pseudo class as well to make the site more engaging and interactive for the user

    Marked as helpful
    0
  • Dimitrios Politis•285
    @grmajikSubmitted over 3 years ago

    I have absolutely no clue why the links in the footer show like this. They look fine on my end when I'm using live server. If anyone is kind enough to take a look and try to locate what's going on, I'd be forever grateful. Thanks a lot.

    html css fontawesome

    2
    Luis Colina•1,043
    @Comet466Posted over 3 years ago

    hi dimitrios, you only need to declare the "color:white" in the selector ".footer-row-2 a" to fix your problem, nice job

    0
  • Manish•50
    @Manish6969Submitted over 3 years ago

    How to make the image light pink as shown in the design?

    HTML , CSS

    2
    Luis Colina•1,043
    @Comet466Posted over 3 years ago

    Hello Manish,

    Congrats for completing this challenge ! 🙂

    To get closer to the design you could use the mix-blend-mode: multiply that will blend the image with the parent's background, just and the color and you'll be ready to go.

    Also consider making it responsive

    Overall, well done for the challenge and happy coding !

    0
  • Olutimilehin Olushuyi•10
    @ShuyiOlutimiSubmitted over 3 years ago

    I would like to know what approach anyone might have used for the hero image and the overlay.

    I started with the HTML first. I am very particular about accessibility, so my first concern was to ensure that I have an HTML that was meaningful without any styling.

    This influenced how I approached the hero image. I was going to insert the image as an URL() background-image via CSS and then use a RGBA() to add the purple overlay as a background-color, but I realized it would pass no meaning to persons using screen readers or assistive technology. Additionally, I realized that I would not be able to use multiple sources for the image if inserted as a background. So I used the srcset attribute with the img tag.

    I included the hero image as an img tag, added an alt text and achieved the pink overlay using mix-blend-mode instead. Now everyone can appreciate the page and not just visual users.

    Still would like to know what approach anyone might have used for the hero image and the overlay.

    Responsive and Accessible Stat Card Solution

    2
    Luis Colina•1,043
    @Comet466Posted over 3 years ago

    Hello, Olutimilehin Olushuyi.

    nice job in this challenge just a few things to point out.

    -you can center the card more if you set a "hight:100vh" in the body tag

    also the .hero-text its way bigger than the image, you can fix this by declaring a flex propertie like this "flex:1" in the class ".hero-text"

    happy coding

    0