Skip to content
OverviewSolutions
9
Comments
3
Santiago
@santiagodev10

All comments

  • James Duntu•30
    @duntu4ever
    What are you most proud of, and what would you do differently next time?

    I'm most proud of building a fully responsive landing page that maintains consistent styling and layout across screen sizes. It was a great opportunity to improve my CSS layout skills using both Flexbox and Grid.

    Next time, I would focus more on accessibility features such as better semantic HTML attributes. I’d also explore optimizing images and adding animations for a more dynamic experience.

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

    One of the biggest challenges was ensuring pixel-perfect responsiveness, especially for the header section and feature cards. I initially struggled with overlapping elements on smaller screens. I overcame this by refining my use of media queries, flex-wrap, and adjusting padding/margins manually.

    Another challenge was hosting on Vercel — my changes weren't showing up at first. I solved this by ensuring I pushed updates to the correct GitHub branch and manually triggered redeploys when necessary.

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

    I’d appreciate feedback on:

    How I can improve the structure and naming of my CSS classes.

    Best practices for image optimization and file size reduction without losing quality.

    Suggestions for improving site performance and accessibility (e.g., using semantic HTML or Lighthouse insights).

    Whether my layout choices could be simplified or made more reusable with utility classes or modern CSS techniques.

    Frontend Mentor Easybank Landing Page Challenge.

    #bem#accessibility
    1
    Santiago•200
    @santiagodev10

    I also completed this challenge and i noticed a few problems with your solution especially with the mobile design, for example the hamburger menu doesn't show the navigation items when you click it (just add a event listener to that element to show/hide the navigation items), some elements shouldn't be there like the button beside the logo. Additionally, in the hero section you didn't place the background image behind the phones, as depicted in the design, you can add it with a background image on the section container. On top of that, the phones image doesn't have too much space due to how big the text of the hero is, which causes the image to shrink, remember that we need to ensure that the website looks great for devices with a screen width of 320px onwards.

    It seems to me that you started off the project doing the desktop design first, i recommend you to always start with the mobile design first, it's easier to scale up to desktop design later instead of doing it the other way around, I also recommend including some default CSS reset styles in the html or body tag, such as margin: 0 and padding: 0, because there is a default margin of 8px from the browser that doesn't match with the design, and finally try to use relative measures like %, rem, vh, vw, because it helps the elements to adapt to different sizes.

  • melanielogan74•140
    @melanielogan74
    What are you most proud of, and what would you do differently next time?

    I felt more comfortable with this challenge using flexbox. Flexbox has been something that has been difficult for me to work with. I also found working with the hover to be easy. The highlight behind the topic title took some time, but I got it.

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

    I'm still not getting the hang of margins. Every time I think I know how they will work, my content does not display as expected. What helps is for me to play around with them using percentages and static values.

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

    Thank you for previewing my attempt at this challenge. I welcome your feedback.

    I had problems trying to center the container on the page. I tried including align-items in .card to center the container horizontally and vertically, but it only centered the text and not the container. Not sure how to fix this so I used the margins with percentages.

    Also, had trouble increasing the height of the card. If I increase the height, all of the child items in the container shift down and leave a space at the top.

    Lastly, if there is any feedback that could help me with isolating/sizing the card image so that it stays in place and does not shift when I'm working with the headings and paragraph.

    Blog Preview Card

    2
    Santiago•200
    @santiagodev10

    Hi Melanie, I think your project is good, but there are some things I noticed that you can improve, which will help you in your next projects:

    • The first thing is that the <main> tag is used as a semantic tag, meaning that the main content of the page goes inside it. Therefore, we should use it as the container for the main elements of our page. You are currently using it as the card itself. A better approach would be to add a <section> or <div> tag inside <main>, and that would be the card, like this:
    <main>
  <section class= "card">
    All the inside elements of the card
  </section>
</main>

    Besides doing it this way being more accurate semantically, you can have better control over the card.

    • The second thing is that you tried to center the container by adding align-items directly in the card, but that will not center the card. It will only center the children of the card, i.e., the elements inside it. To center the card in the document, you need to apply flexbox to the card's parent. In your case, the parent of the card is the <body> tag (that's why I mentioned before how to set the tags hierarchy to do these kinds of things easily). So basically, you need to know that the parent elements can control the position and distribution of their child elements, especially with flexbox and grid.

    • Third, if you want the card to be responsive and expand and adapt itself as the width of the screen gets larger, you can use width: 100% and max-width: 375px. That way, the card will expand until it reaches 375px and then stop.

    • Lastly, media queries are great and very helpful for making responsive designs. However, as you get better and better at CSS, you'll learn that there are many cases where you don't really need them to make something responsive, for example always use relative measures like % if you want an element to adapt with his container, this is important especially with the images, but if you need that the element stays at the same size no matter the size of the screen, then use absolute measures like px.

    I will fork your project and make some of the changes I mentioned. I’ll send you a pull request to see if you like them 😉. Keep learning and practicing!

    Marked as helpful
  • Rachel Pizane•60
    @rachelpizane
    What specific areas of your project would you like help with?

    Hey guys! That was my solution to this challenge. 💜

    It's the first time I've done a project with Javascript and I'm not sure if I used it in the best way.

    I wanted the answer to open without moving up the card every time I open a topic. How could I do this?

    Feel free to comment and suggest improvements 🥰

    FAQ accordion using basic Javascript

    2
    Santiago•200
    @santiagodev10

    Hi Rachel, i like your approach to this challenge, i think you did a fine work, i also did this challenge and i think i can give you some feedback to your question. You are saying that the card is going up when you press the accordion, and after i review your code i notice that you set the height of the body in 100vh, vh is a relative measure, so you need rather to eliminate the height property and leave it with his default value or you can set the height to an absolute measure, for example 140px, that would make that the background image always maintain the same size no matter the screen size, and then when you press again the accordion doesn’t move up the card. By the way, if you also want to move down your card a little bit to separate it from the background image and the top, you can add a margin top in the section tag who has the class "main_card" i hope that help you 😁 i left a pull request with some little fixes in your github.

    Marked as helpful