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 !!!!
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!!!!
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.
