Skip to content
OverviewSolutions
5
Comments
17
hamza
@Hamzaouladev

All comments

  • Hola-Code001•110
    @Hola-Code001Submitted over 1 year ago

    This is an interactive rating component made with html, css, and javascript let me know what you think about this and if there is anyway to make improvement on this project. Thanks

    interactive-rating component

    2
    hamza•390
    @HamzaouladevPosted over 1 year ago

    hello @Hola-Code001, here's some feedback regarding your layout i hope you find interesting:

    • it's usually a bad idea to give your component a fixed height, your component should dynamically handle any large amount of content in any screen width without running into overflowing issues, its best to leave the height to a default auto.
    • a cool, simple way to handle spacing without worrying about unpredicted flexbox behavior is called The lobotomized owl selector, i invite you to check it out!

    i hope you found my feedback helpful, keep hacking!

    Marked as helpful
    0
  • JGdmd•50
    @JGdmdSubmitted over 1 year ago

    It's my first project on FrontEnd Mentor and i'm student in Web Developpement.

    When you write "Mobile First", what is exactly the good process in css ?

    On my Javascript file, I think the Event Listener can / must be refactoring.

    Advice Generator App

    1
    hamza•390
    @HamzaouladevPosted over 1 year ago

    hello @JGdmd, here's some layout tips that i think you may find interesting:

    • by adding the following code to your component you'll achieve responsiveness without needing to use media queries:
    .card {
   width: 90%;
   max-width: 500px;
    • also it's not a good idea to give your component a fixed height, you should let the content of your component determine its height or you'll run into overflowing issues
    • it's a good hack is use the following code when you're starting a project to ensure your images wont behaave in a wy that will breaaak your layout:
    img,
picture {
  max-width: 100%;
  display: block;
}

    hope you found my feedback interesting, keep hacking!

    Marked as helpful
    0
  • hamza•390
    @HamzaouladevPosted over 1 year ago

    hello @victoriamnx, great job finishing this project, i have some feedback i hope you find interesting:

    • it's better to let the container determine the width of your component, not the content, and vise versa when it comes to height.. so i suggest you remove the width from your image element and add it to your container element, the way i suggest you do it is to give it a relative width and a fixed max-width for responsiveness just like this:
    .box {
   width: 90%;
   max-width: 22.5rem;
}
    • also a good hack when starting projects is to add the following code to your images tags to prevent unwanted behavior:
    img,
picture {
  max-width: 100%;
  display: block;
}

    i hope you found my feedback helpful, keep going!

    Marked as helpful
    0
  • hamza•390
    @HamzaouladevPosted over 1 year ago

    hello @maiconrmonteiro, here's some feedback regarding your layout i hope you find interesting:

    -in order to keep your code DRY, i suggest you dont rewrite max-width in your media query, instead just use the following code:

    section {
width: 90%;
max-width: 540px;
}

    also i suggest you add this code for more responsive images:

    picture, 
img {
   display: block;
   max-width: 100%;
}

    -you should also wrap your component in a <main> tag and use more semantics html5 tags in general.

    hope you found my feedback helpful, happy hacking!

    Marked as helpful
    0
  • Omer Ben Yosef•30
    @omerby12Submitted over 1 year ago

    Hello everyone! This is my solution for interactive-rating-component challenge.

    I have used React.js for this project, I built two components, one for the form itself, and the other one for the thank you state (one before the submission,one for the "Thank you" Message).

    For this purpose, I have used useState in addition to passing props from parent to child, I have used ChatGPT for bugs during the development and ideas on how to implement the project.

    Any feedback is appreciated :-)

    Interactive rating component

    1
    hamza•390
    @HamzaouladevPosted over 1 year ago

    hello @comebackist, heres some feedback on the layout that you may fin interesting..

    you dont have to repeat max-width in multiple places, you can give your component a relative width and a fixed max-width without repeating the code in a media query:

    .card {
   width: 90%;
   max-width: 41.2rem;
}

    -when you gave the body a display of flex and flex-direction: center;, you flipped the flex axis so the code which does the vertical centering is justify-content: center; so you should remove the align-content property because it will break your layout in this case, because the height is relative, use margin: 0 auto; instead.

    -my suggesting for the buttons is to give their parent a flex-wrap: wrap; and a gap: 1rem; so the children can have more room and maintain their dimensions in small screens

    i hope you found my feedback helpful, keep hacking!

    Marked as helpful
    0
  • Siani•30
    @sianidanSubmitted over 1 year ago

    I'm still practicing JavaScript, so any suggestions on how my code could be improved is appreciated. At first, I made my submit button type="submit", but since the default behavior makes the page reload, I changed it to type="button". Would preventing the default behavior work well here or should that be avoided?

    Responsive Rating Component with Flexbox

    2
    hamza•390
    @HamzaouladevPosted over 1 year ago

    hello @sianidan, great job finishing this project!

    i have some suggestions that you may find interesting:

    the styling of your component looks great, however it may break if the content inside were to change, the reason is that fixed heights make the components prone to overflowing issues.

    my suggestion is to remove the height from the container, and to manage spacing you can add the gap property to your flex parent: .card { gap: 2rem; }

    i hope you find my suggestions helpful, Happy Hacking

    Marked as helpful
    1
  • hamza•390
    @HamzaouladevPosted over 1 year ago

    hello @iago-monteirog, heres some suggestions regarding your layout:

    -in terms of width you can make your components fully responsive using only two lines of code and no media queries, you can use the following hack:

    .container {
   width: 90%;
   max-width: 600px;
}

    -the image in the header should have the width: 100%; also here object-fit: cover; is a good use case.

    -i invite you to read up on the <picture> element as this is a good use case for it instead of the image tag, heres a helpful article: The picture element

    i hope you found my suggestions helpful!

    Marked as helpful
    0
  • Bianca•40
    @biancamarqueziSubmitted over 1 year ago

    hi everyone,

    this was my first project using an API. I struggled a bit at first, but it seems to be working fine.

    if you have any feedback, let me know :)

    advice generator app using api

    2
    hamza•390
    @HamzaouladevPosted over 1 year ago

    Hello Bianca, i have some feedback regarding your layout that you may find interesting:

    -usually its not a good idea to give your components a fixed height, because then the component wont be able to dynamically adjust to large amounts of contents or small screens and you may run into overflowing issues, its best to let your component's height be determined by its content.

    -in terms of width you can make your components fully responsive using only two lines of code and no media queries, you can use the following hack:

    main {
   width: 90%;
   max-width: 560px;
}

    -my suggestion for managing spacing is to use a simple technique called The lobotomized owl selector

    -and i would also sugegst using absolute positioning for the button, so it wont be relied on its siblings for its position.

    i hope you found my feedddback helpful, Happy Hacking

    Marked as helpful
    0
  • hamza•390
    @HamzaouladevPosted over 1 year ago

    hello @AnaLuisaFav, here are some suggestions i hope you'll find helpful

    -its almost always better not to give your components a fixed height, because youll end up with content overflowing in small screens, its better to remove the height from the container class.

    -in the footer, id suggest using flexbox here for managing the layout with a gap spacing instead of the span padding:

    .final {
    display: flex;
    align-items: center;
    gap: 1rem;
}

    -also id recommend using more semantic html tags in your code, and providing alt values for images when needed, i invite you to read up on these topics here: Semantic HTML5 Elements Explained What is Alt Text?

    hope you found my feedback helpful, keep hacking!

    Marked as helpful
    1
  • hamza•390
    @HamzaouladevPosted over 1 year ago

    Hello @Sarah-24, here is some feedback to improve your layout:

    -a good hack for responsiveness here is to give your component a relative width: width: 90%; and a max fixed width like: max-width: 300px; and for centering you can use margin: 0 auto;

    -a good rule for images is to use this code to make sure they wont overflow or break layouts:

    img,
picture {
  max-width: 100%;
  display: block;
}

    -also you can use some padding for the main component to give the image some space arround the edges

    hope you find this feedback helpful, happy hacking!

    0
  • hamza•390
    @HamzaouladevPosted over 1 year ago

    hello @partum! this project is long and challenging but youre doing great! just keep going at it by breaking it down into smaller problems and fixing those one at the time, dont worry about time for now and use this as practice for the multitude of problems that youll have to solve daily as a developer .

    heres some feedback i think youll find interesting:

    -in the FAQ section there are built in html tags that will save you the trouble of creating the accordion functionality: <details> and <summary>, you just need to style them.. read this documentation for more info.

    -i would really recommend writing vanilla css and not relying on utility class based approach or any css framework until you have a solid understanding of css architecture.

    -in your container tags make sure to add a relative width: width: 90%; for example on top of the max-width, its a simple but really effective hack for responsiveness

    -another simple hack with images is to add the following code so they wont overflow:

    img,
picture {
  max-width: 100%;
  display: block;
}

    -also dont forget about adding an alt description to your images as it is very important for your site's accesibility.

    i hope you find my feedback helpful, KEEP HACKING!

    1
  • Anna P. M.•390
    @annapmarinSubmitted over 1 year ago

    This is my solution for this challenge 💫👩🏻‍💻

    Built with React

    Any suggestions on how I can improve and/or reduce unnecessary code are welcome!

    Thank you! 🙏🏻

    Advice Generator App

    1
    hamza•390
    @HamzaouladevPosted over 1 year ago

    hello @annapmarin! heres some layout tips that you may find interesting:

    -instead of giving the main component a fixed width in multiple break points, a simple but effective hack would be to give it a relative width: width: 90%; and a fixed max width like: max-width: 700px; these two lines will result in responsiveness plus smoother transitions between all break points without using media queries.

    -usually its not a good idea to give your component a fixed height, because it wont be able to adjust dynamically to large amounts of content and you may run into overflowing issues, its better to manage spacing using other methods, here's a something you can try: The lobotomized owl selector

    I hope you found my feedback useful, happy hacking!

    Marked as helpful
    0