Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

All comments

  • Woldu Tsegazgi• 910

    @weldu0

    Posted

    👍 I like how you use semantic HTML, without a single generic HTML tag!

    The only thing I would improve is your CSS. The .omelette-recipe__container looks too big. You can set Flexbox on the body like this:

    body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

    Then, add a maximum width to .omelette-recipe__container to make it looks like the design:

    .omelette-recipe__container {
  /* Your other styles */
  max-width: 40rem;
}

    I hope you find this helpful 😊

    0
  • Papi• 230

    @Papi84

    Submitted

    What are you most proud of, and what would you do differently next time?

    I’m most proud of the project’s successful integration of real-time data updates. Implementing this feature was technically challenging, but it has greatly enhanced the user experience by providing up-to-date information seamlessly. The positive feedback from users about this feature validates its importance and impact. Next time, I would invest more time in creating a detailed project plan and setting clear milestones. We faced some delays due to unexpected challenges that could have been mitigated with better upfront planning. By incorporating more structured planning and risk management strategies, I believe we can avoid such issues and ensure a smoother development process.

    What challenges did you encounter, and how did you overcome them?

    I encountered a challenge with styling certain elements in the project, particularly with achieving the desired layout and responsiveness. To overcome this, I first reviewed the design requirements and then broke down the layout into smaller components. I experimented with different CSS techniques and utilized Flexbox and Grid for better control over the layout. Additionally, I referred to documentation and community resources to refine my approach. Ultimately, I was able to achieve the desired result by testing and iterating until the layout was fully responsive.

    What specific areas of your project would you like help with?

    I would appreciate help with optimizing the CSS for better performance and ensuring cross-browser compatibility. Specifically, I'm interested in feedback on my use of media queries for responsiveness and how I can improve the overall structure and organization of my stylesheets. Additionally, I'd like input on best practices for naming conventions in my HTML and CSS to make the code more readable and maintainable

    https://github.com/Papi84/Social-Links-new/blob/main/style.css

    1

    Woldu Tsegazgi• 910

    @weldu0

    Posted

    👋🏻 Hey Papi84!

    I noticed some errors in your code for the social links. Here are a my suggestions to improve it:

    Content & Accessibility: Make sure that each <a> tag has content inside it. For example, the last <li> with "Instagram" doesn't have text inside the <a> tag. It should look like this: <a href="#" class="list-item">Instagram</a>. This ensures the links are accessible and usable.

    I hope you find this helpful 😊

    Marked as helpful

    1
  • Carmo Lourenço de Souza Batista• 50

    @Carmo22b

    Submitted

    What are you most proud of, and what would you do differently next time?

    Não sabia que no box-shadow podia deixar a sombra muito em negrito, achei esse estilo de card diferente. De diferente que eu faria era adicionar uma cor gradiente combinando com o fundo amarelo e a sombra do card.

    What challenges did you encounter, and how did you overcome them?

    Os desafios que passei foi acertar o tamanho da imagem do card com os texto em baixo, mas com a ajuda do chatGPT, eu consegui ajustar o tamanho.

    What specific areas of your project would you like help with?

    Queria entender melhor sobre como funciona o "transform" e o "translate" na parte do CSS.

    box-shadow, display: flex, width, border-radius, background-color

    3

    Woldu Tsegazgi• 910

    @weldu0

    Posted

    👋🏻 Hey @Carmo22b I have a few suggestions for your solution.

    1. Avoid Using Margins for Alignment: Instead of using margin to align items, as you did in .Learning{}, it's generally not the best practice to use margins for alignment. One solution could be to set text-align: start to align the text properly. Another option is to make use of the Flexbox properties you have already set on the parent container. For example, you can use align-items and justify-content

    2. instead of manually adding margin you could use properties like gap to manage spacing between items .

    Other than that it looks perfect! 👍 I hope you find this helpful 😊

    0
  • P
    gurpal-dev• 240

    @gurpal-dev

    Submitted

    What are you most proud of, and what would you do differently next time?

    I'm happy that I've done this challenge.

    What challenges did you encounter, and how did you overcome them?

    I faced the challenge of html semantics, layout and responsiveness.

    I messed up the layout by not encapsulating the entire content into one parent container. I was trying to do it individually like having all content in two container and then trying to match their sizes. However, it turned out to be a huge problem. No matter what i do, the sizing won't match because of the content. Then after, thinking about the problem a lot I somehow came across the idea of putting everything into one container and inside that container I can give the two main containers that divide the whole content into two sections, properties of width: 100%. It did solve the problem of sizing.

    What specific areas of your project would you like help with?

    I want help with responsiveness. I want to know whether I should go first for the mobile or desktop.

    No matter what I do, I could not accomplish exactly the same design as the given challenge. The main problem I faced is the sizing. I can easily replicate the same design for the desktop, but when it comes to mobile the things do not match exactly.

    I really need feedback!

    Product Preview Card Component

    1

    Woldu Tsegazgi• 910

    @weldu0

    Posted

    👋🏻 Hey @gurpal-dev To answer your question use Mobile-First: Start designing for mobile and use media queries for larger screens. This is what most developers do. Some of the reasons are that it is easier to adapt to larger screens and, of course, there are wider user bases on mobile. On the other hand, desktop-first can be more challenging to adapt the design for smaller screens.

    If you want a deeper answer i recommend you looking at this course: Kevin Powell has a course on responsive design you can check out it here

    I hope you find this helpful 😊

    Marked as helpful

    1
  • Woldu Tsegazgi• 910

    @weldu0

    Posted

    👋 Hey, @MEHDI204! I have a few suggestions for your project:

    1. You don't need to use position for centering. Since you already have flexbox set up correctly, just add min-height: 100vh; to the body, and everything will be perfectly centered. It should look like this:

    body {
/* Your other code */
min-height: 100vh;
}

    2. Since you’re already using flexbox, you can remove any position properties and use max-width instead of width. This will make your solution more responsive.

    Hope you find this helpful! 😊

    Marked as helpful

    0
  • Amanda Hellen• 10

    @amandaadev

    Submitted

    What are you most proud of, and what would you do differently next time?

    Criação e reutilização de componentes reutilizáveis; Configuração do Vite e Tailwind; Conceitos de props; Renderização de loop; Configuração da pipeline - Github Actions.

    User profile Card

    1

    Woldu Tsegazgi• 910

    @weldu0

    Posted

    Hey, @amandaadev! 😄 I also used TailwindCSS for this project. The mobile version of your solution looks perfect, but on the desktop version, the image is too big. You can add TailwindCSS breakpoint classes like md: and lg: to address this issue.

    Other than that, it looks perfect—great work! 👏

    responsive design docs from tailwindcss

    I hope this was helpful. 😊

    0
  • Woldu Tsegazgi• 910

    @weldu0

    Posted

    👋 Hey, @0300hrs! I have a few suggestions for your project:

    The background-image is repeating itself whenever it gets space. You could add background-repeat: no-repeat to prevent it from repeating. To change the position, you can use background-position.

    The layout of the card looks perfect. 👍

    Keep up the fantastic work! 💪

    I hope you find this helpful. 😊

    0
  • Mai Starberries• 80

    @starberries

    Submitted

    What are you most proud of, and what would you do differently next time?

    Ultimately I think I did pretty well at getting the size of the elements to match up with the design reference, though feel like I used too much hard-coding on the sizes for my preference.

    What challenges did you encounter, and how did you overcome them?

    I learned about clamp. I didn't end up using it since the research rabbit hole I was falling into on that topic seemed too time-consuming and excessive for what I needed to accomplish in this case, but learning new things is always a plus.

    So anyway, I just ended up using my best guestimates to adjust sizes in pixels, which gets the job done if nothing else.

    What specific areas of your project would you like help with?

    What do you think, was using pixel measurements and hard-coding width/height a fine call here or was there a better solution that could work here? I definitely feel like designing things with responsiveness in mind is one of the trickier things for me to wrap my head around at the moment.

    Updated: After updating the CSS, I've now utilized rem units and max-height/width to provide better responsiveness on especially small screen sizes, courtesy of advice from @weldu0.

    Responsive QR code using CSS Flexbox

    1

    Woldu Tsegazgi• 910

    @weldu0

    Posted

    👋 Hey, @starberries! To answer your question, use rem for most cases and px only when specifically required.

    If you’re not familiar with rem or em, try getting into these units because they are much better than px. To convert from px to em:

    • 1em is typically equivalent to 16px (assuming the default font size).
    • To convert pixels to ems, divide the pixel value by 16 (px / 16 = em).

    Regarding fixed width/height, there are times when you need them, but for containers like in this case, use max-width and max-height instead.

    You can read more about the units here.

    Very good course about responsive by Kevin Powell

    Like you said, you did very well. Great work! 👏

    I hope you find this helpful. 😊

    Marked as helpful

    1
  • Woldu Tsegazgi• 910

    @weldu0

    Posted

    👋 Hey, @Alqalis! I have a few suggestions for your project:

    1. Use display: flex for the body like this:

    body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

    This will make it easier to center all the content.

    2. responsive @media screen and (min-width: 200px) and (max-width: 500px)

    • min-width: 200px means the styles will apply if the screen width is at least 200 pixels.
    • max-width: 500px means the styles will apply if the screen width is no more than 500 pixels.

    this mean you do not need to add (min-width: 200px) because it will apply the style in very small screen .

    Keep up the fantastic work! 💪

    I hope you find this helpful. 😊

    0
  • Woldu Tsegazgi• 910

    @weldu0

    Posted

    👋 Hey, @AbdelnaeemOsama! I have a few suggestions for your project:

    1. Use display: flex for the body like this:

    body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

    This will make it easier to center all the content, and you won't have to use margin: auto, which only centers the content horizontally.

    2. You could add the background image to the body using the background property:

    body {
  background: url(path/to/bg-image.png);
  background-repeat: no-repeat;
}

    If you want to dive deeper into learning Flexbox, here is a great link from MDN. For an interactive way of learning Flexbox properties, check out Flexbox Froggy.

    Keep up the fantastic work! 💪

    I hope you find this helpful. 😊

    Marked as helpful

    1
  • Woldu Tsegazgi• 910

    @weldu0

    Posted

    👋 Hey, @usama247550! I have a few suggestions to improve your solution:

    1. Wrap all your content inside a single container, like this:
    <div class="container" style="max-width:40rem;">
    All your content goes here
</div>
    1. Then, you can easily center everything using Flexbox by adding this to your CSS:
    body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 10rem; /* Adjusts the spacing to match the design */
}

    Everything else in your solution looks great!

    Great work! 👏

    I hope you find this helpful. 😊

    0
  • Woldu Tsegazgi• 910

    @weldu0

    Posted

    👋 Hey, @tawfikshaban! I have a few suggestions for your solution:

    Remove the margin from .container and add flexbox to the body. It should look like this:

    body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;

}

    Using margin only centers the element horizontally, while flexbox allows you to center it both horizontally and vertically.

    Great work! 👏

    I hope you find this helpful. 😊

    Marked as helpful

    1