Raja Saputera• 60
@rajastra
Submitted
Luis Colina
@Comet466
All comments
- Luis Colina• 1,043
@Comet466
Posted
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-singh
Submitted
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.
Luis Colina• 1,043@Comet466
Posted
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
@khaledxyz
Submitted
I will add a 2 second cooldown to the button so the user knows why the app is lagging (api 2 seconds cooldown)
Luis Colina• 1,043@Comet466
Posted
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
@Comet466
Submitted
any feedback would be appreciate
Luis Colina• 1,043@Comet466
Posted
for some reason the styles of the product info didnt load in the preview screenshot
0 - Joel Hendrix• 190
@Joeldev1021
Submitted
Any feedback is welcome
Luis Colina• 1,043@Comet466
Posted
hi joel, one thing if you use the cross icon to delete an item, the counter doesnt update
Marked as helpful
0 - largecat• 10
@largecat
Submitted
I'm open to any advice regarding my html structure or css. Thanks!
Luis Colina• 1,043@Comet466
Posted
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 - Renato Marques• 130
@renatomarquesco
Submitted
any feedback is appreciated.
Thanks
Luis Colina• 1,043@Comet466
Posted
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
-
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
-
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
-
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 -
- Guillermo• 170
@Guille2000
Submitted
Its not 100% responsive but what do you think of the desktop's version?
Luis Colina• 1,043@Comet466
Posted
nice job on this challenge guillermo, im gonna point out a few details so you can work on then and make your solution better
-
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:1on each .card container, doing this every card would take the same amount of space -
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
-
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
@chillcodemao
Submitted
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.
Luis Colina• 1,043@Comet466
Posted
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
@grmajik
Submitted
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.
Luis Colina• 1,043@Comet466
Posted
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
@Manish6969
Submitted
How to make the image light pink as shown in the design?
Luis Colina• 1,043@Comet466
Posted
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 @ShuyiOlutimi
Submitted
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.
Luis Colina• 1,043@Comet466
Posted
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- Flemer• 10
@Flemer-Kay
Submitted
How can I create a website response without using media
Luis Colina• 1,043@Comet466
Posted
you could use the auto-fit and minmax grid attributes, but media queries ar far easier and better to be fair
0 - Christopher Reeve• 295
@hi-reeve
Submitted
hello everyone, this is my first challenge on front-end mentor! please give me a feedback on my solution.
Luis Colina• 1,043@Comet466
Posted
hello Christopher good job on this challenge to make the filter to the image instead of using a screen you use a property called "background-blend-mode: multiply" with her you can declare 2 properties (in this case a image and a color) and combined in the background or blend it better said, the ".card__paragraph" class has a margin top of 4rem, thats just way to much change it to 1 rem and your solution would be way closer to the intended design, good job and happy coding
0 @criscol64
Submitted
how can I improve the filter part?
Luis Colina• 1,043@Comet466
Posted
hello Cristhian good job on this challenge to make the filter to the image you use a property called "background-blend-mode: multiply" with her you can declare 2 properties (in this case a image and a color) and combined in the background or blend it better said, you media querie is a little out of reach for desktop version min-width:1440px is way too big for a desktop i had to open the console i changed myselft to be able to view the viewport on my browser, change it to max-width:1040px and it would be way more accesible, other than that good use of grid and of the position property, happy coding
0- Christopher• 285
@programmerXS
Submitted
My very first challenge using JS
Luis Colina• 1,043@Comet466
Posted
Nice work on this challenge Christopher, just a few things to point out
- if you open more than one question tag, the content overflow the card you can fix this by just making the JS close the tag on opening of another or you can declare the height of the card with a relative unit like "%"
- the card components needs a box shadow -the image in the mobile viewport is just centered between 390px and 430px
happy coding
0 - Yasser• 260
@yasertarek
Submitted
I would be happy to hear all of your feedback and advices.
Luis Colina• 1,043@Comet466
Posted
hi Yesser crazy to think i just finished this challenge too, your solution looks great congratulations, good use of relative units and flexbox model, only a minor details to point out, the dashboard-header is always in the mobile version of the intended design, other than that pretty solid work Yesser, nice
Marked as helpful
0 - Mojtaba Mosavi• 3,760
@MojtabaMosavi
Submitted
Any feedback appreciated in general and specially regarding the following qestions.
- What is you though process when you create mixins ?
- Have I done good job following the mobile first workdflow ?
- Would write the markup the same way, if not what would do differently(I pleased if you also explain why) ?
Happy coding ?
Luis Colina• 1,043@Comet466
Posted
hi Mojtaba, good work on this challenge it looks really close to the intended design, just wanted to point out a few details that you might had miss
- the mobile background has this black sport between 846px and 346px width that damage the presentation of the layout
2.the icons of the package container are not align, you could fix this just by adding a
display:flex;align-items:centerto the icons container 3.triangle of the floater looks a little off
happy coding!
1 - Alexey• 390
@alexeykuz-sys
Submitted
Please find hereunder my submission for Easybank Landing Page. I had a big problem with the positioning of the hero image and mobile phone image and make both of them responsive. Any comments and correction will be appreciated. Thank you
Luis Colina• 1,043@Comet466
Posted
good work on this challenge alexey looks sweet, i like the touch that the animation give to the layout, i see there's an image that is different from the rest you can fixed it by just declaring a "max-height" in the ".card-img-top" class, in this way you make 100% sure that all the image's are always in the right place, the hover elements of the social media looks kind of off too, you could fixed by just declaring the hover directly on the image, anyways good job and happy coding
0 - Thompson Urhiofe• 30
@februaryfourth
Submitted
Is there a way i could have used less html and css code? How could I have made better use of SCSS? How do you ensure font size is responsive in order to avoid re declaring new sizes for larger screens?
Luis Colina• 1,043@Comet466
Posted
hello Urhiofe, you solution looks great! There's a litte poblem with the linking of the css you need to use the route "css/style.css" instead of "/css/style.css" you can see what a little mistake like that one can do, it happens, the same with the image url that you find in the css, in the mobile version the information stats elements need to show in a single column, and a little padding in the body would help the mobile version too, other than that looks good and is responsive, happy coding
0 - Luis Colina• 1,043
@Comet466
Submitted
Hi, just completed this challenge i think it hits pretty close to the mark even thou the image doesn't have the background color (it has it but with opacity, i put a colored screen to give color to the image) pretty sure there's a better way to put color on a background image but that was what i came out with, surely someone will tell me a better way to do it, any kind of feedback will be appreciate, happy coding
Luis Colina• 1,043@Comet466
Posted
Hi Rayane, i already make the changes to the padding (yeah for the mobile version was 4 rem, way too much for side to side) and didnt knew that you could just blend all the content on the background with one property, thanks a lot for taking the time of watching my code and helped me to improve it, have a good day
0 - christopher• 105
@tw1zt
Submitted
I couldn't get the border perfectly round on the facebook icon. Help please
Luis Colina• 1,043@Comet466
Posted
hi christopher, god job on this challenge, to answer your question you only need to grab the class "fa-facebook" and put a specific padding ("padding:9px 12px" should work on desktop) another thing you need to declare the list style to none
0 - copascode• 10
@copascode
Submitted
I'm newbie for front end web dev. If This is my first challange. I build this "Single Price Grid system using HTML and CSS (SASS with SCSS Syntax). ALso i using grid css system. Feel free to get the code. And if you have any sugestion, just type the suggestion on the comment. Thanks a lot. (sorry for my bad english).
Luis Colina• 1,043@Comet466
Posted
good day friend, im unable to watch the styles that you applied, the route of the stylesheet is wrong, you used "/css/style.css" but the right path is "css/style.css". a little mistake but as you can see, one of huge repercussions, dont you worry we all had an error of the sort is part of the path, once that i can access to the code with the style applied gladly will help you there too
0 - olaf• 145
@mziarnko
Submitted
Hey there!! It's my secound project , hope you like it.If you can give me a piece of advice is everything alright pls do so!! Cheers everyone!!!
Luis Colina• 1,043@Comet466
Posted
hi Olaf, good work on this challenge love how you use the flex-wrap attribute and the position property, when i did it, never cross my mind to do it this way, also good work on using rem units and %, the only thing that i see you can fix is the media-query, you establish to trigger it at 992px thats not mobile size thats still desktop, it looks ugly and at that size is not necessary you could change it to 744px and it will feel and look better, much love a keep moving to the top
0
