@OswalldSubmitted 7 days ago
Amit Dhakal
@herojk64All comments
- @herojk64Posted 4 days ago
well you added the hover effect for the three ... icon but forgot to add hover effect for the card itself.
0 - @xStephxSubmitted 4 days ago@herojk64Posted 4 days ago
Other things I won't be pointing out but the bg color of the card is white and is not the case in the styling .
Marked as helpful1 - @Notyan21Submitted 26 days agoWhat are you most proud of, and what would you do differently next time?
feedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedback
What challenges did you encounter, and how did you overcome them?feedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedback
What specific areas of your project would you like help with?feedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedbackfeedback
@herojk64Posted 7 days agoOk brother, your concepts and all the above is logically flawed.
-
when your using input why are your putting its label into div and then p tag. it was one thing if you wanted the error message to display side by side for that div I could understand but not using label separates user from that default functionality where input gets selected or focused just by clicking that email label.
-
why are did you add event listener in email input as "input". this will constantly keep checking and take resource from client side. like imagine user mistaken their email or forgot their email and they trying to type it out as it goes. each step he's Gona get stuck and you would be constantly checking if its an valid email or not. one this is going to stress the user out. second not practical if you want that kind of thing you can just say input type email and with required should be enough and you can just check or validate it after the form submitting.
-
if you haven't noticed if you type in wrong email and like kind of reset the email which will bring it back to normal no error state. your input styling is gone.
-
too much extra properties like your wrapper for card component has h-full which is not going to help you nor it is being applied.
-
use practice of using min-h-screen not h-screen cause if your working on larger page container your h-screen is going to give you trouble. look it up why it gives you trouble later.
-
first section if you were going to use article tag why is header not inside the article.
-
why are you compiling the tailwind to style.css use postcss or mixer or any compiler to directly compile it and after the compile process or build process minifying into one dist folder and such. this structure is used by many library and framworks.
Marked as helpful0 -
- @tloyanSubmitted 15 days ago@herojk64Posted 9 days ago
very nice indeed but dont use pixels as a value your website will be messed up if someone has their browser font size to more then 16px or less then 16px it wont work
0 - @xStephxSubmitted 12 days ago@herojk64Posted 11 days ago
good designing but bad structure for the form. first your tailwind configuration your loading though the CDN which is optional but learn to use node js and how to make your JavaScript more modular. Second you are listening to button click which is basically not ideal because the form is still submittable. what you want to do is include button inside the form and make the button type of submit and when you use JavaScript you listen to that form submit. advantages are you can get the values that are submitted through it without using any extra id for the input cause you only have one right now but in future if you have to work with many forms its a bad example. and instead of using two img with different screen break classes use picture will also default control that but its optional. happy coding.
Marked as helpful3 - @VSKarthikTSubmitted 15 days agoWhat are you most proud of, and what would you do differently next time?
This project I am proud of using grid to make elements stay in the respective areas and stretch them to it full width and height in the container
What challenges did you encounter, and how did you overcome them?I had difficulty with aligning items of the grid in desktop layout, I have read article about grid layout which made it easy for me to align items and gave me much deeper understanding of grid layouts
What specific areas of your project would you like help with?I would like help with reducing CSS code, how can I optimize the code, I am not sure I have use correct semantic HTML, any feedback is appreciated, Thanks
@herojk64Posted 15 days agoOk, if you want to reduce CSS the very first concept is to make as minimal html as possible. if you see your html there are few things I saw. why aren't you dividing your sections with section tag rather than div. you are just using section as main component which is nested in the main. I also don't see any header tag or h1,h2,etc. you see with the content you can separate the headers based on the title looking content. also article tags are best for that if you want to do better SEO. Anyway mixin in SCSS was a great find for me took me seconds to understand but didn't knew it was a thing in SCSS so thanks for that.
Marked as helpful1 - @Fable54321Submitted 18 days agoWhat are you most proud of, and what would you do differently next time?
I woudl take a different approach for the share section on mobile.
@herojk64Posted 16 days agoGetting access to the Figma file you should get margin, padding, line height, etc. exactly matching. so that would be your improvement.
Marked as helpful1 - @tloyanSubmitted 22 days agoWhat are you most proud of, and what would you do differently next time?
I could further separate the different parts of the code and rethink how to handle the variations between each, while using the same component with dynamic data. Definitely on my refactor list!
@herojk64Posted 17 days agoWell good structure but since you're using Figma I think it should be more accurate according to the design all the spacing and such.
0 - @Roman-oryolSubmitted 27 days ago@herojk64Posted 19 days ago
very nice and good layout but as I guess you're using Figma your typography is a miss. you might want to see alignment of two texts and font sizes.
0 - @ManojSinghDashauniSubmitted 19 days ago@herojk64Posted 19 days ago
Things you should learn.
- Typography
- Grid and Flex box
- Border-radius for round corners
- follow the design at least make it look like it
- use fonts that are descried in StyleGuide
Marked as helpful0 - @besopmacSubmitted 26 days agoWhat are you most proud of, and what would you do differently next time?
This is the initial page to kickstart the project. I chose to build it using React, TypeScript, and TailwindCSS to establish a solid foundation for future expansion. My plan is to develop a simple Recipe API (or potentially integrate an existing one) and gradually add more advanced components as the project evolves.
What challenges did you encounter, and how did you overcome them?I struggled with applying Tailwind classes to lists. I’m sure there’s a way to style unordered and ordered lists to match the design in Figma.
@herojk64Posted 21 days agoYou got figma access, here are the things you need to consider about.
- You can look at height of the card component and if you want exact matching you can just hard code it same with the width.
- figma comes with line spaces like line heights and such so you can just match it with the figma.
- you can look how much spacing is used between the images and headers and such you can set margin to perfectly act that way.
- your bullets are inside which is not matching with the outside. if your using tailwind there is class for this like list-outside or list-inside. and then you can do marker:text-color for the bullet coloring
- your table value or table data colors hasn't been set.
Marked as helpful1 - @aredeanSubmitted 24 days agoWhat are you most proud of, and what would you do differently next time?
II am quite proud to be able to create a pixel-perfect design again with just the design image and specifications without the Figma project file.
What challenges did you encounter, and how did you overcome them?I didn't use the Figma design file this time because I ran out of tokens/credits, but I still wanted to build a pixel-perfect design. Finally, I re-checked the design size in Figma by uploading the design image (Fortunately, the design still saved the correct resolution of 1440x960). It is possible to do this if necessary because it is likely that in the future, there will also be work that is not made with Figma files.
@herojk64Posted 22 days agoPerfect spacing and stuffs. I don't know if you did it using figma or calculating it using image but you might want to care about spacing a bit.
0
