Skip to content
OverviewSolutions
23
Comments
5

Jordan Herrera Vera

@jordanheveMéxico490 points

Hi I'm Jordan Herrera, an enthusiastic student pursuing a degree in Software Design Engineering, with a previous background as a graduate psychologist. I've immersed myself in the world of Frontend development. My focus revolves around merging aesthetics and usability in my projects.

I’m currently learning...

🖥️Laravel, 🍃MongoDB, ⚛️React, 🧰 TypeScript

Latest solutions

View more solutions

Latest comments

  • Jordan Herrera Vera•490
    @jordanheve

    Congratulations on completing the challenge! Your commitment to learning is commendable. Regarding centering elements within a document, I recommend using CSS properties like 'margin: auto' for block-level elements or 'text-align: center' for inline elements. Experimenting with flexbox or grid layouts can also provide more advanced centering options based on your specific requirements. You can center elements using flex like this

    .container {
  display: flex;
  justify-content: center; /* Center horizontally *
  align-items: center;  /* Center vertically */
  min-height: 100vh;/* Full viewport height */
}

    Each element inside the .container will be centered. Keep up the fantastic work in your coding endeavors! . Keep coding and exploring new ways to enhance your skills

    Marked as helpful
  • Jordan Herrera Vera•490
    @jordanheve

    Hi great job completing this challenge, to add shadows in CSS, you can use the box-shadow property. The box-shadow property allows you to create shadows around an element. box-shadow: horizontal-offset vertical-offset blur-radius spread-radius color;

    Here's an example:

    .main-element {
box-shadow: 5px 5px 10px #888888;
}
  • Jordan Herrera Vera•490
    @jordanheve

    Hi! I would recommend moving the .thankyou div inside the main element and wrapping the form in another div element to center the main content. Usually, I do this on the body:

    body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}

    The min-height value tells the browser to use 100% of the screen height. By default, it uses 100% of the width but not the height. So, by doing this, you can now center the main container.

    I hope my comment is being helpful to solve your problem Keep coding! :D

    Marked as helpful
  • Jordan Herrera Vera•490
    @jordanheve

    I would recommend using REM or EM units instead percentage units for example:

    main {
  padding: 2rem;
  margin: 1rem;
}

h2 {
  margin-left: .5rem;
  margin-right: 5rem
}

    I usually use percentages to manage the width or height on some divs or buttons hope I've helped :)

  • Jordan Herrera Vera•490
    @jordanheve

    On the css document I would use the * selector to remove margin and padding, instead typing most tag selectors like this:

    * {
margin: 0;
padding: 0;
}
    Marked as helpful