Skip to content
OverviewSolutions
46
Comments
25

Shivangam Soni

@ShivangamSoniShimla, Himachal Pradesh1,090 points

I'm a Web Developer (Front-End Heavy). My Primary Skills are: - HTML - CSS - JavaScript - TypeScript - React - TailwindCSS - Next I'm looking for Front-End Web Development Jobs where I can utilize my current skills & learn more.

I’m currently learning...

Python, Machine Learning

Latest solutions

View more solutions

Latest comments

  • Waldo-Noe-Liberato-Jara•40
    @Waldo-Noe-Liberato-Jara
    What are you most proud of, and what would you do differently next time?

    I'm proud of having completed the challenge in record time for me. Next time, I would take a bit more time to improve and refine certain details.

    What challenges did you encounter, and how did you overcome them?
    • Challenges: Guessing the font-size, font-weight, color, and the card's width.
    • Solution: I defined common measurements for font size and weight. For the color, I used a color picker tool to match it as closely as possible.
    What specific areas of your project would you like help with?

    I would like help with JavaScript. I know how to make an API request, but I need to learn how to do it following best practices and with better code structure.

    Responsive Recommendations Application with CSS Grid.

    1
    Shivangam Soni•1,090
    @ShivangamSoni

    The adviceData that you have created for initialization is not needed at all. Since you are making a request on DOMContentLoaded there's no need for an initial dummy data. Also, the initial loading UI is being shown because that's the default you have written in your markup. You can simply pass the response data to the updateUI function.

    Another thing is the way you are handling the error, you don't have to update the UI manually to show the error you can simply reuse your updateUI function to display errors.

    async function getAdvice() {
  try {
    const response = await fetch("https://api.adviceslip.com/advice");
    const data = await response.json();
    updateUI(data.slip);
  } catch (error) {
    console.error("Failed to fetch advice:", error);
    updateUI({id: "404", advice: "An error occurred. Please try again."});
  }
}
  • kafka•90
    @k4fk4-dev
    What are you most proud of, and what would you do differently next time?

    Apply a different technique to swap the image of the Icon-Plus and Icon-Minus

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

    Using Ailwind with JS and using the background of a page in a different way

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

    Using events in javascript,flax in css

    use js,css(tailwind)

    #tailwind-css
    1
    Shivangam Soni•1,090
    @ShivangamSoni

    Nice Work

    A few Suggestions:

    1. Background Image: As shown in the design, there's supposed to be a background image on top of the page
    2. Accessibility: Try making the page a bit more accessible, as right now the open close functionality is purely visual. I suggest looking into ARIA Attributes.
    3. Animations: The accordion is opening & closing fine but a subtle opening & closing transition would make it look better
    Marked as helpful
  • DoneWithWork•160
    @DoneWithWork
    What are you most proud of, and what would you do differently next time?
    1. using Css grid to design layout
    What challenges did you encounter, and how did you overcome them?
    1. Ensure layout was good

    watched a couple of youtube videos and articles

    What specific areas of your project would you like help with?
    1. How can I make the text span longer in the div. Max-width does not seem to work. This results in my cards looking more square than the original design

    Thanks :)

    Responsive Testimonial Grid using HTML and SASS

    1
    Shivangam Soni•1,090
    @ShivangamSoni

    Nice Work

  • Shivangam Soni•1,090
    @ShivangamSoni

    Nice Work

    Just one suggestion, I think the media query at 1000px would have been better at 720px. Because right now it goes to single column layout at 1000px, which makes the cards way too stretched.

    Or you could just keep the single column at 1000px but ensure that the cards don't stretch to view-port width.

    Marked as helpful
  • Shivangam Soni•1,090
    @ShivangamSoni

    Nice Work

  • Divya•50
    @Divya4879
    What are you most proud of, and what would you do differently next time?

    I'm most proud of just making it overall.

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

    I encountered the challenge of changing color of hr, and that of the no.

    I learned them, used in this one successfully and overcame my challenge.

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

    The specific areas of the project I'd like help with are:-

    1. What's 1 level heading in it. suggestion(s) for my code
    2. Why am i unable to vertically centrally align the recipe card using align-items
    3. Any other suggestions are welcome.

    Responsive Recipe Page Component

    #accessibility#pure-css
    1
    Shivangam Soni•1,090
    @ShivangamSoni

    Nice Work. Few Suggestions:

    1. Start using Semantic Tags: There are plenty of Semantic tags that provide additional information about the sites' markup, making it much more accessible & it also helps in writing HTML which is much more structured & easy to understand. Like the ingredients, instructions, etc. all these could have been wrapped in their own section tags.

    2. Use Table: In the Nutrition section, you have used p & hr to achieve the design, but it doesn't provide the same level of info as a table tag would provide. Also, using the table tag automatically puts the data into a tabular format (rows & columns) so, you don't have to write additional CSS to achieve that.

    3. Meaningful CSS classes: You have used CSS class names like sp, categ, cal which might make sense to you but in a larger project with multiple developers it won't work. You should get into practice of using meaningful CSS Classes that actually convey some information, making it easier to understand & maintain. Like your sp class is just making the text bold & a darker color, so it would make much more sense to actually have the class name bold or highlight. Also, I suggest looking into things like BEM or Object-Oriented CSS (OOCSS) in order to write better, readable & maintainable CSS.

View more comments