Skip to content
OverviewSolutions
3
Comments
3
P

joaoc-dev

@joaoc-dev50 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

Latest comments

  • P
    joaoc-dev•50
    @joaoc-dev

    I like how you used variables, and overall structure.

    I would fix some spacing in the card.

    If you want to center it vertically make sure you make your grid container (body) occupy the full vertical height, in your css:

    body {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  display: grid;
  background-color: var(--off-black);
  place-content: center;
  height: 100vh;
}
  • P
    joaoc-dev•50
    @joaoc-dev

    Hey!

    Great work, I really like your twist on the hover and how you used the drop shadow as an animation.

  • Sreejith c s•20
    @sreejithcs007
    What are you most proud of, and what would you do differently next time?

    I'm proud of how clean and responsive the layout turned out using only HTML and CSS. I managed to center the card perfectly on the page using Flexbox and styled the elements to match the design spec closely. I also maintained a clean, organized structure in my code with meaningful class names and a mobile-first approach.

    This project helped me get more comfortable with layout techniques and responsive design.

    I'd also consider implementing dark mode support or adding a small animation to make the UI feel more interactive.

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

    At first, centering the card both vertically and horizontally was tricky. I tried using margins but it didn’t work consistently across screen sizes. ✅ Solution: I used Flexbox on the body to center the .inner_container perfectly, even on small screens.

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

    I’d love feedback on whether my CSS structure and class naming follow best practices. Are there ways I can make my styles more modular or maintainable?

    While the layout looks good on mobile and desktop, I’d appreciate suggestions on how I could make the design even more responsive, or if there are better techniques I could use.

    Centered card layout using Flexbox

    3
    P
    joaoc-dev•50
    @joaoc-dev

    Great work!

    I would look into semantic html as a way to possibly improve your html structure: HTML Semantic Elements

    I would also avoid generic css class names like .para_1 and .para_2

    Regarding naming conventions, you can look into BEM for future more complex projects: CSS BEM methodology

    Marked as helpful