I'm trying to improve my documentation skills, so if you could read my README and propose improvements, I'd certainly appreciate it. 👍
I am most proud of implementing a responsive design and effective form validation for the newsletter sign-up form. Next time, I would enhance user experience with animations and transitions, and explore more advanced form validation techniques.
What challenges did you encounter, and how did you overcome them?I encountered challenges with form validation and ensuring a responsive layout. I overcame them by using regular expressions for accurate email validation and employing CSS Flexbox and media queries to adapt the design to different screen sizes.
What specific areas of your project would you like help with?I would like help with optimizing the form validation logic to handle edge cases more effectively and improving the overall user experience with smoother animations and transitions.
It works as it should from what I can see. I did test it out a bit, nicely done!
I'm having trouble with the margins for the profile image. I've made it a block element, which allows me to center it, but then removes the top margin. Any help would be appreciated. Thanks! :)
Try using padding on the .card element instead of margin. But, i think if you add even 1px of padding you should start seeing the margins - this is because of margin collapse / stacking margins.
if im right, check this article for more on stacking margins: FreeCodeCamp
Hope that helps, but good work! Clean code and I like the comments in the css!
Grid-template-areas is very useful for this project.
What challenges did you encounter, and how did you overcome them?Layout because before this project I only use flex.
What specific areas of your project would you like help with?width, padding, margin and relative units
The grid-template-area works so well, it scales down nicely - looks great all the way down to mobile!
Im going to have to try this method as well!
Well done!
Nicely done! All I can comment on is the missing border radius on the image, the top and bottom left borders. You can add it to the image itself:
border-radius: 8px 0 0 8px;
Your code looks good - sizing is slightly different but it works as it should!
The only thing I could say is check out CSS custom properties (variables) might help save some time and make things a bit easier to work along: W3Schools
Also I think adding the height/width to the image itself will stop it from loosing its aspect ratio - sometimes the image container shrinks a bit to fit the image and name in the same line on smaller screens making the image squash a bit and becoming oval.
Nice work!
I'm proud that it works.
What challenges did you encounter, and how did you overcome them?I struggled with positioning the cards but I somehow managed to find a way using flexbox. But I am not totally satisfied with the solution yet because I don't always like the way it responds when resizing the image.
What specific areas of your project would you like help with?Ideas for positioning and responsive design.
I think for positioning at different sizes you kinda need to play around to get it just right.
For this challenge try using flex-direction: column; and justify-content: center; - this will force the 4 cards to split into 3 columns with the 4th card taking up space in the middle/second column. You can then move the cards in the first and third columns down, to get the final look. If that makes sense give it a try it should work without changing any other code.
I like the hover effect with the borders! if you dont want the box to change sizes on hover, you can add transparent left, right and bottom borders at the same thickness, for example:
.box {
border: 2px solid transparent;
border-top: 2px solid black;
}
.box:hover {
border: 2px solid black;
}
making mobile friendly , took help from internet for various methods make image responsive
Nice work, interesting what you did with the image in the HTML! Have a look at the picture element for another way of handling images for different screens: W3Schools
Those buttons look so good, hover state works really well!
(Also like the comments you leave, i need to start doing that more!)
Very good work, spot on! CSS + HTML looks neat!
If you wanna go the extra mile there is a hover state on the card that would make it look even better: Check the drop shadow of the card itself in the provided design files, the shadow grows on hover.
Well done!
I need to improve my CSS.
Your code looks good! Without the actual measurements though, one can only eye-ball it so much.
My best advice for getting the measurements from the provided jpeg designs is to use something like adobe illustrator/photoshop or similar software to get them.
Real nice work! Your HTML and css look so clean! Also like the mobile-first approach - the scaling works really well keep it up!!
For horizontal rules:
hr {
border: none;
border-top: 1px solid var(--color);
}