Skip to content
OverviewSolutions
17
Comments
13

Hicham Abderrahim

@hichamweblog280 points

Web developer & lifelong learner

Latest solutions

View more solutions

Latest comments

  • Hicham Abderrahim•280
    @hichamweblogPosted 4 months ago

    Great job on the project! Keep up the great work!

    0
  • Hicham Abderrahim•280
    @hichamweblogPosted 4 months ago

    Great job on the project! The desktop view looks clean and well-organized. The share button is functioning perfectly, but there's still some work needed on the mobile view.

    0
  • Hicham Abderrahim•280
    @hichamweblogPosted 4 months ago

    Hello, You are doing great. Keep up the great work!

    0
  • FREDERICO GARCIAS ALVES•190
    @FredericoGarciasAlvesSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I am proud to have gone through a process where I am already finding it easier to take on more difficult projects.

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

    This code came entirely from my mind, which is why I had difficulties with typos. It's not something specific to this project; it can happen in others (though I hope it happens less or not at all). That was the challenge I faced in this project. In JavaScript, I had trouble with the if statements in the first function because I wanted to stop a function with return to execute the correct one, but if return is triggered, the function stops, and there’s more code below for responsiveness. I solved it by adding two conditions in the if for the invalid email message due to the lack of @.

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

    I was thinking that these if statements could be done with a switch, but I considered the syntax, and it doesn’t work. So, I believe these if statements can’t be made more concise. As for the window.mediaMatch, I placed it inside the function, but I think keeping it separate might be a good idea!

    Flexbox, inclues, thuthy, new fromData, if

    1
    Hicham Abderrahim•280
    @hichamweblogPosted 4 months ago

    Great job tackling this challenge! 🎉

    Here are some tips to improve it:

    • Test the webpage on various devices and screen sizes to ensure proper responsiveness.

    • Avoid using:

    body {
  height: 100vh;
}

    Instead, use:

        body {
      min-height: 100vh;
    }
    • Try to minimize using fixed widths or heights to maintain flexibility.

    Keep up the great work!

    0
  • Hicham Abderrahim•280
    @hichamweblogPosted 10 months ago

    Hi there,

    Here are some thoughts on your project:

    • Positives:

      • Design Consistency.

      • Responsive Design(Good use of media queries for responsiveness)

      • Effective use of CSS variables

    • Suggestions for Improvement:

      • Try to Refactor the CSS to remove redundancies and improve efficiency.

      • Consider adding a background color to the page.

      • If you want to make three equal columns in the header-content on bigger screens, you can add the following flexbox rule:

    @media screen and (min-width: 1440px) {
.header-content>* {
        flex: 1 1 100%;
}
}

    Overall, you've done a fantastic job with the project. Keep up the great work!

    0
  • Hicham Abderrahim•280
    @hichamweblogPosted 10 months ago

    Hello,

    Good job tackling this challenge, but your solution is not responsive for several reasons:

    • Fixed Dimensions: The .group class uses fixed widths and heights (25rem for columns, 15rem for rows), limiting adaptability to various screen sizes. Additionally, fixed heights for elements (257px) restrict responsiveness.

    • Inflexible Grid Layout: The primary layout relies on a grid with fixed dimensions and lacks intermediate breakpoints. The grid does not adjust for different screen sizes, resulting in poor adaptability.

    • Testing on Devices: Make sure to test the layout on different devices and orientations to ensure expected behavior, utilizing tools like Chrome DevTools for simulation.

    Keep up the good work!

    Marked as helpful
    0
View more comments