Skip to content
OverviewSolutions
19
Comments
12

Genildo Cerqueira Souza

@GenildocsBrazil500 points

Desenvolvedor Full stack em formação.

Latest solutions

View more solutions

Latest comments

  • Alisson Lins•100
    @AlissonLins
    What are you most proud of, and what would you do differently next time?

    Demorar menos na criação das resoluções

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

    Deixar o layout responsivo, principalmente na questão do mobile e as configurações dos botões que apesar da configuração no js não funcionam como deveriam para o desafio.

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

    As configurações do botão do JS, tive muita dificuldade com eles e ainda não consegui faze-los funcionar corretamente.

    Dropdown-Navigation

    1
    Genildo Cerqueira Souza•500
    @Genildocs

    Hello, congratulations on completing the challenge. I hope these tips help you with the buttons.

    • In the class "one," use top for alignment.
    .one {
    /* bottom: -170px; */
    right: 0;
    top: 30px;
}
    • Remove the display: none property from the "menu-secundary" class.
    • Create a "close" class with the following values:
    opacity: 0;
visibility: hidden;
    • You need to apply the toggle to the div that contains the modal with the items. For example, in this "menu-secundario one" div.
    Marked as helpful
  • P
    AdamullaOsas•800
    @AdamullaOsas
    What specific areas of your project would you like help with?

    There are little borders, especially in corner of my boxes and I dont know how to fix them

    html, sass, js

    #sass/scss
    1
    Genildo Cerqueira Souza•500
    @Genildocs

    Here is the translation to English:

    Hello, congratulations on completing the challenge. Regarding the borders, try increasing the border-radius of the .box div and removing the overflow property.

    body section .box {
    border-radius: 20px;
    width: 255px;
    position: relative;
    /* overflow: hidden; */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

    I tested it here, and it worked. You’ll just need to position the image by adjusting the top value.

    Marked as helpful
  • dooffenschmitz•60
    @Dgitial
    What are you most proud of, and what would you do differently next time?

    I'm most proud of successfully implementing a responsive design that adapts well to different screen sizes. The media queries effectively adjust the layout and text size, ensuring the content remains visually appealing and functional across devices. Next time, I would focus on enhancing flexibility and maintainability by exploring advanced layout techniques like CSS Grid or Flexbox. This could improve control over positioning and responsiveness. Additionally, optimizing CSS for performance and conducting thorough cross-browser testing would help ensure consistency and efficiency across different environments.

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

    I encountered challenges with responsive design, text alignment, and cross-browser consistency. I overcame these by implementing media queries, adjusting CSS properties, and conducting thorough cross-browser testing, while also streamlining the CSS for efficiency.

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

    I’d like help with refining the responsive design to ensure optimal performance across all device sizes and browsers. Specifically, I’m interested in improving the efficiency of my CSS and exploring advanced layout techniques, such as CSS Grid or Flexbox, to enhance flexibility and maintainability.

    responsive CSS styling

    1
    Genildo Cerqueira Souza•500
    @Genildocs

    Here is the translation to English:

    Hello, congratulations on completing the challenge. As a tip, don't apply a fixed height and width to the body. For center alignment, you can do it like this by applying the style directly to the body:

    body{
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: bisque;
    min-height: 100vh;
}

    This way, you can already achieve good responsiveness across different resolutions.
    I hope this helps.

    Marked as helpful
  • Cesar Ramirez•240
    @sean365-bit
    What are you most proud of, and what would you do differently next time?

    Please check out my solution, there are some areas that I would like to improve, if you have any feedback, please let me know. Best Regards

    Tip Calculator App

    1
    Genildo Cerqueira Souza•500
    @Genildocs

    Here’s the translation:

    Hello, congratulations on completing the challenge.
    As a tip, I believe it would be more effective to apply the flex property directly to the body instead of creating the div with the class main-container.
    Example:

    body {
    background-color: var(--light-grayish-cyan);
    font-family: "Space Mono", monospace;
    font-weight: 700;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

    Apply the flex property to calculate and create two div elements, one for the calculation and another to display the value.

    <main class="container">
    <div class="section-1"></div>
    <div class="section-2"></div>
</main>

    In the input div, it would be helpful to separate bill, select tip, and number of people each into their own div. This makes it easier to apply styles, and you wouldn't need to use inputForm.

    To properly align select tip, use the grid property and divide it into 3 columns.
    Example:

    .section-1 .percentage-number {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 10rem));
    grid-gap: 2rem;
}
    Marked as helpful
  • جهاد أحمد•280
    @Gehad28
    What are you most proud of, and what would you do differently next time?

    Proud that using grid to implement the layout was easy, finally :D

    Also, proud I could use relative and absolute positions to put the quotation image, as I always afraid of using them 😅

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

    I tried to use subgrid to align all cards' content, but it was a nightmare 🤦🏻‍♀️, so I just used some padding and margin to align them.

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

    Any feedback is welcomed :)

    Testimonials Grid Section

    1
    Genildo Cerqueira Souza•500
    @Genildocs

    Hello, congratulations on completing the challenge.
    Here are some tips for you:

    • In the grid, there’s a property called auto-fit that automatically reorganizes grid items according to their size. It might be interesting for you to try it out instead of switching to display: flex for mobile device resolutions.
    • Example:
    .container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  row-gap: 25px;
}
    • To use this property, it's mandatory to have minmax for the grid items.

    If this approach isn’t suitable, you could start by creating the grid for mobile devices first and then use media queries to adjust the columns.

    • Example:
    .container {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 25px;
}
.card {
  width: 300px;
  height: 300px;
  background-color: #ea7777;
  border: 1px solid black;
}

@media (min-width: 768px) {
  .container {
    grid-template-columns: repeat(4, 1fr);
    column-gap: 25px;
  }
}

    I hope these tips can help you.

    Marked as helpful
  • Genildo Cerqueira Souza•500
    @Genildocs

    Hello, congratulations on completing the challenge! I have some suggestions to enhance the design. In the footer, consider placing the links within the <a> tags to make them clickable. Here's an example:

    <ul>
    <li><a href="#">Press Kit</a></li>
    <li><a href="#">Install Guide</a></li>
</ul>

    Additionally, you can remove the inline styles within the HTML:

    I recommend using a CSS preprocessor like Sass, as it can streamline your stylesheets and improve maintainability.

    Feel free to keep the following information inside the footer tag:

    <footer>
    Challenge by Frontend Mentor. Coded by Mudassar Majeed.
</footer>

    I hope these suggestions prove helpful in refining your design. If you have any questions or need further assistance, feel free to ask!

View more comments