Skip to content
OverviewSolutions
12
Comments
12
Keiner Mendoza
@keinermendoza

All comments

  • Dimitrios Dristellas•590
    @dimitrisdrSubmitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    I am very proud from bringing this project as close as the original design.

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

    The layout when i am resising to different screen sizes. I used grid template areas for this purpose

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

    Holding the content design to specific width while maintaining the background images to 100vw is something that I got struggled with. I wrapped specific areas with div.wraper in order to achieve this. I wonder if there were shortcuts to this.

    Loopstudios landing page

    1
    Keiner Mendoza•240
    @keinermendozaPosted 2 months ago

    Congratulations! It's quite impressive that you did it without using JavaScript. Is this a mobile-fist or desktop-first approach? maybe you could add some extra padding to the hero-section__main-content.

    Marked as helpful
    0
  • Keiner Mendoza•240
    @keinermendozaPosted 2 months ago

    Congratulations, your solution is well-designed and very close to the original. The only suggestion I would make is that the eye SVG shouldn't be affected by the opacity effect.

    0
  • Keiner Mendoza•240
    @keinermendozaPosted 3 months ago

    Congratulations, it looks and works great. Just check the solution on screens smaller than 375px; it seems to be overflowing.

    Marked as helpful
    1
  • Giftyaning•90
    @GiftyaningSubmitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    I am most proud of successfully implementing a responsive design that provides a seamless user experience across both desktop and mobile devices.

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

    One of the primary challenges was ensuring that the component was fully responsive and looked good on both desktop and mobile screens.

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

    N/A

    Article-preview-component

    1
    Keiner Mendoza•240
    @keinermendozaPosted 3 months ago

    I am happy that you are improving your skills. That being said, this challenge is not yet completed. I know that sometimes it can be difficult to achieve certain features in the design, but please consider solving the following problems:

    • The font is missing. Consider using the Google Fonts CDN; they actually provided a link to the font you should use in the style guide.
    • The design is not fully responsive. Between 770px and 1230px, the design is overflowing. Avoid setting width and height at the same time in the container; when you change the screen size, the content doesn't have enough room to expand. I recommend using the Responsively App to check the design on multiple devices at the same time.
    • On small devices, the author info section is missing.
    • Try to achieve the share tooltip functionality using JavaScript instead of hover.
    • The background doesn't match the design.
    • The card color doesn't match the design.
    • Check the border-radius on the image corners

    I think that one of the most difficult tasks for us as developers is to give and receive feedback. I wish you good luck on your coding journey, and I hope you have found this comment useful.

    Marked as helpful
    0
  • Pattaraporn Tulathum•200
    @rainofSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I am most proud of my ability to learn and practice various techniques for managing layouts and appearances for different elements. I have gained a deeper understanding of using span and map to adjust items dynamically. Compared to previous lessons, I was able to complete this one much faster due to the lessons I learned previously. Next time, I would plan more efficiently and explore additional techniques to enhance my skills.

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

    One of the main challenges was mastering the use of span and map to manage the layout and appearance of different elements. Initially, it wasn't easy, but through practice and applying what I learned from previous lessons, I could grasp these concepts more quickly. By breaking down the problem and using available resources, I successfully overcame these challenges.

    Testimonial grid selection using React, CSS grid, and Flexbox

    1
    Keiner Mendoza•240
    @keinermendozaPosted 3 months ago

    Congratulations, excellent result. I think it might be useful to consider using the grid-template-areas property for this type of design. Among the material recommended by the platform is this example but MDN has also a very good example

    Marked as helpful
    0
  • Pattaraporn Tulathum•200
    @rainofSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I am most proud of learning how to adjust layouts using Flexbox and CSS Grid. Initially, I was quite confused, and it took some time to understand and visualize the final outcome. Despite the challenges, I am proud of completing something that closely resembles a real-world website. Next time, I would start with simpler examples to build a better foundation before tackling more complex layouts.

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

    The main challenge I encountered was the confusion and difficulty in understanding Flexbox and CSS Grid at the beginning. It took some time to grasp the concepts and imagine the final layout. I overcame these challenges by dedicating extra time to study and practice, which eventually led to a better understanding and successful implementation.

    Four card feature section using React and CSS grid

    1
    Keiner Mendoza•240
    @keinermendozaPosted 3 months ago

    I have to say congratulations 👏👏, you did an excellent job on both mobile and desktop.

    If I have to suggest something for improvement, it would be about the class names that use a combination of numbers. I don't think it scales well. But again, excellent work!

    0
  • Keiner Mendoza•240
    @keinermendozaPosted 3 months ago

    It seems that you accidentally sent the wrong project.

    0
  • Akram Faisal•40
    @KharmannnSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    Able to construct a bit complex design

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

    Styling table element

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

    Recipe page

    1
    Keiner Mendoza•240
    @keinermendozaPosted 3 months ago

    First of all, great job! Your solution looks fantastic on desktop. However, I noticed that this challenge becomes a bit easier if you take a mobile-first approach. I would recommend going in that direction.

    Try to avoid using px and instead, make more use of rem or em units.

    One thing I’ve found useful for giving an element a fixed width on large screens while keeping it responsive on smaller screens is to set both a percentage width and a fixed max-width. For example:

    .card-hero {
    width:100%;
    max-width:20rem;
}

    I hope you found this comment useful, and good luck on your coding journey!

    1
  • Keiner Mendoza•240
    @keinermendozaPosted 3 months ago

    I also thought about using my own information for this challenge. Well done, it's responsive. Maybe you could add some extra padding on desktop screens

    0
  • Carlos Ojeda Avendaño•30
    @Carl-codeSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    I am very happy with the projects that I am delivering, without a doubt each one is going up a level

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

    I found that when placing the images so that everything is focused on the container we must set a size to that container and also to the image itself.

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

    In semantics and the use of CSS with responsive measures to make my projects more adaptable.

    Blog Preview Card using css and html

    2
    Keiner Mendoza•240
    @keinermendozaPosted 3 months ago

    Hola Carlos. You can improve responsive design with just a few small changes. Instead of using fixed pixel widths, consider using percentage widths and setting a max-width to establish a limit, for example in:

    .card-container {
    width: 100%;
    max-width: 327px;
    /* height: 501px; */
}

    then you can leave the image to adapt its container, for example:

    .img-container{
    width: 100%;
    height: auto;
}

    In that case you don't need to use overflow: hidden

    0
  • Keiner Mendoza•240
    @keinermendozaPosted 3 months ago

    Well done! I will copy your idea of setting a variable for the font; I didn’t think of that. The only thing I would change is to use color for the title.

    0
  • Keiner Mendoza•240
    @keinermendozaPosted 11 months ago

    I like it, congratulations

    0