@codi-AndreSubmitted 18 days ago
P
Brandon Taylor
@brandontaylor1All comments
- P@brandontaylor1Posted 4 days ago
I like the design. What I want you to do is look up RegEx, especially for your Bill and input components. That will help you create validations and limit what the user can do, for example, a regex validation check will limit how many characters can be input after the decimal point in the bill component.
Marked as helpful0 - @Louay997Submitted 2 months agoP@brandontaylor1Posted 2 months ago
Hey Louay997,
Ok. So there are a couple of issues here. I would suggest going back and looking at the grid information to really gain a grasp of this. I even had trouble with it myself, just trying to get everything to even out. Initially, I didn't set any heights, I just allowed everything to be displayed. I used height: auto, just to see where it would lay. Look at this.... https://css-tricks.com/snippets/css/complete-guide-grid/
The other issues you have are just pure styling. If you have the figma design, use dev mode to get the font-size, font-weight, etc. to be able to get the right items for everything on your headings, paragraphs.
Hope this helps and good luck!
Marked as helpful0 - @Andiko-KSubmitted 3 months agoP@brandontaylor1Posted 3 months ago
You are on the right track! Instead of setting the height to auto on the container (the blue portion around the card), set it to 100vh. That way, the SignUp card will sit directly in the middle of the page. Good work!
0 - @okasha07Submitted 5 months ago
- @i7omicSubmitted over 1 year agoP@brandontaylor1Posted 3 months ago
Hey i7omic,
So a few things,
-
Your buttons need to be aligned side-by-side. To do this, you probably need to wrap a container(div) around the buttons and allow that container to flex the buttons.
-
The text below the images should be shorter for a better user experience. Reading from one end of the screen to another can be a bit tough, so I would wrap another container around that text and minimize the container's width to allow everything to squeeze a little tighter, giving the user a smaller space to read through.
Hope that helps a little bit!
Bt.
0 -
- @Andiko-KSubmitted 3 months ago
- @yamadaMk12Submitted 3 months agoP@brandontaylor1Posted 3 months ago
Great job! The only thing that I would say is the images are on the wrong side. You might have flexed the content and it aligns to the left. Instead, use position: "absolute" on the image and position: "relative" on its container to position it to where you want it to be. It's aligned to the bottom-right corner, so you can bottom: 0, right: 0, then utilize padding accordingly around all of the content inside the card.
0 - @alif-mahmuudSubmitted 4 months agoP@brandontaylor1Posted 3 months ago
I like it. Great job on the design! The button should probably fill the entire width of the container. You might have aligned the text to the left, but that doesn't include the button. To ensure that the button spans the entire container and will look aligned with the text on the left, you can use width: 100%.
0 - @udit-raiSubmitted 4 months agoWhat are you most proud of, and what would you do differently next time?
I am most proud of how I used a different and more nuanced style of coding to do this (classes instead of inline).
What challenges did you encounter, and how did you overcome them?I encountered many challenges, especially in regards to using flex & grid, but it was solved using margins.
What specific areas of your project would you like help with?I would like fellow coders to teach me more effective ways of making responsive elements
P@brandontaylor1Posted 4 months agoUdit - Like your design overall! Great job! One area I would like you to focus in on is the image itself. It looks slightly smushed down. It could be that the dimensions on the image itself aren't even, ex. height:50px, width: 50px. With square dimensions, you can then use border-radius to make the circular image. Hope that helps!
0 - @Yousef-MashenaSubmitted 4 months ago
- @romariodomingosSubmitted 4 months agoWhat are you most proud of, and what would you do differently next time?
Do que me orgulho mais: Me orgulho de ter conseguido criar uma página limpa e responsiva com foco na experiência do usuário. A estrutura e a estilização do código são bem organizadas, e a página se adapta corretamente a diferentes tamanhos de tela. Além disso, a escolha da fonte e a paleta de cores proporcionam uma aparência moderna e agradável, garantindo que o conteúdo seja facilmente legível.
O que faria diferente na próxima vez: Na próxima vez, poderia trabalhar mais na otimização de desempenho, como a utilização de imagens otimizadas para reduzir o tempo de carregamento. Você também pode explorar mais a acessibilidade, utilizando atributos ARIA para garantir que a página seja totalmente acessível para usuários com deficiências. Além disso, tentaria incorporar mais interatividade utilizando JavaScript para adicionar efeitos e funcionalidades dinâmicas, criando uma experiência mais envolvente para o usuário.
What challenges did you encounter, and how did you overcome them?Responsividade do layout : No começo, houve dificuldades para garantir que uma página fosse bem responsiva em diferentes tamanhos de tela, especialmente para dispositivos móveis. A largura do conteúdo não foi ajustada corretamente e algumas partes da página foram cortadas ou sobrepostas outras.
Como superei : Após testar em vários dispositivos, implementei media queries para ajustar o layout de forma mais flexível. Além disso, comecei a usar unidades relacionadas, como porcentagens e vw, em vez de valores fixos para garantir que o design fosse fluido e se adaptasse bem a diferentes tamanhos de tela.
Ajuste visual das imagens : A imagem do QR code estava com um tamanho fixo e não estava se ajustando corretamente em telas menores. Isso impactou a estética e a experiência do usuário.
Como superei : Usei técnicas de responsividade, ajustando o tamanho da imagem com max-width: 100%para garantir que ela seja redimensionada de acordo com a tela. Também fiz configurações no layout para que a imagem ficasse centralizada e fosse dimensionada aprimorada em dispositivos menores.
Desafio de acessibilidade : Percebi que o site poderia ser mais acessível, principalmente para usuários que não contam com leitores de tela, e que o contraste entre os textos e o fundo pudesse ser melhorado.
Como superei : Fiz uma análise de acessibilidade, aumentando o contraste entre o texto e o fundo e acrescentando alternativas alternativas nas imagens ( alt), além de melhorar a legibilidade do conteúdo ajustando a tipografia e o espaçamento.
What specific areas of your project would you like help with?Otimização de Performance :
Como reduzir o tempo de carregamento da página? Por exemplo, você pode atualizar imagens e recursos para melhorar o desempenho em dispositivos móveis e conexões mais lentas. Técnicas para reduzir o tamanho do CSS e JavaScript, como a minificação ou o uso de ferramentas como Webpack ou Gulp. Acessibilidade :
Como melhorar a acessibilidade para tornar o site utilizável para pessoas com deficiência? Isso pode incluir o uso adequado de ARIA (Accessible Rich Internet Applications), melhor contraste de núcleos, navegação por teclado e texto alternativo em imagens. Ferramentas como Lighthouse para testar a acessibilidade da página. Responsabilidade Avançada :
Como melhorar ainda mais a responsividade do layout para diferentes dispositivos? Isso pode incluir questões de alinhamento, dimensionamento de fontes e ajuste de margens/preenchimentos para diferentes telas. Considere o uso de flexboxou gridpara layouts mais complexos e flexíveis. Interatividade com JavaScript :
Como adicionar funcionalidades dinâmicas usando JavaScript? Por exemplo, você pode querer que o conteúdo seja interativo ou que o QR Code seja gerado dinamicamente a partir de um link fornecido pelo usuário. Implementação de efeitos de animação ou manipulação do DOM. SEO (Otimização para Motores de Busca) :
Como melhorar a visibilidade do seu projeto nos motores de busca? Isso pode incluir o uso de boas práticas de SEO, como o uso de meta tags, título descritivo, descrição e uso adequado de títulos ( , , etc.). Validação do Formulário (se aplicável) :
Como garantir que o formulário de entrada (se houver) seja validado corretamente antes do envio? Isso inclui a verificação de URLs inseridas e garante que o conteúdo seja validado de forma adequada.
P@brandontaylor1Posted 4 months agoI like the design overall. You did a great job completing it. A few things, though: 1) the overall sizing of the card looks a little bit big. 2) The QR code has a lot of margin around it, which must be reduced, and the white card's box radius needs to be increased. 3) You can use Flexbox to stack all the items together and use justify-items: space-between to ensure the space between the QR Code itself, the heading, and the content has even spacing between them.
0
