Skip to content
OverviewSolutions
25
Comments
110

JuvoGenesis👾

@AkoToSiJeromeEhPhilippines2,010 points

Hi ! everyone its me Jerome but you can call me jeje im currently 4th year student pursuing information technology major in web development and im truly passionate creating web interfaces that's why 2 years from now i still practicing my frontend skill since learning is fun. Conquer FM Challenge😈

I’m currently learning...

Testing Tools

Latest solutions

View more solutions

Latest comments

  • JuvoGenesis👾•2,010
    @AkoToSiJeromeEh

    Hey ! Great work out there i just notice that the Social Links Profile Main not vertically align on middle , in order to align it you can use display properties like flex or grid that i see you used with properties like justify-items by applying it on the .card the component will be vertically align same as the original design has also to align the card vertically on middle just add 'display: grid;' on the body properties since you are using align-content: center; justify-items: center; . that's all happy coding !!

    body {
  align-content: center;
  justify-items: center;
  height: 100vh;
  font-family: var(--font-family);
  display: grid;
}

    .card {
  justify-items: center;
  border-radius: var(--border-radius-medium);
  padding: var(--spacing-extra-large);
  width: var(--card-width-medium);
  display: grid;
}
    Marked as helpful
  • JuvoGenesis👾•2,010
    @AkoToSiJeromeEh

    Hey ! Great work out there i just notice that the testimonial component is not vertically align on middle , in order to align it you can use display properties like flex or grid that i see you used with properties like ** place-content** and height by applying it on the body* the component will be vertically align same as the original design has. that's all happy coding !!

    you can see the difference when you inspect and zoom-out

    body {
  background-color: var(--Light-grayish-blue);
  padding: 2rem;
  font-family: var(--Font-family-barlow);
  min-height: 100vh; // add this
  display: grid; // add this
  place-content: center; // add this
}
    Marked as helpful
  • P
    Paul Olynek•330
    @ePaulo
    What are you most proud of, and what would you do differently next time?

    It was nice to keep the size of the @media styling to a minimum. Made my first attempt at creating a README file and need to learn more about what info to add.

    Desktop-first with media query for mobile styles

    1
    JuvoGenesis👾•2,010
    @AkoToSiJeromeEh

    Hey ! Great work out there i just notice that the background-color is not occupy the entire screen , i recommend that instead of adding it on the container you can add it on the body so it will occupy the entire screen whether it small screen or wide screen. that's all happy coding !!

    body {
  color: black;
  font-family: Figtree, sans-serif;
  font-size: 1.6rem;
  background-color: var(--primary-color-yellow); // add this
}
    Marked as helpful
  • surpoxia•120
    @surpoxia
    What are you most proud of, and what would you do differently next time?

    I think when it comes to the MockUp, I am pretty close.

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

    My biggest problem was the responsiveness. My site now works as was demanded, but I wish it would behave more fluidly and organically when you resize it. I know it is possible even without a Media Query and by just using the grid layout alone, to make the grid just change its layout as you resize the page.

    Right now my CSS is a bit of a mess, because of all the adjustments I needed to apply to the Media Query for the mobile version of the page. And when you resize it, it just snaps into into its nerw layout. I wish it would do it more smoothly.

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

    Maybe someone could explain to mehow to make the grid grow and shrink and change it's layout when resizing the page more smoothly, when you start out with a complicated layout like in this challenge.

    Four Card Feature Section (Resaponsive)

    1
    JuvoGenesis👾•2,010
    @AkoToSiJeromeEh

    Hey ! Great Work out there i just notice that the four card component is does not vertically align on the middle ( you can notice it by zooming out the web page ) you are correct through the usage of flex with the properties of justify in order to center the component but the reason why its not vertically align is because there are no height it is very important whether you want to center something. by adding this on the body you can achieve to vertically align the component . that's all happy coding !!

    body {
  display: flex; // add this
  flex-direction: column;
  justify-content: center; // add this
  margin: 0 auto; //remove this since you are using flex properties
  background-color: var(--Very_Light_Gray);
  align-items: center; // add this
  min-height: 100vh;// add this
}
    Marked as helpful
  • Shabrina Putri•150
    @shabrina12
    What challenges did you encounter, and how did you overcome them?

    I came across a challenge when i tried to retrieve the email value that the user entered on the home page and display the email to the success page, then i found a solution which is to use useSearchParams(). Later, I got an error saying "useSearchParams() must be wrapped in a Suspense boundary" when trying to deploy on vercel. I found a solution in https://stackoverflow.com/questions/78439067/how-do-you-get-rid-of-usesearchparams-and-suspense-deployment-error

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

    Is it possible to enable the "valid email required" error message only after the user clicks on the input instead of appearing from the beginning when the page is displayed?

    Responsive Newsletter sign-up form with success message

    #next
    1
    JuvoGenesis👾•2,010
    @AkoToSiJeromeEh

    Hey Great work out there ! i just notice that the newsletter component does not vertically align on middle . you are correct through the usage of flex and align-items but there are missing property that is justify by adding this on main element the component will be horizontally and vertically align on middle.

    instead of justify-between change to justify-center

    <main class="
font-roboto 
flex 
xs:bg-white m
d:bg-dark-grey 
min-h-screen 
flex-col
items-center 
**justify-center**   
md:p-24" >

</main>

    and regarding to the email validation you can check if the user are focus on input field and also if there inputting is wrong you can show the error message and hide it by default

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

    I am not satisfied with the color of the image. Despite my research, I haven't found how to do it, it's not like the design image.

    Solution for a simple page using HTML and CSS

    1
    JuvoGenesis👾•2,010
    @AkoToSiJeromeEh

    Hey ! Great work out there i just notice that you are using filter property in order to match the color overlay of the original design has , i suggest that instead of using filter since you have bg-color in the img container you can use css property which is mix-blend-mode by applying this in the img element you can achieve the same color overlay of the original design. that's all happy coding!!!

    img {
  height: 100%;
  filter: opacity(40%); // remove this
  mix-blend-mode: multiply; // add this 
  opacity: 0.7; // you can add this and adjust 
}
    Marked as helpful
View more comments