Skip to content
OverviewSolutions
14
Comments
13
EL harabiy
@Mubarak-Adeyemi

All comments

  • EL harabiy•250
    @Mubarak-AdeyemiPosted 19 days ago

    Great job done! I think you should set the form to reset where all the input fields will become empty after the display of the success message.

    0
  • Austin•430
    @astnioSubmitted about 1 month ago
    What are you most proud of, and what would you do differently next time?

    So creating this without any animation is simple enough. The challenge came when I decided I wanted the accordion to animate when closing/opening each element. Lucky for me, I came across this issue before, and already had a solution for it.

    The main issue is that height is not supported for animation, so most alternative solutions may involve quite a bit of JavaScript to setup a timer and then adjust the height by pixel. I didn't like that idea, though, and discovered that you can actually animate height using CSS grid.

    So I have this element:

    
  
    Is Frontend Mentor free?
    
      
      
    
  
  
    
      
        Yes, Frontend Mentor offers both free and premium coding challenges,
        with the free option providing access to a range of projects suitable
        for all skill levels.

    Whenever I click the button, I want that div with card-paragraph-wrapper to appear. I have this CSS to make that happen with an animation:

    .card-paragraph-wrapper {
  display: grid;
  transition: grid-template-rows 0.15s ease-out;
}

.card-paragraph-wrapper[data-active='true'] {
  grid-template-rows: 1fr;
}

.card-paragraph-wrapper[data-active='false'] {
  grid-template-rows: 0fr;
}

.card-paragraph-wrapper > div {
  overflow: hidden;
}

    The only particularly odd thing is you need the extra div in there. It does not work without it.

    Then you simply add event listeners to change the data-active to true or false in your script, and the CSS takes care of itself.

    Animated Accordion - No Frameworks, Just CSS and JS

    1
    EL harabiy•250
    @Mubarak-AdeyemiPosted about 1 month ago

    I had the same issue but I used this line of code to solve just that in JavaScript 👇.

    answer.style.maxHeight = answer.scrollHeight + "px";

    After I had set the answer max-height to 0 in CSS.

    then I used the above code to determine the height of the answer container for smooth transition after a certain class has been added with JavaScript to show the container.

    0
  • EL harabiy•250
    @Mubarak-AdeyemiPosted about 2 months ago

    1. JavaScript Refinement: Rating Selection Validation: Ensure users can't submit without selecting a rating. You can add a simple validation to check if any radio button is selected before showing the success message.

    2. CSS Refinement: Radio Button Accessibility: The input should have better focus states for keyboard accessibility. Consider adding a :focus style to labels for users navigating via the keyboard.

    3. Simplifying the Success Message:

    • Instead of hiding and showing sections with style.display, consider using classList.toggle to add a class like hidden to simplify the logic and maintain better readability in your JavaScript.
    1. File Separation:
    • While embedding styles and scripts in the HTML works for small projects, separating CSS and JS into their own files is good for scalability and maintainability.
    Marked as helpful
    0
  • EL harabiy•250
    @Mubarak-AdeyemiPosted about 2 months ago

    tgood

    0
  • EL harabiy•250
    @Mubarak-AdeyemiPosted 2 months ago

    Good Job!

    0
  • EL harabiy•250
    @Mubarak-AdeyemiPosted 2 months ago

    Well done

    0
  • EL harabiy•250
    @Mubarak-AdeyemiPosted 2 months ago

    Well done!

    1
  • germanMenaDev21•20
    @germanMenaDev21Submitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    Me siento satisfecho al solamente verme un curso de yt para poder realizar mi primer desafío usando grid, espero prontamente hacer un desafío sin ayuda.

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

    Quizás el desafío más grande que pude enfrentar fue con git, al haber iniciado recientemente a programar fue como subir 2 pisos por las escaleras jajaja. Aunque no hay nada que una investigación pueda resolver.

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

    Quizás alguna fuente de información completa de comandos git.

    Desafio Testimonial grid section Junior.

    1
    EL harabiy•250
    @Mubarak-AdeyemiPosted 2 months ago

    Good Job, Buddy!

    0
  • Flávio César•340
    @flaviocmbSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    I'm particularly pleased with the implementation of the CSS Grid layout. It provided a flexible and efficient way to structure the page and ensure consistent spacing across different screen sizes. The use of clamp() for font sizing was also a great choice, as it allowed for a balance between minimum, preferred, and maximum font sizes, enhancing the overall readability and responsiveness of the design.

    If I were to redo this project, I would focus on streamlining the CSS by reducing the number of custom properties and potentially using a CSS preprocessor like Sass or Less for better organization and maintainability. Additionally, I'd explore more advanced grid techniques to create even more complex and dynamic layouts.

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

    One of the biggest challenges was achieving pixel-perfect precision when matching the design's typography. The custom font and specific measurements made it difficult to get an exact match using standard font families and units. To overcome this, I experimented with different font combinations to find the closest match. I also fine-tuned the font-size values and line-height using a combination of pixels and rems.

    Another challenge was managing the complexity of the layout while ensuring responsiveness. I found that using a combination of grid, flexbox, and media queries helped me achieve the desired layout across different screen sizes.

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

    I would like some advice in CSS maintainability.

    Four Card Feature Section project

    3
    EL harabiy•250
    @Mubarak-AdeyemiPosted 3 months ago

    Good job!

    0
  • EL harabiy•250
    @Mubarak-AdeyemiPosted 3 months ago

    Good Job, Buddy

    Marked as helpful
    0
  • Dharmik Harkhani•110
    @harkhanidSubmitted 3 months ago
    What challenges did you encounter, and how did you overcome them?

    I faced problem when i was applying padding and border-radius to the image. it was not getting applied evenly, I troubleshooted problem by removing single css propery separately. I solved this by creating a wrapper div and applied padding to the div instead of image.

    Responsive static page

    1
    EL harabiy•250
    @Mubarak-AdeyemiPosted 3 months ago

    Good job, Buddy!

    1
  • Felipe de Souza Casale•20
    @Felipe020507Submitted 3 months ago
    What challenges did you encounter, and how did you overcome them?

    The challenge for me was to define the size, without reducing the content that was inside. And in the mobile part I think I didn't understand very well

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

    In the mobile part, I lost one to assemble

    Social links profile page using html and css

    1
    EL harabiy•250
    @Mubarak-AdeyemiPosted 3 months ago

    You can read more on responsiveness (@media screen) at MDN web docs, there you will find examples that could put you through.

    0