Speed of Development
What challenges did you encounter, and how did you overcome them?Finding the matching Px without Figma design
What specific areas of your project would you like help with?improve CSS quality and scalability
Great work. A minor suggestion though, use a semantic approach, change the div with the class main to the tag "main". Also it's better to use p tags for text rather than using a div. Lastly, to centralise your content, use "display: grid" or "display: flex" on the body element and use "align-contents: center", this will centralise your content. Cheers
I had the challenge of transforming the navbar from mobile to web, where I had to search for information online to find a way to apply conditional classes.
Great job, a minor suggestion though, use "display: grid" or "display: flex" on the body element and also add "align-contents: center" to centralise your page content like the given design. Cheers.
I am proud now that i can clearly position elements in a container. my next challenge will be to design another card using js.
What challenges did you encounter, and how did you overcome them?the challenges i encounter are in align the text inside text container.
What specific areas of your project would you like help with?align text vertically.
Nice work, but there are some things you could do to make your work better, I'll suggest you:
At least these should make your content better, cheers.
I am most proud of the fact that I am getting consistent and better at this.
What challenges did you encounter, and how did you overcome them?I encountered challenge with the navbar but I was able to figure it out.
What specific areas of your project would you like help with?None
Good work. I'd suggest using only one ul for your navigation and changing up the display and arrangement for bigger screens using CSS
This is the first time I've included a toast to give a visual indication of form validation.
What specific areas of your project would you like help with?constructive criticism is always welcome
Great work and the animation plus dynamic input validation for the text fields really makes it look smooth
I am most proud of completing the project with pixel-perfect accuracy and fully responsive design, ensuring an excellent user experience across devices. Additionally, I successfully implemented clean, reusable code and followed best practices. Next time, I would focus on optimizing performance further by improving accessibility, reducing asset sizes, and using more advanced CSS techniques like custom properties for better maintainability.
What challenges did you encounter, and how did you overcome them?One of the main challenges was ensuring the design remained fully responsive across all screen sizes. I overcame this by using a mobile-first approach and thoroughly testing with different devices and browsers. Additionally, aligning complex elements to match the design was tricky, but I resolved it by carefully analyzing the layout and using CSS flexbox.
What specific areas of your project would you like help with?Best practices for html and css coding.
For your texts, it's semantically correct to use p tags rather than div tags. I'd advice you change the div tag with the class text-bold and text to a p tag. Cheers
Felt simple to set up and correct issues.
What challenges did you encounter, and how did you overcome them?The background image, will look at others code to figure out how to size it properly.
What specific areas of your project would you like help with?background image
Use the CSS property Background-size: 100% auto
You did a great job
Nice work bud
Integrating JavaScript and :root
What challenges did you encounter, and how did you overcome them?Never figured out what was wrong with the check mark in the success message. If I were to do this project again I would use react and make it a component.
What specific areas of your project would you like help with?I need help with the checkmark, not sure why it worked in the main page but not in the success message.
In mobile, the photo is hidden after you select "dismiss message," never figured out how to correct it for mobile sizes.
Should the success message have been another page that you navigate to or is the way I tried to show and hide elements the best standard approach?
The display on mobile seems to be off
Great job
Nice job
The width of your elements should be a bit smaller to match the design perfectly
you did a really good work, I'm definitely stealing ideas from your project in my next project
Making the image responsive was a challenge. there were three main challenges:-
solutions:-
good work
great job
I used tailwind css for the styling
What challenges did you encounter, and how did you overcome them?I had some challenges validating the form, I was able to find a way around it. But I'd like to know an easier way around the validation
What specific areas of your project would you like help with?The javascript validate, easier and shorter lines of codes.
Something's off with the validation
