I think I did a good job with the HTML structure and CSS. I need to improve the javascript part.
What challenges did you encounter, and how did you overcome them?I had difficulty managing the javascript part. I made many attempts before reaching an acceptable result.
What specific areas of your project would you like help with?Streamline the code.
Hello and great job on completing the solution!
A couple things:
Error messages are not as structured for the design and that will have to be fixed through DOM.
Its good you didnt add a fixed height for the main container (div in white background), but as acknowledged the content inside of the div doesnt stretch to the anticipated height. Thus, you will need to adjust the sizing of the content so it fits the screen accordingly.
Adjust the layout for the input div so they are more spaced out and also implement margin for the error messages so they aren't hugging eachother.
Keep Grinding!
I’m proud that I was able to get an approximation of the design. However, in my rush to get started, I jumped into coding. I believe the process would have been smoother if I planned my strategy beforehand.
What challenges did you encounter, and how did you overcome them?It was a little bit tricky getting the alignment between the main content and the attribution, mainly because I didn’t want them stacked directly mid-screen. To solve this issue, I used web.dev as a resource for css alignment.
What specific areas of your project would you like help with?I’m mainly looking for help writing a cleaner solution. I’m open to all feedback.
Great job on your first design. What i would say to fix this is adjusting the width size of the div and making the font size of both of h and p element higher.
Since there is no height on the div, it would automatically increase in vertical size to match the solution as anticipated.
The only thing i can say is maybe adjusting the padding on the right side of the content next to the image.
Great job though! Despite that everything is spot on!
good job on getting this done. You can see that for the two text elements on the bottom, there is less space than how the original design looks like. Perhaps you can use relative units to distribute padding on these individual elements. Or even make a div to keep these elements separated from the image itself.
I hope this helps!
I'm proud of the work I put into project from the HTML to the CSS. I've made improvements in my understanding of Flexbox.
What challenges did you encounter, and how did you overcome them?I've felt challenged to apply what I've learned. I rewrote the code multiple times to simplify it. Each revision seemed improved. I'm working on solidifying the fundamentals.
What specific areas of your project would you like help with?I would appreciate comments on the fundamentals of this project. My design is 'taller' than the solution. Any tips on solving this issue would be greatly appreciated. Thank you.
Hello!
Great job on your project they look nearly identical! Just a couple thing:
Height Differences: The height of the card in the solution is taller compared to the design. You might want to adjust the flexbox properties or set a consistent min-height or max-height to match the design more closely.
Margins and Spacing: The overall spacing, especially around the card, seems different. In the design, there's a more balanced margin between the card and the surrounding container. Double-check the margin and padding values to ensure they reflect the design’s layout.
Element Size and Proportion: The size of the text and the image in the solution appear slightly larger compared to the design. Consider adjusting the font-size and image dimensions to ensure they match the proportions in the design.
The challenge page includes this prompt:
"The font sizes in this project are slightly smaller in the mobile layout. Find a way to reduce font size for smaller screens without using media queries."
But I don't know how to do that.
First off, Great Job! Majority of your design looks pretty identical.
Just a couple of small things:
Make sure to add line-height to the <p> element to align it with the anticipated solution. Also your box shadow should be adjusted so the left and stop borders look the same as the solutions.
If you modify that and it doesnt change much, perhaps look at the border for the card itself and make the px of the solid black border a little smaller. For the card, you can see that you have a lower padding in your card compared to how it should look so change that accordingly. Great job once again and keep grinding!
I'm most proud of successfully integrating SVG backgrounds into the design, learning how to manage their positioning while keeping the card and other elements layered correctly. Additionally, I’m happy with how the responsive layout turned out, ensuring the design works well across different screen sizes.
What challenges did you encounter, and how did you overcome them?Initially, I had challenges with the SVG background and not having it affect the card div storing the rest of the content. To fix this problem, I utilized position:absolute and made the z-index 0 so it doesn't impact the normal flow of the document.
What specific areas of your project would you like help with?If you notice the svg element inside of the card container, the image is not in the correct position where its supposed to be and i didnt know how to fix this and tried various things that correspond with its size and position in the container.
svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
/* card would be on top as the svg is in the background */
}
.hero {
position: relative;
z-index: 1;
border-radius: 20px 20px 0 0;
width: 100%;
height: 220px;
object-position: center;
object-fit: contain;
}
As you can see this is a small error that needs to be fixed and would love all feedback for this design!
After submitting the solution, I noticed that the intended size of the container differs from mine. This discrepancy might be influencing the positioning of the SVG element, preventing it from aligning correctly within the container as shown in the design.
What do you guys think? Please let me know so I can use this feedback in future projects. Thank you :)
Hello!
So a couple things:
Try making the the width of the card that holds all of the content a bit higher so that it stretches to the desired width. Perhaps using a relative unit like %.
For the image, it looks a bit more "smokey" than its supposed to. Try using ::after inside of the image container that holds the image and make it the entire size of the container. Utilize mix-blend-mode and opacity with the soft violet color and it might look a bit better.
The m must be captial to M. and also adjust the p and h element to make it as expected.
Overall, great job! Consistency is everything and you're excelling!
I learned a lot from the past QR-code project so it became easy for me to make this project.
What challenges did you encounter, and how did you overcome them?positioning as always but flex box and grid saves me.
What specific areas of your project would you like help with?anything that can make me a better frontend developer.
This is really good. Maybe minor margin adjustments on <h> and <p>, but pretty spot on! Good Job.
min witdh maybe
What challenges did you encounter, and how did you overcome them?none
What specific areas of your project would you like help with?mexico on top
If you want to get a the --soft-violet color overlay with the black and white picture, try putting the image inside of a div container and use the pseudo element ::after.
You wouldn't want to put content in here but what you can do is make this property fit the entire div container and then use mix-blend-mode, background-color and opacity. Doing this should turn the picture purple.
For next time, try to use a higher % relative unit for the div that holds all content because your design is more square-shaped when it should be a rectangle.
