@MarlonMontenegroSubmitted 6 months ago
JuvoGenesis👾
@AkoToSiJeromeEhAll comments
- @AkoToSiJeromeEhPosted 6 months ago
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 helpful1 - @bojanognjenSubmitted 6 months agoWhat are you most proud of, and what would you do differently next time?
For the first time I used Flexbox layout I learned from Kevin Powell courses. Next time I will pay more attention to coding projects then listening to courses.
What challenges did you encounter, and how did you overcome them?I didn't know how to position some cards but then I came across transform function in CSS and this helped me a lot.
What specific areas of your project would you like help with?Does anyone know how to code straight border-top if it has border-radius?
- @ePauloSubmitted 6 months agoWhat 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.
@AkoToSiJeromeEhPosted 6 months agoHey ! 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 helpful0 - @joshibikashSubmitted 6 months ago@AkoToSiJeromeEhPosted 6 months ago
Hey ! Great work out there i just want to share on how to achieve color overlay is you will use a css properties called mix-blend-mode and apply it on img element , also you need to apply bg-color in the img container . by doing and applying those properties you can now achieve the color overlay same as original design has happy coding !!.
.right { width: 100%; height: 100%; overflow: hidden; position: relative; background-color: hsl(277, 64%, 61%); // add this }.right img { width: 100%; height: 100%; object-fit: cover; object-position: center; border-top-right-radius: 10px; border-bottom-right-radius: 10px; mix-blend-mode: multiply; // add this opacity: 0.7; // you can adjust this }Marked as helpful0 - @surpoxiaSubmitted 6 months agoWhat 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.
@AkoToSiJeromeEhPosted 6 months agoHey ! 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 helpful0 - @shabrina12Submitted 6 months agoWhat 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?
@AkoToSiJeromeEhPosted 6 months agoHey 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 helpful0 - @evasa2024Submitted 6 months agoWhat 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.
@AkoToSiJeromeEhPosted 6 months agoHey ! 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 helpful0 - @devmelodySubmitted 6 months agoWhat are you most proud of, and what would you do differently next time?
I am mainly happy that I was able to get my work done on time.
What challenges did you encounter, and how did you overcome them?I had little issues with making my work interactive, although I believe that's sorted now.
What specific areas of your project would you like help with?I believe I'm good at the moment, although if anyone has a differing opinion or tips, please feel free to let me know.
@AkoToSiJeromeEhPosted 6 months agoHey ! Great work out there i just notice that the social links component does not vertically align on center , you are correct by applying display : flex on the body and its related properties but the thing why the justify-content does not work because there are no height applied on body , so by applying height on the body you can achieve properly align the component in center. that's all happy coding !!
body { display: flex; flex-direction: column; align-items: center; justify-content: center; height: calc(100vh-1px); // remove this background-color: hsl(0, 0%, 8%); color: hsl(0, 0%, 100%); margin: 3rem; min-height: 100vh; // add this }Marked as helpful0 - @percydocomoSubmitted 6 months agoWhat are you most proud of, and what would you do differently next time?
Instead of using pixels in sizing, I tried to use rem unit as much as possible this time.
What challenges did you encounter, and how did you overcome them?The design is in dark mode this time which looks cool but when it comes to creating it, it's a bit difficult to see the design in detail. I tried my best to recreate it as close as possible.
What specific areas of your project would you like help with?all feedback is welcome.
@AkoToSiJeromeEhPosted 6 months agoHey ! Great work out there i just notice that you are wrapping content or text in div i just want to suggest to use appropriate elements like h1 tag for the name address tag for the address and p tag for quote , because by doing this your code will become more structured , readable , and also accessible , and that's all happy coding !!
Marked as helpful0 - @CjsrodrigoSubmitted 6 months agoWhat are you most proud of, and what would you do differently next time?
I'm proud of how dealing with a responsive layout wasn't such a hard challenge to deal with. Learning Flexbox and dealing with media queries was such an exciting challenge. On next projects I will try to apply more advanced use of Flexbox. Looking forward for future challenges!
What challenges did you encounter, and how did you overcome them?The main challenge was starting to use em and rem, instead of px and understanding how to make it look good. Also learning why the em/rem properties are the best use for responsive layouts.
What specific areas of your project would you like help with?I'd like to know If spacing between texts look good compared to the original design, wasn't able to make spacing a little smaller. Also a feedback on code quality is always welcome. Thanks.
@AkoToSiJeromeEhPosted 6 months agoHey ! Great work out there i just notice that the product card component does not vertically position on center , you are correct on applying display : flex on body but there are missing properties that is align-items , justify-content and also the most important is height without this we cannot properly align the card component. regarding on space-between on text i see that there are too much of spacing differentiate on original design have and i usually use em on margin and padding while rem is for width and font-size. that's all happy coding !!!
body { display: flex; flex-direction: column; background-color: hsl(30, 38%, 92%); align-items: center; // add this justify-content: center; // add this min-height: 100vh; // add this }0 - @joaomoritaSubmitted 6 months agoWhat are you most proud of, and what would you do differently next time?
I really liked this one, with the figma I could see much better the sizes.
What specific areas of your project would you like help with?If anyone can look at my solution and give me some feedbacks about how I can improve, I appreciate. Thank you!
@AkoToSiJeromeEhPosted 6 months agoHey ! Great work out there i just notice that the h1 element with content HTML & CSS foundations should have a ** hover effect** that will change its color to yellow as well as the container have a hover effect you can see it on active state image on stater files . also i notice that you are using display : flex , i suggest that you can use it on main and section and remove margin on each content instead use gap property since the content have a equal spacing. that's all happy coding !!!
Marked as helpful1 - @General4904Submitted 6 months agoWhat are you most proud of, and what would you do differently next time?
I was able to find solutions to a bug in the code
What challenges did you encounter, and how did you overcome them?Had problems with a section of the CSS styling. I looked the prblem up in a Jennifer Nierdest Robinson book I used to learn
What specific areas of your project would you like help with?Mobile responsiveness
@AkoToSiJeromeEhPosted 6 months agoHey ! Great work out there i just notice that the blog preview card is not vertically position in center , you are correct on using display : flex and its related properties but there are crucial and important css property when you want to position or in your case center a element that is height by adding height in body the card component will vertically align on center. that's all happy coding !!
you can see the difference when you inspect the webpage
body { background-color: hsl(47, 88%, 63%); display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; // add this }0
