Skip to content
OverviewSolutions
46
Comments
25
Shivangam Soni
@ShivangamSoni

All 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.

  • Shivangam Soni•1,090
    @ShivangamSoni

    Nice Work. Just a few things.

    1. Explore & use more HTML tags: Like address tag is good for the profiles address, a tag for links rather than buttons, etc.

      <address>London, United Kingdom</address>
  <a href="#">GitHub</a>

    2. Use CSS Classes: It makes the code much more understandable & maintainable. Using just tags is not going to be a good solution when it comes to larger projects. I also suggest looking into things like BEM Style CSS

    <div class="profile">
  <img class="profile_img" src="./assets/images/avatar-jessica.jpeg" alt="ERRO" srcset="">
  <h1 class="profile_name">Jessica Randall <span class="profile_address">London, United Kingdom</span></h1>
  <p class="profile_info">"Front-end developer and avid reader."</p>
      <ul class="profile_links">
        <li><button class="link">GitHub</button></li>
      </ul>
</div>
  • abdusali1234•20
    @abdusali1234
    What are you most proud of, and what would you do differently next time?

    I was able to use flexbox to arrange the items how I wanted to. In the future I would consider using CSS grid and a framework like Tailwind CSS.

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

    I didn't know how to change the design of the page for different devices, so I did a quick search and learnt about media queries in CSS. I also had some issues sizing the categories button using flexbox, so again I did some research and realised I could just change the display mode to inline-flex.

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

    Am I using Flexbox to the best of it's abilities? I feel like the way I've structured the HTML and used Flexbox is inefficient, and would love some pointers or tips to improve how my code is structured.

    Responsive Blog Preview Card Using CSS Flexbox

    1
    Shivangam Soni•1,090
    @ShivangamSoni

    Nice Solution, but there are a few areas where improvements can be done.

    Unnecessary use of Flex, With & Height

    For the Category Tag, you are using many CSS properties, whereas the desired result could have been achieved in an easier way. This is your code for the category

    .post-category {
   display: inline-flex;
   width: 82px; 
   height: 29px;
   border-radius: 0.25em;
   background-color: var(--yellow);
   justify-content: center;
   align-items: center;
   font-weight: 800;
}

    This is how you could have taken advantage of the fact that the tag is a flex-child:

    .post-category {
  align-self: flex-start;
  padding: 0 0.75rem;

  border-radius: 0.25em;
  background-color: var(--yellow);
  font-weight: 800;
}

    What I did is used the align-self property to align the element to the start of the parent flex-box. Secondly, I'm using padding to adjust the spacing required around the text.

    Default Styling

    Another point to notice is that in many places you haven't adjusted the default padding & margin of elements like body, h1, p, etc. Because of this, there is an uneven spacing within the card.

    You might want to look into CSS Resets, where we write some CSS that resets some of the default styling applied by the browsers. This is done because you will usually have your own styling needs, especially in case of Padding & Margin. So resetting some of the default properties just makes sure that no default styling affects our design.

    Semantic Tags

    I also recommend you to look into Semantic Elements & replace the divs with Semantic Elements instead. Read More about Semantic HTML

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

    Nice Work. Just a few things.

    1. Apply Resets on all elements rather than just on the HTML

    /* use Astrisk instead */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

    2. Explore & use more HTML tags: Making the entire Card component out of the main tag doesn't really make sense. It would have been better to use the article tag similar to this:

    <main>
    <article>
        <img src="images/image-qr-code.png" alt="qr-code">
        <h1>Improve your front-end skills by building projects</h1>
        <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
    </article>
</main>

    3. Use CSS Classes: It makes the code much more understandable & maintainable. Using just tags is not going to be a good solution when it comes to larger projects. I also suggest looking into things like BEM Style CSS

    <main>
    <article class="card">
        <img class="card__img" src="images/image-qr-code.png" alt="qr-code">
        <h1 class="card__title">Improve your front-end skills by building projects</h1>
        <p class="card__info">Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
    </article>
</main>
    Marked as helpful
  • Shivangam Soni•1,090
    @ShivangamSoni

    What are some best practices when using @media for different displays?

    • When it comes to best practices, most people like to go for Mobile-First Approach. Where the initial CSS Styling is done for Mobile UI & then you use media-query to change the UI for Larger Screens.
    • Secondly, the way in which you should use media-query is that once at lest one UI Styling is done (Desktop or Mobile). You use Browser Dev tool to adjust the screen size, & observe the Size at which the UI starts to break (Overflow, Font looks too large, etc.).
    • Right now if we look at your solution, you are changing the Styles at 1440px, even though around 740-800px there is enough screen left around that you can adjust the size & make the Card a bit larger.

    For text size is it more common to use px values or use relative units such as em/rem?

    • It's more common & best practice to use em & rem.
    • Using Relative units, we get the advantage that we can adjust the font in one shot using media-query & root instead of setting it for every element separately
    @media screen and (min-width: 1040px)
{ 
  html {
    fontsize: 0.75rem;
  } 
}
    • You'll notice that even for readjusting the Font, I've used rem the reason is that it provides advantage in terms of User Experience. If some user sets a different default font-size using their browser setting using rem we will be basically respecting that & building on top of it. whereas if you were to set px values, the user's preferences are of no use.
    Marked as helpful
  • Shivangam Soni•1,090
    @ShivangamSoni

    Nice Work on the Solution

    The issue is not your code, it's the API Serve. But you can make it better by creating a loading state indicator. Like a Skeleton or Loading Spinner.

    • After Button Click, Activate the Loading UI
    • Then send the fetch request
    • After Data is fetched, set the data & then remove the Loading UI.
  • Shivangam Soni•1,090
    @ShivangamSoni

    Nice Job

    Few feedbacks:

    • There's too much layout shift on the Desktop when a Form error occurs. It's because the error para is not having any height. You can fix this issue by setting a min-height
    • After showing the error, you are clearing the input, which is not a desirable behavior. The user usually wants to try to fix the issue by updating the already inputted data.
    Marked as helpful
  • Shivangam Soni•1,090
    @ShivangamSoni

    For errors I always put a span below the input with error styling & if there is an error I show it using classes otherwise keep it hidden.

  • Shivangam Soni•1,090
    @ShivangamSoni

    Well there are plenty of ways to do that.

    • Setting all the fonts using rem. Then using media query you can adjust the root font-size
    • Using Viewport Width (vw) to set the fonts this way it automatically adjusts based on Viewport Width. I have seen this used in some websites.
    • Using clamp you can set a min, max & preferred value for the fonts, like this font-size: clamp(1rem, -0.875rem + 8.333vw, 3.5rem); You can learn more about this Here
    Marked as helpful
  • Shivangam Soni•1,090
    @ShivangamSoni

    Hi, Congratulations on Completing the Challenge

    Here are a few suggestions that might help you:

    • You are separating the image & the text content using section tags. The problem with this is that screen readers will see those as two separate landmarks. Whereas it's suposed to be one single component where the text content basically gives details about the product in the image. I would recommend using a single section tag for grouping the image & content, and put the image & content itself within divs.
    <section>
// Image Div
// Content Div
</section>
    • You have asked about 50-50 split, to do that you are using flex but grid would have been a much easier solution.
    display: grid;
grid-template-columns: repeat(2, 1fr);
    Marked as helpful
  • Shivangam Soni•1,090
    @ShivangamSoni

    It's similar to links; ![alt text](link to image)

    E.g.: ![Desktop Screenshot](./screenshots/desktop.png)

    Marked as helpful
  • Shivangam Soni•1,090
    @ShivangamSoni
    1. You have set the range for Day & Month inputs wrong. It's allowing Day up to 40 & Month up to 14.
    2. If put a date in the future, it shouldn't allow it, but it is allowing it. Like if I put 17-06-2023 it shows the result 0-0-0 but it should show an error that the date can't be in future. It works correctly if I try 2024 or ahead, but If I input a date later in this year it works even though it shouldn't.
    Marked as helpful
  • Shivangam Soni•1,090
    @ShivangamSoni
    1. Country Details: You are using the endpoint https://restcountries.com/v3.1/name/{name}, now this might work in almost all cases, but in some it just doesn't. Like when I click on India, it shows me the details for British Indian Ocean Territory. That's because the endpoint is sending the results for all the countries having India in its name & then you are displaying the first object in the array. I suggest you use the endpoint: https://restcountries.com/v3.1/alpha/{code} & use the ccna3 which is the unique country code.
    2. Persistent Theme: The theme switcher works, but when I refresh it goes back to the default theme & doesn't remember my preference. You can use LocalStorage to achieve this.
    3. Details Page: If I refresh the details page or share the link for a certain countries details page, the page doesn't load due to the App being an SPA. I see you deployed your app on Netlify so, the solution is really simple, you just need a small Netlify Config File which tells Netlify how to handle this situation. You can read about it here. You just require a netlify.toml file in your project with the following redirect instructions:
    [[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200
    Marked as helpful