Skip to content
OverviewSolutions
3
Comments
88

Krushna Sinnarkar

@krushnasinnarkarMaharashtra, India1,080 points

Namaskar/Hello!. I am Krushna, a Electrical Engineering Student at IITM. Obsessed with learning, adapting, and evolving in the digital realm.

Latest solutions

Latest comments

  • Krushna Sinnarkar•1,080
    @krushnasinnarkar

    Hi @RamadaniRei,

    Congratulations on successfully completing the challenge!

    Your solution looks nice, though there are a couple of things you can improve, which I hope will be helpful:

    1. GitHub Pages Hosting: There is an issue with hosting your website on GitHub Pages because your HTML file is named artical.html. It should be named index.html so that GitHub Pages can recognize it properly.

    2. Image Paths: I downloaded your code and ran it on my PC. I noticed that you are using incorrect image paths. They should be relative to the location of your HTML file. For example, use ./images/your-img.jpg or images/your-img.jpg instead of /images/your-img.jpg.

    3. Component Stretching: Your component gets stretched as the screen size increases. To address this, you should set a maximum width for .previewContainer to prevent it from stretching too much.

    I hope you find these suggestions helpful.

    Feel free to reach out if you have more questions or need further assistance.

    Happy coding!

  • Mageshwari Balaguru•170
    @Mageshwari-Balaguru
    What are you most proud of, and what would you do differently next time?

    previously i've missed semantic HTML elements like section and instead of using table element used article and styled it like table. Improvised my code a bit.

    Recipe page

    1
    Krushna Sinnarkar•1,080
    @krushnasinnarkar

    Hi @Mageshwari-Balaguru,

    Congratulations on successfully completing the challenge!

    Your solution looks nice, though there are a couple of things you can improve, which I hope will be helpful:

    1. Bullet Points and List Numbers: As shown in the design, you should add color to bullet points and list numbers. You can achieve this using the ::marker pseudo-element. Here’s a demo code snippet on how to use it:

      ul::marker {
  color: #ff5733; /* Example color for bullet points */
}

ol::marker {
  color: #ff5733; /* Example color for list numbers */
}

    2. UI Improvements: Your page is responsive and well-done. For future projects, consider using Flexbox. It can simplify layout tasks, reducing the need for multiple layers and making it easier to manage padding and margins.

    I hope you find these suggestions helpful.

    Feel free to reach out if you have more questions or need further assistance.

    Happy coding!

    Marked as helpful
  • Krushna Sinnarkar•1,080
    @krushnasinnarkar

    Hi @laibak24,

    Congratulations on successfully completing the challenge!

    Your solution looks nice, though there are a couple of things you can improve, which I hope will be helpful:

    1. Email Validation: Your email validator isn't working properly as it doesn't check for a dot followed by letters. For example, when I entered "test@gmail", it was accepted as a valid email. You should use the following regex pattern to ensure proper validation:

      /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+\.[a-zA-Z]{2,}$/

      This pattern will ensure that there's a dot followed by at least two letters.

    2. UI Improvements: Work on your UI to make it more closely match the design. Aim for perfection in layout, spacing, and styling.

    3. Simplifying Layers: There was no need to add multiple layers for the background. You can directly give the background color #242742 to the body and center your .content inside the body.

    I hope you find these suggestions helpful.

    Feel free to reach out if you have more questions or need further assistance.

    Happy coding!

  • P
    Giorgi Khaburzania•350
    @GioKhabu
    What are you most proud of, and what would you do differently next time?

    Created with Tailwind CSS and a little bit of javascript.

    Shortly URL shortening API

    #tailwind-css
    1
    Krushna Sinnarkar•1,080
    @krushnasinnarkar

    Hi @GioKhabu,

    Congratulations on successfully completing the challenge!

    Your solution looks nice, though there are a couple of things you can improve, which I hope will be helpful:

    1. Input Validation: According to the design, when the "Shorten It!" button is clicked with an empty input, the input border should turn red and the placeholder text color should also be red.

    2. API Integration: You should integrate a URL shortener API. This API will take the input URL, shorten it, and return the shortened link. The shortened link should then be displayed below, similar to the divs you created for Link 1, Link 2, and Link 3.

    I hope you find these suggestions helpful.

    Feel free to reach out if you have more questions or need further assistance.

    Happy coding!

    Marked as helpful
  • Carlito•210
    @Introxiety
    What are you most proud of, and what would you do differently next time?

    A good refresher exercise I feel I can do better next time I do a exercise.

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

    Everything is a challenge right because I just comeback from doing this again.

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

    I want a clean code where its easy to understand.

    Selectors Recipe Page

    1
    Krushna Sinnarkar•1,080
    @krushnasinnarkar

    Hi @Introxiety,

    Congratulations on successfully completing the challenge!

    Your solution looks nice, though there are a couple of things you can improve, which I hope will be helpful:

    1. Width of Recipe Page: Your recipe page is currently occupying the entire width of the viewport. To make it look more like the design, wrap your <header>, <main>, and <footer> elements inside a container and give the container a max-width of 736px (or whatever width suits the design). Additionally, add some top and bottom margins to the container.

    2. Centering the Page: After making the above changes, the recipe page will align to the left. To center it, add the following CSS to the <body> element:

      display: flex;
justify-content: center;

    3. Background Color: Ensure the background color of the <body> matches the design specifications.

    I hope you find these suggestions helpful.

    Feel free to reach out if you have more questions or need further assistance.

    Happy coding!

    Marked as helpful
  • CAF2801•30
    @CAF2801
    What challenges did you encounter, and how did you overcome them?

    to center the elements of the page

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

    my margins and my paddings

    QR Code project (HTML and CSS)

    2
    Krushna Sinnarkar•1,080
    @krushnasinnarkar

    Hi @CAF2801,

    Congratulations on successfully completing the challenge!

    Your solution looks great, but I have a few suggestions that might help improve it:

    1. QR Image Visibility: It seems the QR image isn't visible because the image file wasn’t uploaded to your repository. Please upload the image file and update the src attribute of the img tag accordingly.

    2. Dimensions: Avoid using fixed units like px for width and height. Instead, use relative units such as 100% for width and 100vh for height to make your design more responsive.

    3. Centering the Component: The current method of using margin to center .main-content isn’t ideal. For perfect centering, use Flexbox. You can achieve this by adding the following styles to #container:

      display: flex;
align-items: center;
justify-content: center;
height: 100vh;

      This will center .main-content both vertically and horizontally.

      If you're not familiar with Flexbox, you can learn more here:

    I hope you find these suggestions helpful.

    Feel free to reach out if you have more questions or need further assistance.

    Happy coding!

    Marked as helpful
View more comments