@h3cat3
Latest solutions
Newsletter sign up form with success message solution using js
Submitted 3 months agoPT
Eu gostaria de ajuda em como fazer aparecer as bolinhas que são o estilo de lista nas páginas do guthib, no meu repositório local elas aparecem normalmente como nas imagens que eu colocoi da minha resolução, mas nas páginas do github elas não aparecem de jeito nenhum. Alguém sabe o que eu preciso mudar para que elas possam ser aplicadas?
EN
I would like help on how to make the dots that are the list style appear on the guthib pages, in my local repository they appear normally as in the images I placed of my resolution, but on the github pages they do not appear at all. Does anyone know what I need to change so that they can be applied?
Article preview component solução
Submitted 12 months agoPT
Não consegui deixar o botão igual ao design fornecido, se possível eu gostaria de informações de como deixa-lo mais parecido com design fornecido. Também aceito feedbacks sobre qualquer outro ponto que possa ser melhorado.
EN
I was unable to make the button the same as the design provided, if possible I would like information on how to make it more similar to the design provided. I also accept feedback on any other points that can be improved.
Profile card using flex
Submitted about 1 year agoPT Eu gostaria de saber se tem como posicionar o background do mobile de uma maneira melhor, ele fica bom quando está na lagura requerida (375px), mas não fica bom conforme a largura vai aumentando.
EN I would like to know if there is a way to position the mobile background in a better way, it looks good when it is at the required width (375px), but it doesn't look good as the width increases.
Huddle landing page responsiva com grid e flex
Submitted about 1 year agoPT
Eu gostaria de feedbacks de como melhorar o css deste projeto, mais expecificamente na parte de
@media(min-width: 1024px), que eu acho que não ficou tão boa. Também aceito feedbacks sobre qualquer outro ponto que possa ser melhorado.EN
I would like feedback on how to improve the css of this project, more specifically in the
@media(min-width: 1024px)part, which I think is not so good. I also accept feedback on any other points that can be improved.Testimonials grid section main solução, usando flex e grid
Submitted about 1 year agoPT
Eu gostaria de receber feedbacks sobre qualquer ponto que possa ser melhorado.
EN
I would like to receive feedback on any points that can be improved.
Four card feature section responsiva, usando grid e flex
Submitted about 1 year agoPT
Eu gostaria de receber feedbacks sobre a responsividade, se ela ficou legal e se teria algum ponto em que melhorar. Feedbacks sobre qualquer outros pontos que possam ser melhorados também serão bem-vindos.
EN
I would like to receive feedback on the responsiveness, if it was good and if there was any point to improve. Feedback on any other points that could be improved will also be welcome.
Latest comments
- @Isabela-Fernanda
It looks good, but it is a little out of position and the width of the project is smaller than the solution. I recommend using the Google extension "PerfectPixel by WellDoneCode (pixel perfect)", it will help to better position the solution and also define the sizes of some parts.
- @Shakil-aWhat are you most proud of, and what would you do differently next time?
I am proud:
- I added javascript to my mobile and desktop design
- used the display none in css and figured out how it worked
- played around with positioning
next time i will:
- look more into javascript and events and find a better way to toggle the share popup
challenges:
- on the desktop version i havent figured out how to effectively toggle my profile content with the share popup and therefore i need to look into this and redo my project soon
- suggesting other methods i could have used for my pop up
@Isabela-FernandaHi, your project turned out very good. Regarding the pop-up, one tip I have is that you could have made the share arrow within a single button, it would serve both to make the pop-up appear and disappear, so you wouldn't need another share arrow inside the popup.
- @RalphPastel972What are you most proud of, and what would you do differently next time?
I am just proud of my consistency.
What I would do differently? I would spend more time to plan the best layout and the best approach for a challenge.
What challenges did you encounter, and how did you overcome them?I am still way to slow.
What specific areas of your project would you like help with?Nothing specific. But I am open to any critics that will make me improve.
@Isabela-FernandaSeu projeto ficou muito bom, parabéns! Mas uma coisa que eu percebi é que o seu site conforme o tamanho da tela vai diminuindo até chegar em 1050, o último valor antes dele mudar para mobile, a parte esquerda dos posts começa a ser cortada. Sugiro retirar
min-width: 250px;que você definiu para a classe.cardpara resolver esse problema. - @Randomgituser69What are you most proud of, and what would you do differently next time?
Atleast making it come close
What challenges did you encounter, and how did you overcome them?I was having no idea how can i put each item to different sides like left,right,top or bottom. I tried many ways but it didn't work. At one time i set the display of the container that includes cards to grid then gap some pixels or fr which i forgot how much and then grid template column to 1fr 1fr 1fr or something like that and that fixed the problem
What specific areas of your project would you like help with?Idk
@Isabela-FernandaHello, I took a look at your code and some tips I can give you are:
- Create a separate file just for styling (style.css, for example);
- In HTML, the
<div class="head">can be replaced by the<header>tag and placed outside the main, this would make your HTML more semantic and make it easier to style the<main>(you wouldn't need the< div class="grid-container">, you could simply make thedivof the cards); - I recommend you take a look at the
grid-template-areasproperty, it makes it much easier to work with the grid in this type of design. I'll put below a code example on this property that would solve this design with just a few space changes between items.
main { display: grid; grid-template-areas: "card1 card2 card4" "card1 card3 card4"; } .card1 { grid-area: card1; } .card2 { grid-area: card2; } .card3 { grid-area: card3; } .card4 { grid-area: card4; } - P@JoeWebDevelopmentWhat are you most proud of, and what would you do differently next time?
Use more utility classes, and rely more on global variables. I'm proud that this one has a lot of responsiveness.
What challenges did you encounter, and how did you overcome them?I had a challenge with the picture/image changing, but googled the solution using a srcset and media to match the media queries. I was also having issues of white space as it grew, but just used a break point of the media query to prevent that and max the width along with creating a mid-width to have consistency.
What specific areas of your project would you like help with?Please give it a look over. I know I need to add more for accessibility and screen reader users but that is not an area I have much knowledge in.
@Isabela-FernandaGreat HTML semantics. The responsiveness is also good, but if you want to increase it you can make two
@media, one for tablets with@media(min-width: 768px), and another for desktop with@media(min-width: 1440px)Marked as helpful - @hangtime319What are you most proud of, and what would you do differently next time?
Foi um projeto bem diferente e excelente para praticar CSS. Eu sempre começo a desenvolver a página pelo layout de desktop. Nesse projeto, é melhor começar pelo layout de tela menor.
What challenges did you encounter, and how did you overcome them?O maior desafio que encontrei e não consegui concluir foi realizar os ajustes nas listas. Não consegue alinhar igual ao desafio.
What specific areas of your project would you like help with?Ajustar os textos em listas como está no projeto.
