@mofadaSubmitted 3 months ago
What specific areas of your project would you like help with?
I have a question, when I click, I can't check radio. So I use js to slove this question, what else method to slove this question?
JaceLee
@jaceleedevAll comments
- @jaceleedevPosted 3 months ago
Hey. nice work! The other radio buttons have an input element and a span for the label text inside a single label element. When you click on the label, it automatically checks the radio button, even without needing a 'for' attribute, because the input is directly associated with the label.
However, for the "Custom" option, there are two input elements inside the same label:
- The radio button (input type="radio").
- The number input field (input type="number").
In this case, when you click the label, the browser isn’t sure which input to associate the click with, so the radio button doesn’t get checked by default.
This is just my opinion. I haven't actually tested it. So, enjoy coding!
0 - @javiIT10Submitted 3 months ago@jaceleedevPosted 3 months ago
Hello. Congratulations on completing the challenge! I reviewed your code and could see that you put a lot of thought into making it readable. One thing I'd like to recommend is to use a frontend library or framework for your next challenge. It can reduce the effort needed compared to directly manipulating the DOM and also provide a great opportunity to improve your skills as a developer. Happy coding!
0 - @mofadaSubmitted 3 months agoWhat specific areas of your project would you like help with?
- did here other way to implement?
group-[:invalid:focus-within]:block, I try to writegroup-invalid:focus-within:blockbut it's not working。group-invalid:blockorgroup-invalid:blockIt's not working.- did some method can change marker position? such as
marker:mt-1
@jaceleedevPosted 3 months agoHi, I'm feeling great because I think I successfully completed the project. Your questions led me to discover new things I didn't know before. Unfortunately, your questions are about topics I'm not familiar with either. However, how about trying this approach? (It's just my idea, so there's a good chance it could be wrong.)
<div class="group"> <input class="peer" type="text" required /> <p class="hidden peer-invalid:group-focus-within:block">Error message</p> </div> /* Custom CSS */ .your-class::marker { margin-top: 0.25rem; }Anyway, have a great day and enjoy coding!
0 - @nickabateSubmitted 5 months agoWhat are you most proud of, and what would you do differently next time?
Was able to replicate the page functionality smoothly through modifying state.
What challenges did you encounter, and how did you overcome them?Some issues and a bit of trial and error with the Next Image component, and was unable to change the share icon svg fill color in mobile on active state.
What specific areas of your project would you like help with?Any recommendations on using Next Image component effectively. Thanks!
@jaceleedevPosted 3 months agoHi, you worked hard to complete the challenge! After checking the functionality on your site and reviewing the code, I noticed that the SVG isn't changing properly. To control the SVG as you want, it's better to use the SVG code directly like this:
interface ShareIconProp { fill: string; } function ShareIcon({ fill }: Readonly<ShareIconProp>) { return ( <svg xmlns="http://www.w3.org/2000/svg" width="15" height="13"> <path fill={fill} d="M15 6.495L8.766.014V3.88H7.441C3.33 3.88 0 7.039 0 10.936v2.049l.589-.612C2.59 10.294 5.422 9.11 8.39 9.11h.375v3.867L15 6.495z" /> </svg> ); } export default ShareIcon;In my case, I imported the SVG code directly and used it as a component. For Facebook, Twitter, and Pinterest icons, I didn't need to go this far, but if necessary, I would have created them in a similar way.
Happy coding!
0 - @Bamo-D-AbdallahSubmitted 3 months agoWhat challenges did you encounter, and how did you overcome them?
Loading different
What specific areas of your project would you like help with?background-imagebased on screen size, I used media queries to load each one usingsrc().Overall code feedback is appreciated.
@jaceleedevPosted 3 months agoHello! Great job tackling this challenge. You've put in a lot of effort, and it shows in your work.
Regarding the HTML structure, I have a couple of suggestions to enhance the semantic meaning of your code:
-
Consider using 'section' tags to better organize your content. For example, you could wrap the hero content and the image grid. This will give more structure to your document.
-
It would be beneficial to add 'header' and 'footer' tags. The logo at the top could be wrapped in a 'header', and the final CTA section at the bottom could be placed within a 'footer'.
These changes will not only make your HTML more semantic but also improve accessibility and potentially boost SEO.
Keep up the great work, and happy coding!
0 -
- @jaceleedevSubmitted 3 months agoWhat are you most proud of, and what would you do differently next time?
This was a much more challenging task than I initially anticipated. Each card had slight differences in size, and the first card was completely different. I'm extremely proud that I didn't give up and managed to complete it to the end. Grid is truly amazing, but I think it will take more time to get used to than flexbox. That's why I plan to continue using grid and practice with it in the future.
I've created a separate view for tablets to ensure a natural responsive design, even though it wasn't in the original design specifications. Please come and take a look!
What challenges did you encounter, and how did you overcome them?First, handling the transition from desktop to mobile was incredibly difficult. Since the desktop layout was challenging, I started working on the desktop view first, but I struggled with how to easily handle the responsive layout. The solution was to use the max-sm, max-lg, etc., classes provided by tailwindcss. These classes allow developers using a desktop-first approach to perfectly apply responsive design.
Second, there were too many conditional renderings, which made the code increasingly difficult to read. I was able to solve this using the clsx module. By handling complex logic with functions using clsx, the component became much cleaner.
What specific areas of your project would you like help with?I welcome any tips that you might have gained while working on this project. 😄
@jaceleedevPosted 3 months agoThank you for your feedback. Initially, I did include headings, but I was hesitant in this challenge because I didn't see an appropriate place for an h1 in the sections. However, as you suggested, using a hidden h1 is a great solution. I've updated the project to include h1 through h3.
I didn't remove the first paragraph from the blockquote because it requires some restyling, and it is actually a quote. Since it's not a simple title, I decided to leave it as is. Regarding the quotation marks, I copied them directly from the Figma design to match the style. If this were a professional project, I would request the designer to update the quotation marks.
Thank you for your valuable feedback!
1 - @sidr467Submitted 5 months agoWhat are you most proud of, and what would you do differently next time?
Well I made exactly like design. It end up really great.
What challenges did you encounter, and how did you overcome them?I struggled in section height problem but I left it alone and went ahead with setting up grid and after it end up perfectly as design.
What specific areas of your project would you like help with?I think pretty well first time with styles but still would love to have any feedback.
@jaceleedevPosted 3 months agoHey! As someone who has participated in similar challenges, I understand that this one requires a lot of attention to detail, especially with the grid. I wanted to share some feedback that might seem minor but is actually quite important:
- There's a typo in the <foooter> tag; it should only have two 'o's.
- It's better to place the <footer> tag outside of the <main> tag rather than inside.
- Pay more attention to the alt and title tags for accessibility and better usability.
- Instead of loading all font weights from Google Fonts, it would be more efficient to load only the ones you're using.
While these points may not seem crucial for a challenge, they are important details in a real-world project. Paying attention to these small things can make a big difference in the future.
Happy coding!
Marked as helpful0 - @Stephanie-DennehySubmitted 4 months agoWhat are you most proud of, and what would you do differently next time?
I am really proud of the fact that I completed this project on my own using Tailwind CSS. This is the first project I have used it in (outside of tutorial videos). There were a few times that I got stuck and wanted to just go back to regular CSS, but I kept pushing through.
I do want to go back and clean up some of the classes a bit. I have several sections where I reused the CSS. I am thinking that I can make custom classes to apply so the HTML looks cleaner.
What challenges did you encounter, and how did you overcome them?I had a hard time getting some of the layouts to shift correctly in my css. Since I was using tailwind for the first time on my own, I had to find which the specific items that I needed to change to get my layouts to work. It was a different experience for me than using plain CSS like I have in past projects.
I used a Tailwind Cheat sheet for quick reference on my class names to try to help me complete this challenge faster. You can find it here (https://tailwindcomponents.com/cheatsheet)
What specific areas of your project would you like help with?I had a hard time getting the first and last card in the right positions. I used position absolute to move them but I was having a hard time getting my Tailwind classes to fully cooperate to adjust the spacing the way I wanted. I'd love to know if there's a better/easier way to do that part than the way I did it.
@jaceleedevPosted 4 months agoHello! First of all, I want to encourage you for taking on the challenge of learning Tailwind CSS and applying it to the challenge. It's clear from your code that you've put a lot of thought into tackling the challenges.
First, when you go below the desktop view (under 1440px), the mobile view isn't centered properly. This issue arises because Tailwind prefers a mobile-first approach. When you define the values in the screens in tailwind.config.js(ts) simply as pixel values, it sets the default as min-width. If you want to set the default as max-width, you should modify it like this:
screens: { sm: { max: '375px' }, md: { max: '768px' }, lg: { max: '1440px' } }The card layout can be tricky and challenging. I recommend using CSS Grid for this. While it may not be the easiest solution, it works well if calculated correctly. Happy coding!
Marked as helpful0 - @scaphyxxSubmitted over 1 year ago
Some feedback would be nice :)
@jaceleedevPosted 4 months agoIt's great that the layout changes in advance for a seamless responsive design before it reaches 375px. As for my feedback, currently, fonts are being imported and used in global.css. For font optimization, I suggest trying the following approach. I'll leave a link to the official Next.js documentation. https://nextjs.org/docs/app/building-your-application/optimizing/fonts Happy coding!
0 - @Abhi865625Submitted 10 months agoWhat are you most proud of, and what would you do differently next time?
na
What challenges did you encounter, and how did you overcome them?na
What specific areas of your project would you like help with?na
@jaceleedevPosted 6 months agoGood job!!! The advice I'd like to give is to try to use more semantic tags. Keep going and happy coding!
Marked as helpful0 - @OffyOkSubmitted 6 months agoWhat are you most proud of, and what would you do differently next time?
i look too same , in my opinion
What challenges did you encounter, and how did you overcome them?for this challenge i've see responsive picture in mobile have something and then i found that is use object-fit: cover and yeah , another i just use box-shadow first-time
What specific areas of your project would you like help with?@jaceleedevPosted 6 months agoWell done! You did a great job. One suggestion I would like to offer is to use font files in the project rather than relying on Google Fonts via CDN. Looking at your code, I can see how much effort you've put in. Happy coding!
0 - @Elnuk01Submitted 6 months agoWhat are you most proud of, and what would you do differently next time?
The fact that it all worked well is something I'm really proud of.
Next time I will properly analyze the design and group them into grids so I will be able to structure them properly.
What challenges did you encounter, and how did you overcome them?First was structuring while writing the html code, so I went back to the design and analyze it properly to give it the right structure, I also sourced online for help.
What specific areas of your project would you like help with?Structuring in html.
@jaceleedevPosted 6 months agoLGTM👍
It might be a good idea to separate HTML files and CSS files next time. The project is likely to get more complicated. It feels like you've put a lot of thought into making this. I hope you keep up the good work.
Marked as helpful0
