Skip to content
OverviewSolutions
43
Comments
25
Shivangam Soni
@ShivangamSoni

All comments

  • Waldo-Noe-Liberato-Jara•40
    @Waldo-Noe-Liberato-JaraSubmitted 10 days ago
    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,030
    @ShivangamSoniPosted 10 days ago

    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."});
  }
}
    0
  • kafka•50
    @k4fk4-devSubmitted 10 days ago
    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)

    1
    Shivangam Soni•1,030
    @ShivangamSoniPosted 10 days ago

    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
    0
  • DoneWithWork•160
    @DoneWithWorkSubmitted 5 months ago
    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,030
    @ShivangamSoniPosted 5 months ago

    Nice Work

    0
  • Shivangam Soni•1,030
    @ShivangamSoniPosted 5 months ago

    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
    0
  • Shivangam Soni•1,030
    @ShivangamSoniPosted 5 months ago

    Nice Work

    1
  • Divya•50
    @Divya4879Submitted 5 months ago
    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

    1
    Shivangam Soni•1,030
    @ShivangamSoniPosted 5 months ago

    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.

    0
  • Shivangam Soni•1,030
    @ShivangamSoniPosted 5 months ago

    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>
    0
  • abdusali1234•20
    @abdusali1234Submitted 5 months ago
    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,030
    @ShivangamSoniPosted 5 months ago

    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
    1
  • Shivangam Soni•1,030
    @ShivangamSoniPosted 5 months ago

    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
    1
  • capnsmitty•10
    @capnsmittySubmitted over 1 year ago

    Questions

    • What are some best practices when using @media for different displays?
    • For text size is it more common to use px values or use relative units such as em/rem?

    Static QR Page Challenge Solution

    2
    Shivangam Soni•1,030
    @ShivangamSoniPosted over 1 year ago

    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
    1
  • Antoni•170
    @antonistarzynskiSubmitted over 1 year ago

    Hello ,

    I have made this task without pixel perfect approach, but more to train working with API. I found out some issue with quite long time of fetching a new advice, is it my fault in code or server side issue ? I would be very greatful for any advice, opinion or tip about my solution :)

    Have a nice day, Antek

    Advice-generator-app

    1
    Shivangam Soni•1,030
    @ShivangamSoniPosted over 1 year ago

    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.
    0
  • Shivangam Soni•1,030
    @ShivangamSoniPosted over 1 year ago

    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
    1