Hello community, please take a moment to check out this project!
Your feedback and support are greatly appreciated.
Hey Abderrahim, Great job you did here. Your solution is responsive at every sizes and code is clean too. The use of CSS variable for definition of the color , font-size and font family is appreciable. Just keep making these you will gain a lot of hands on experience which will help in your future endeavor.
Happy coding!!
I have a place to practice my front end skills
What challenges did you encounter, and how did you overcome them?My challenge was I cannot align my card in the center. To solve this issue, I go to internet and search for align center for card and also read the docs from W3 school to see how to align the card in the center
Congrats, Your card is at the center you did a great job on your first solution keep creating more of these projects you will going to learn a lot and take your frontend skills to next level.
happy coding !!
O que mais me orgulha é a solução criativa para acessibilidade no QR code, adicionando um botão para direcionar usuários menos familiarizados. Para melhorias, sugeriria focar um pouco mais na parte de design, especialmente no alinhamento dos quadrados e ajustes de bordas. No entanto, reconheço os desafios com CSS, e é sempre um aprendizado.
Em resumo, destaco a inovação na acessibilidade e incentivaria a continuar refinando detalhes visuais para aprimorar ainda mais o projeto.
What challenges did you encounter, and how did you overcome them?Enfrentei desafios significativos, como acertar bordas, cores, centralização de elementos e responsividade. Para superá-los, dedicou um tempo para pausar, refrescar a memória e contornar as dificuldades. A falta de familiaridade com o Figma também foi superada com pesquisa e exploração constante.
What specific areas of your project would you like help with?receber feedback para mim é muito válido pois acredito não esta tão bom quanto deveria estar
ei, o trabalho que você fez é ótimo. O link do seu projeto ativo está faltando aqui, tente anexá-lo, pois será fácil para alguém revisar sua solução. feliz codificação
Any feedback is appreciated! Thank you!
What challenges did you encounter, and how did you overcome them?To display different images for mobile and desktop screens, I have utilized the element.
What specific areas of your project would you like help with?Any feedback is appreciated! Thank you!
Hey, Nice work done. Your web page is well designed and is responsive. You uses flexbox in your solution which is the base for any responsive layout. Picture tag you use here is also a good approach for handling two different images at different screen size. Here I would like to suggest you one thing that you can use grid in the body tag to place the content i.e. card at center, this will saves you extra line of flex codes. You work is excellent.
happy coding !!!!
My question is how to make a qr code like a take all the section in the card without affect the text, because when i modificate the dimensions qr code or image, the text was down and go out the card. thanks ...
Hi Guerra, congrats on your first solution! You did a great job.
Now in order to answer your query let's take one parent container with two child, first child as 'QR code image' and other child as 'text-container'. Give parent container as display: flex then give both child as flex-grow: 1 , in this way there will be no need to manually fixing of height and width and both the child will take equal spaces in the parent container.
Try the code below in your solution-
.card{ position: relative; display: flex; flex-direction: column; width: width: 360px; }
.qr-code{flex-grow: 1}
img{width: 100%}
//no need for height value it will automatically adjust itself.
happy coding!!!!
Hello everyone! This is my solution for Single price grid component. Feedbacks are appreciated.
Hi Ahmed Arafa, well done! Your solution looks perfect.
Your web page is well designed and it is responsive at different widths. You use flexbox and grid in your solution which is the base for any responsive layout. Your codes are clear and easy to be read by anyone. Your work is excellent.
Desarrollo del juego utilizando React, primera vez que realizo un aplicativo con esta tecnología, así que cualquier comentario es bienvenido.
Ei Duber Velez, muito bem! O aplicativo parece ótimo.
Sua página da web é bem projetada. Sua página é responsiva em diferentes larguras e as imagens SVG estão perfeitamente alinhadas. Você usa flexbox e grid em sua solução, que é a base para qualquer layout responsivo. Seus códigos são claros e fáceis de serem lidos por qualquer um. Além disso, o efeito de transição é muito atraente. Seu trabalho foi excelente.
hi there, uploading 5th webpage. pls let me know any correction and suggestions
thank u
Hey Yathish, well done! The effort you put into it is really impressive. Your web page is well designed.
There are few changes that could be made
hope this helps you, happy coding✌️.
How do you fit the image? I got a little bit cropped. So I use absolute position on image.
Hey Fiqih Alfito, well done! your solution looks good!
In order to answer your query, the product image can be managed by inserting the tag <picture> to wrap both desktop and mobile images in the same tag, and render each image differently depending on the device using the width you'll insert in the HTML!
Also, you can use maximum-width and maximum-height properties to ensure the image fits and isn't cropped.
Hope this helps.. Happy coding🙌
Hello Frontend Mentor community!....
I have a completed another small project and this is my solution for the 3 column preview card component. I have complete this project using flex-flow property.
Feel free to leave any feedback!
Hey Manu Jayakumar's, well done! Your solution looks nice.
It is appreciable the way you use flex property and grid to get the design easily. But there is an improvement which could be made, instead of using max-width: 23.5rem or max-width:60rem to the main you can use percentage width to the main so that width adjust automatically at lower screen sizes. Also when the maximum width of the card is already set like here you did max-width:20rem then width of the parent container can be ignored.
Hope this added some points to your solution, happy coding✌️..
Hey Rohan kar, well done! The effort you put into it is really impressive. The path of the image should match the one you mention in the link. After you give flex to a content item, you can use align items and justify-content property instead of a higher margin value.
happy coding✌️.
I'd like recive your feedback
Hey apuntesnavarrete, well done! your solution looks perfect.
Your web page is well designed. Your page is responsive at different widths and the svg images are aligned perfectly. You use flexbox in your solution, which is the foundation for any responsive layout. Your HTML code is clear and easy to read for anyone. The font-size can be reduced because this looks larger than usual. Even though the work you did was excellent.
happy coding ✌️.
