Skip to content
OverviewSolutions
12
Comments
31
Rahul Kumar
@rahulkumar215

All comments

  • Srishti Chaudhary•170
    @itsmesrishtiSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    Finishing the project and getting to use js to add functionality to projects.

    What challenges did you encounter, and how did you overcome them?

    1. At first when I added a second event listener within an event listener both of them were being executed on single click and it wasn't working one after the other like it's supposed to chatgpt suggested using stopPropagation() and I did that.

    2. I wasn't able to figure out how to do the active states for both mobile and desktop using CSS so I used JS. For JS, I went with simple innerWidth property.

    What specific areas of your project would you like help with?

    What would have been the best approach to deal with active states. Can it be done using CSS or is JS required?

    Article Preview

    1
    Rahul Kumar•570
    @rahulkumar215Posted 2 months ago

    Hi Sristhi 👋, Been a long time!,

    Anyway,

    For this

    What would have been the best approach to deal with active states. Can it be done using CSS or is JS required?

    I think there is no problem with using JS for active states, and In CSS, you can use the :hover or :active, to make the element active on click and on hover. However the hover state does not work in mobile phones, so you should use the :active.

    1
  • Srishti Chaudhary•170
    @itsmesrishtiSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I think that I'm proud of getting close to the design.

    What challenges did you encounter, and how did you overcome them?

    I really struggled with figuring out the correct tag for preparation time section. I was thinking of using tag but thought maybe it won't be apt for this so ended up using section tag but then the heading for prepartion time was smaller compared to other hedings so had to use for that but then that would mean having an tag before so I put prepation time section in the end in html and then used css to bring it at the top.

    What specific areas of your project would you like help with?

    I would like help with the preparation time section how could i have done that or did I do it correctly or not?! And also the semantics of other things as well.

    And also the image thing for mobile I used media query to make position absolute was that the right approach?!

    Recipe Page

    2
    Rahul Kumar•570
    @rahulkumar215Posted 4 months ago

    Hello Srishti👋

    Congratulations on successfully completing the challenge! 🎉

    It's great to see you making these project regularly, I wish I had the consistency like that 😴.

    Anyway,

    First Of All, A word of advice,

    When you want to receive a clear and correct answer, You should ask clear and correct question or explain your problem clearly. It's most important in Coding as well.

    Here in your sentence

    I really struggled with figuring out the correct tag for preparation time section. I was thinking of using tag but thought maybe it won't be apt for this so ended up using section tag but then the heading for prepartion time was smaller compared to other hedings so had to use for that but then that would mean having an tag before so I put prepation time section in the end in html and then used css to bring it at the top.

    I really lost track of what you were saying 🙄. So Keep working on it.

    Now for your answer 😎.

    For this Question

    I would like help with the preparation time section how could i have done that or did I do it correctly or not?! And also the semantics of other things as well.

    • Your preparation section is well written, with all the h3 and li.
    • The semantics of other things looks good as well
    • I would like to know why did you choose to use article for this? Just curious.
    • Other than that everything looks good.

    Great Job

    Now For This Question

    And also the image thing for mobile I used media query to make position absolute was that the right approach?!

    • Well I would say, at the end of the day, if its working, its good 😂.
    • Though Using position: absolute may not be the best approach.

    -The reason you needed to use position: absolute was simply because you have this in your code,

    (max-width: 38em) { main { width: 100vw; border-radius: 0; padding-top: 43vw; } }

    • this padding is stopping your image to stick to the top

    Another is

    main { width: 51vw; background-color: hsl(0, 0%, 100%); padding: 2rem; border-radius: 1rem; }

    • Here this padding is stopping your img to cover all the width of the mobile screen.

    Here is what you should take into consideration

    • You can just simply separate the image from the rest of the part, and can create two div, one will have the img inside of it and another will have the rest of the part.

    • By doing this you can manipulate the margin and padding of the both div independently. Which will help you make the design responsive more easily.

    • You can just remove all the margin from the div that has img inside of it and make it cover all the width of the screen on smaller devices.

    • That was one approach that I used, You can see it here Github

    Well that was all, It sure took a lot of time to write this.

    If you need any feedback or suggestions, I am happy to help

    I'll be looking forward to your next project, until then

    Good Work, Keep Grinding and Have Fun Coding!

    Marked as helpful
    0
  • Srishti Chaudhary•170
    @itsmesrishtiSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    That I used flexbox and position to center the card but with responsive media query for smaller screen changed it so that user can scroll and so that the footer doesn't behave weirdly.

    What challenges did you encounter, and how did you overcome them?

    The main challenge I encountered was to do with deciding the colors of the design.

    What specific areas of your project would you like help with?

    I would like you to check if my html is semantic. If you have any other suggestions as well they are most welcome!

    Social Links

    1
    Rahul Kumar•570
    @rahulkumar215Posted 4 months ago

    Hello Srishti👋

    Congratulations on successfully completing the challenge! 🎉

    • Your code is well written and your colour choice is good.

    • However, your footer section blends with background and is hard to see.

    • also when writing media-query, try using em units rather than px, for all browsers and devices view consistency

    like this :-

    @media screen and (max-height: 720px) { }

    to

    @media screen and (max-height: 45em) { }

    just divide px value to 16 and you have em value.

    writing media query in em is best practice.

    If you need any feedback or suggestions, I am happy to help

    Good Work, Keep Grinding and Have Fun Coding!

    Marked as helpful
    1
  • Vishisht_Dwivedi•70
    @Vishisht-DwivediSubmitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    im proud of using html tables for the markup of the challenge.. they were a little tough to deal with a very weird at times too.. im proud of using my full knowledge of js upto this point to make several checkpoints for the inputs and also manipulating the DOM

    What specific areas of your project would you like help with?

    I would like help with my js. I think that it can be much shorter than it currently is.. I have tried using the event object on purpose to get some familiarity with it.

    Contact_form using vanilla js and pure css with html tables

    1
    Rahul Kumar•570
    @rahulkumar215Posted 5 months ago

    Hello @Vishisht-Dwivedi👋

    Congratulations on successfully completing the challenge! 🎉

    I have a suggestion regarding your code that I believe will be of great interest to you.

    first of all let me say this, your JavaScript knowledge and skills are really good, you have used a lot of DOM manipulation in your JS Codebase, that is very good.

    however, you could have done it in a simpler way by just doing this

    • Create p warning tag and add it to all the input fields in the HTML, then keep that p tag hidden with opacity: 0;,

    • then write JS code to detect whether an input is invalid, and when that input is invalid, use JS to add a class that turn the opacity:0; to opacity:1, to the p that is present in that invalid input.

    • this will create an effect where the user will see the p warning when an input is invalid.

    I hope you find this helpful 😄 Above all, the solution you submitted is great !

    If you need any feedback or suggestions, I am happy to help

    Have Fun Coding!

    1
  • Karishma kanhar•210
    @karishmak77Submitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    I'm proud that i completed this challenge. I faced some problem with the javascript, but i figured it out in the end. Seeing everything come together made it all worth it. Now, I feel more confident and ready for the next challenges

    Contact us form

    2
    Rahul Kumar•570
    @rahulkumar215Posted 5 months ago

    Hello @karishmak77👋

    Congratulations on successfully completing the challenge! 🎉

    I have a suggestion regarding your code that I believe will be of great interest to you.

    • You might want to give some padding-left in the input so that when you write inside them, You are not touching the borders of the input.

    • for the Success Message, you should try to give it position: fixed, and add some animation to it to make it look professional.

    I hope you find this helpful 😄 Above all, the solution you submitted is great !

    If you need any feedback or suggestions, I am happy to help

    Have Fun Coding!

    0
  • Julianna Messineo•180
    @mathematiCodeSubmitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    This was my first responsive web page so I'm proud of getting it to look pretty close to the design. Next time, I want to more thoughtfully plan out the html to make sure my CSS code is efficient. For example, I think there were some places where using a class would have been more efficient than creating CSS for each element by their ID. Also some of my solutions were kind of hacky and I relied on using px as a unit so I'd like to learn how to use the other units of measurement in CSS to make the page more responsive.

    What challenges did you encounter, and how did you overcome them?

    I could not figure out how to get the picture and the information to be centered with no space in between with either CSS grid or flexbox whilst having them have the same width and height. I figured it out by setting each part to a specific number of pixels but I'm sure there's a more flexible way to do it.

    Another challenge was when I made the screen mobile sized, the elements were not remaining centered. I used some media queries to fix that.

    What specific areas of your project would you like help with?

    I am super beginner at this stuff. I would love suggestions on how to make this simpler and more efficient. I'm interested in the best way to get the picture and info box centered and remaining the same size in a responsive way, maybe not using pixels as units.

    Basic Product Card with CSS Grid

    1
    Rahul Kumar•570
    @rahulkumar215Posted 6 months ago

    Hello @mathematiCode👋

    Congratulations on successfully completing the challenge! 🎉

    I have a suggestion regarding your code that I believe will be of great interest to you.

    • You got the not using px part right. Using px is not a good idea to make a website, you can use them for smaller parts of the website, such as for border-radius and others. I would recommend learning about rem, em, vw, and vh also using % etc.

    • Learn When To Use CSS Units

    • You are gonna love this

    I hope you find this helpful 😄 Above all, the solution you submitted is great !

    If you need any feedback or suggestions, I am happy to help

    Have Fun Coding!

    Marked as helpful
    0
  • Rahul Kumar•570
    @rahulkumar215Posted 6 months ago

    Hello @Alle09👋

    Congratulations on successfully completing the challenge! 🎉

    I have a suggestion regarding your code that I believe will be of great interest to you.

    • you can add overflow: hidden; in the .container class instead of .perfume { border-top-left-radius: 10px; border-bottom-left-radius: 10px; }, this will hide all the overflowing part outside of the .container;

    I hope you find this helpful 😄 Above all, the solution you submitted is great !

    If you need any feedback or suggestions, I am happy to help

    Have Fun Coding!

    Marked as helpful
    1
  • Rahul Kumar•570
    @rahulkumar215Posted 6 months ago

    Hello @karishmak77👋

    Congratulations on successfully completing the challenge! 🎉

    I have a suggestion regarding your code that I believe will be of great interest to you.

    In your code, if you add margin: 20px to the .container class. It will give the container some breathing room when the site is opened on mobile devices, hence making it more responsive and mobile friendly design.

    I hope you find this helpful 😄 Above all, the solution you submitted is great !

    If you need any feedback or suggestions, I am happy to help

    Have Fun Coding!

    Marked as helpful
    0
  • Rahul Kumar•570
    @rahulkumar215Posted 8 months ago

    Hello @epinox0022,

    I wanted to kindly remind you that there's no need to repost the solution. You can conveniently update it directly on GitHub, and the live solution will automatically reflect those changes, thanks to GitHub Pages.

    Nonetheless, I truly appreciate your efforts in working on the solution and ensuring its update. Your dedication is commendable.

    If you need any further assistance or have any questions, please don't hesitate to reach out.

    See Ya ✌

    0
  • Ashley•80
    @AshlavaDevSubmitted 9 months ago
    What are you most proud of, and what would you do differently next time?

    I am proud that I managed to get this page very close to the design, although I am a little unsure just how exact it is. I would probably change my coding workflow a little bit next time, writing all the HTML instead of some and styling from the top down.

    What challenges did you encounter, and how did you overcome them?

    The biggest challenge I faced was styling the list items. My solution was to break down each li tag and understand what CSS affected which part, and what CSS would not work. From there I could do things like change the colour of the whole item then use spans to target specific parts that needed to go back or be different. It was clumsy, but it seems to have worked.

    What specific areas of your project would you like help with?

    Any advice for more efficient ways of doing certain things (ie. list styling) would be nice but not necessary.

    Recipe page with resoponsive TailwindCSS

    2
    Rahul Kumar•570
    @rahulkumar215Posted 9 months ago

    Hello @AshlavaDev👋

    Congratulations on successfully completing the challenge! 🎉

    I have a suggestion regarding your code that I believe will be of great interest to you.

    • Use of HTML Tables

    In your solution, you have used ul and li to make the Nutrition section, However the best practice to do so is by the use of HTML Tables so,

    instead of this

            <div class="grid grid-cols-2 gap-4 px-8">
          <ul class="space-y-6 leading-normal">
            <li>Calories</li>
            <li>Carbs</li>
            <li>Protein</li>
            <li>Fat</li>
          </ul>
          <ul class="space-y-6 font-bold leading-normal text-nutmeg">
            <li>277kcal</li>
            <li>0g</li>
            <li>20g</li>
            <li>22g</li>
          </ul>
        </div>

    use this

        <table>
      <tr>
        <td>Calories</td>
        <td>277kcal</td>
      </tr>
      <tr>
        <td>Carbs</td>
        <td>0g</td>
      </tr>
      <tr>
        <td>Protein</td>
        <td>20g</td>
      </tr>
      <tr>
        <td>Fat</td>
        <td>22g</td>
      </tr>
    </table>

    I hope you find this helpful 😄 Above all, the solution you submitted is great !

    If you need any feedback or suggestions, I am happy to help

    Have Fun Coding!

    1
  • Rahul Kumar•570
    @rahulkumar215Posted 9 months ago

    Hello @pwntech6👋

    Congratulations on successfully completing the challenge! 🎉

    I have a suggestion regarding your code that I believe will be of great interest to you.

    • You might want to add some padding-left to the li elements in the Instruction section, simply do this li{ padding-left: 0.5rem }

    I hope you find this helpful 😄 Above all, the solution you submitted is great !

    If you need any feedback or suggestions, I am happy to help

    Have Fun Coding!

    Marked as helpful
    0
  • Adesh Punde•30
    @adeshpundeSubmitted 9 months ago
    What are you most proud of, and what would you do differently next time?

    Getting the design correctly

    What challenges did you encounter, and how did you overcome them?

    Challenges regarding the images margin padding

    What specific areas of your project would you like help with?

    only with for the proper allignment

    FlexBox and Responsive Development

    1
    Rahul Kumar•570
    @rahulkumar215Posted 9 months ago

    Hello @adeshpunde👋

    Congratulations on successfully completing the challenge! 🎉

    I have a suggestion regarding your code that I believe will be of great interest to you.

    When you upload your project to github, also upload the images, or other assets that you are using in your project, So that github can use them to display the website without any issues. In your live version of the solution, there is no image showing, I would recommend upload the image to the same github repository in which you have uploaded html and css file.

    I hope you find this helpful 😄 Above all, the solution you submitted is great !

    If you need any feedback or suggestions, I am happy to help

    Have Fun Coding!

    0