Skip to content
OverviewSolutions
17
Comments
13
Hicham Abderrahim
@hichamweblog

All comments

  • Hicham Abderrahim•280
    @hichamweblog

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

  • Hicham Abderrahim•280
    @hichamweblog

    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.

  • Hicham Abderrahim•280
    @hichamweblog

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

  • FREDERICO GARCIAS ALVES•330
    @FredericoGarciasAlves
    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
    @hichamweblog

    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!

  • Hicham Abderrahim•280
    @hichamweblog

    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!

  • Hicham Abderrahim•280
    @hichamweblog

    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
  • iamporrrrrrrrr•190
    @iamporrrrrrrrr
    What are you most proud of, and what would you do differently next time?

    None

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

    None

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

    None

    Four Card Feature Section - HTML, CSS

    2
    Hicham Abderrahim•280
    @hichamweblog

    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.
    • Consider using relative units like rems for font sizes and padding to make sure elements scale appropriately on different devices.

    Keep up the good work!

  • Hicham Abderrahim•280
    @hichamweblog

    Great job tackling this challenge! Here are some tips to improve it:

    • Instead of fixed heights, consider using min-heights.
    • Ensure responsiveness in landscape mode.
    • Utilize the picture element with srcset to adapt the image according to media size.
    • For mobile devices, the image should occupy the full width.
    • On desktop, consider reducing the image size to just 50%.

    Keep up the good work!

    Marked as helpful
  • Hicham Abderrahim•280
    @hichamweblog

    Nice effort in tackling this challenge! Here are some suggestions for further improvements:

    • Ensure to include <!DOCTYPE html> at the beginning of your HTML file.
    • Remember to add the alt attribute to your images.
    • Check that your heading elements are ordered sequentially, such as h1, h2, h3, etc.
    • When specifying colors, make sure to prepend "#" to the hexadecimal value, like #F3E5D8.
    • Note that "justify" is not a valid value for justify-content.

    Keep up the good work!

    Marked as helpful
  • Hicham Abderrahim•280
    @hichamweblog

    Great job tackling this challenge!

    Just a quick tip: consider using rem instead of px, and try to update the link to your repository in your solution.

    Keep up the good work!

  • Hicham Abderrahim•280
    @hichamweblog

    Great work on solving this challenge! However, here are some tips to enhance it:

    • Ensure your project is responsive, especially in landscape mode.
    • Instead of using fixed height, consider using min-height.
    • Utilize rem instead of px for better scalability.
    • Incorporate the box-sizing: border-box; rule in your reset to ensure consistent box model behavior.
    • Ensure heading tags are used in sequential order; avoid placing h4 before h1.
    • Utilize Flexbox to easily center the card instead of using positioning. Here's a suggestion:
    display: flex;
align-items: center;
justify-content: center;

    Keep up the good work!

  • Malibongwe•210
    @Mali-bee
    What are you most proud of, and what would you do differently next time?

    This was a nice simple little exercise, perfect for beginners, a great way to het one into front-end website development. Look forward to more challenges.

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

    n/a

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

    n/a

    QR code component - challenge

    1
    Hicham Abderrahim•280
    @hichamweblog
    • Great job on the project! You've certainly put in some solid effort.
    • Consider using min-height instead of a fixed height for better responsiveness.
    • Try using rem units instead of px for improved scalability and accessibility.
    • Avoid giving images fixed widths; use max-width: 100% for images and set a maximum width for their container.
    • Minimize the use of inline CSS styles for better organization and maintainability.
    • Incorporating these suggestions will elevate your project even further! Keep up the good work!
  • Hicham Abderrahim•280
    @hichamweblog

    I learned a lot from your project, especially how you explained your process.

    I'll take another close look at it.

    Just a quick suggestion: there's an overflow issue, you can fix it with

    body{ overflow-x: hidden; }