Skip to content
OverviewSolutions
9
Comments
14
Mikhil Desai
@mike15395

All comments

  • Mikhil Desai•200
    @mike15395Posted 2 months ago

    Congratulations @AmineTamar on completing the challenge! Your solution looks perfect, but i can't review your code, since it shows 404 not found!

    0
  • juliusalberto•220
    @juliusalbertoSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I was most proud of creating a page that is responsive and looks good!

    I also learnt how to hide elements in HTML and css. We can do two things basically:

    1. Moving the element past the container and setting the container overflow to be hidden. This way, when we need the element, we can "drag" it from the hidden part
    2. Set opacity and visibility to zero.
    What challenges did you encounter, and how did you overcome them?

    Eh, creating the event was challenging but doable. The hardest part is changing the shape for the popup (the desktop and mobile overlay are different from each other).

    Article Preview Component

    1
    Mikhil Desai•200
    @mike15395Posted 4 months ago

    @juliusalberto congratulations on completing the challenge!

    You are very close to the design, i have noticed few bugs and mistakes which i would like to highlight to further improve your solution.

    1. Image border radius

    In your style.css file line no 26

    .card .header-img {
  border-radius: 10px 10px 0 0;
}

    should be like this border-radius:10px 0px 0px 10px

    border radius is always in clockwise direction starting from left-top right-top right-bottom left-bottom.

    2.Bug in mobile view When moving from desktop to mobile view at 768px breakpoint, the footer share icons appear for fraction of second then dissappear(without clicking share icon). May be this is happening because of transition css property, I am not sure but can figure it out.

    Rest everything is good and well written! Good Efforts:) Keep Growing:) Happy Coding:)

    0
  • Arnaud Lahaut•200
    @Arnotts33Submitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I am just proud I did stick with this challenge and finished it. It was quite a hard one for my nerves! :D

    A lot of research to finally get something that works, though not perfect yet.

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

    Main challenges:

    • Section numbers.

    • Having the hero img change with responsiveness and having them to get the good size ratio.

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

    Well, still a lot to learn and practice on responsiveness but I am getting there. Any tool, tricks or ideas / sources to get better in there are welcome!

    Meeting Landing Page

    1
    Mikhil Desai•200
    @mike15395Posted 4 months ago

    @Arnotts33 Congratulations on completing this challenge!

    To be honest i have also completed this challenge but my solution is also not perfect, but still i would like to help you with some points that i understood.

    1. First section: hero image is of tablet but displayed on desktop screen. You can easily handle this by writing following code: HTML

     <header>
      <div class="logo">
        <img src="./assets/logo.svg" alt="logo" class="logo-image">
      </div>
      <div class="header-section">


        <div class="image-left-container">
          <img src="./assets/desktop/image-hero-left.png" alt="image-hero-left" class="image-hero-left-desktop">
         
        </div>
        <img src="./assets/tablet/image-hero.png" alt="image-hero-tablet" class="image-hero-tablet">
        <div class="header-text">
          <div class="main-header-text">Group Chat for Everyone</div>
        
          <p class="header-paragraph">Meet makes it easy to connect with others face-to-face virtually and collaborate across any device.</p>
          <div class="header-buttons">
            <button class="header-download">Download <span>v1.3</span></button>
            <button class="header-what">What is it?</button>
          </div>
        </div>
        <img src="./assets/desktop/image-hero-right.png" alt="image-hero-right" class="image-hero-right-desktop">
      
      </div>

    CSS

    .image-hero-tablet{
    display: none;
}
@media all and (max-width:820px) {
.header-section{
        display: grid;
        grid-template-columns: repeat(1,auto);
        grid-template-rows: auto auto-fill;
        grid-template-areas: 
        "hero-image"
        "header-text";
           
    }
    .image-hero-left-desktop,.image-hero-right-desktop{
      display: none;
    }
    
    .image-hero-tablet{
        display: block;
        grid-area: hero-image;
        place-self: center; 
    }
    .header-text{
        grid-area: header-text;
        width: min-content;
        place-self: center; 
          
    }
    .main-header-text{
        font-size: 52px;
    }
  
}

    2.Using css for stlying 01 and 02 numbers It's good that you have written css for stlying numbers as per design but you can directly export image of it from figma file directly and then use it in <img></img>. This will save a lot of time writing css.

    3.code structure: Well written code but can be improved further by deleting unwanted empty files like initial.css in styles folder and updating readme as per template.

    I hope above points will improve your solution further.

    Keep Learning! Happy Coding:)

    0
  • Mikhil Desai•200
    @mike15395Posted 4 months ago

    Congratulations @Mr-sajith for completing the challenge!

    Your solution looks pixel perfect and responsive as well.

    To further improve your solution you can add one more break point for devices like Tablets(900px or 820px). This will make all cards look very clearly without getting streched downside.

    Also please check your README file and update it according to README-template.md.

    Rest your code is well written and maintained.

    Keep Growing! Happy Coding:)

    Marked as helpful
    0
  • Mikhil Desai•200
    @mike15395Posted 4 months ago

    @olicoder13 Congratulations on completing the challenge!

    Your solution is very close to design and also code is well written.

    Just a small mistake of adding image of Jonathan Walters, please do re-check design and images folder, you will figure it out.

    Happy Coding:)

    Marked as helpful
    0
  • Yash Bhatt•280
    @Y-ashbhattSubmitted 4 months ago
    What specific areas of your project would you like help with?

    I think there is a problem with size. Any suggestions would be appreciated.

    Order summary card solution

    1
    Mikhil Desai•200
    @mike15395Posted 4 months ago

    @Y-ashbhatt Congratulations on completing the challenge!

    small improvement: Just update your CSS with cursor:pointer for the buttons, so that user experience is improved.

    Rest your solution is awesome!

    Keep Growing! Happy Coding:)

    1
  • Igor Giovane•150
    @igorG7Submitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I'm proud to have learned about building and using classes, persisting data with local storage, and reorganizing items in the list.

    What I would do differently would be: first research and better structure the code architecture to avoid major changes throughout the project.

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

    I had problems with how to build and store application data locally. After some studies I found the best way to carry out and execute these functionalities and managed to overcome this obstacle.

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

    Drag and Drop for smartphones Filter that finds the exact item I want to manipulate even if there are others like it.

    Todo app

    1
    Mikhil Desai•200
    @mike15395Posted 4 months ago

    @igorG7 Congratulations on completing the challenge!

    Your design is perfect and responsive as well. I would just like to add small improvement(Edge case):- If a TODO is more than 45 characters long then to see that particular TODO in the list there is horizontal scroll, which makes it hard to read. To fix this you can wrap long characters (>45) into wrap css property, so that it is easily visible without scrolling.

    Also do include a good README in your repo so that your thought process and logic building is clearly understood.

    Hope this helps to further improve your solution.

    Keep Growing! Happy Coding:)

    0
  • Mikhil Desai•200
    @mike15395Posted 4 months ago

    @aysenurtatli Congratulations on completing the challenge!

    Your solution is not responsive for Tablets like iPadMini. Please update your media query dimensions to make it responsive across all devices. Also try to include semantic HTML like <header></header> <main></main> <article></article> in your HTML code so that it is helpful in SEO engines.

    You are very close to the design just make above minor changes.

    Keep learning Keep Growing Happy Coding:)

    0
  • ephraimdjeket•130
    @ephraimdjeketSubmitted 4 months ago
    What challenges did you encounter, and how did you overcome them?

    As I started to develop the card component, I ran into an issue of finding a way to change the desktop image to mobile. I learned a new HTML tag called that allows to change image depending on the window width size.

    Responsive product preview card

    1
    Mikhil Desai•200
    @mike15395Posted 4 months ago

    Hey @ephraimdjeket Congratulations on completing the challenge!

    Your solution looks very perfect. Your code is also very clean and well maintained.

    I just wanted to point out one small bug: While transitioning from 613px to less than 613px, the image of desktop appears for a while then again mobile image appears.(check responsiveness in dev tools chrome) I think this bug is because of using em, try using rem or px, it may fix your bug.

    Keep growing! Happy Coding:)

    Marked as helpful
    0
  • Mikhil Desai•200
    @mike15395Posted 4 months ago

    hey @MonishaThobias Your solution is not responsive. Please make it responsive by making use of media queries. You can learn media queries here.

    Marked as helpful
    0
  • Mikhil Desai•200
    @mike15395Posted 4 months ago

    @ritujha19 Congratulations on completing challenge! You are very close the design.

    Here are few changes which will bring you more close to solution:

    1. CSS for changing colors for lists (both ul and ol)
    ul {
    list-style: none;
}

ol {
list-style: none;
counter-reset: my-counter;
}

ol li{
    counter-increment: my-counter;
}

ol li::before
{
    content: counter(my-counter) ". ";
    color: hsl(14, 45%, 36%);
    margin-right: 1%;
}
ul li::before{
    content: ".         ";
    font-size: 30px;
    margin-right: 1%;
    color: hsl(14, 45%, 36%);
}
    1. Try to make it responsive

    Rest your code is awesome!

    Happy Coding:)

    Marked as helpful
    1
  • Mikhil Desai•200
    @mike15395Posted 4 months ago

    hey @aryanmalik099 Congratulations on completing the challenge! You are very close the design.

    Here are few improvements which can be incorporated easily so that is much closer to design: -inside your css file, increase the padding-top by 2px

    .container ul {
    list-style-type: none;
    display: grid;
    gap: 10px;
    padding-top: 18px;
}
    • inside your css file, set some height to container in percentages like 75%.
    .container {
    background-color: var(--dark-grey);
    max-width: 400px;
    width: 75%;
    height:75%,
    padding: 24px;
    border-radius: 16px;
    text-align: center;
}

    If you make the above changes in your code, your solution will be almost same as design. do let me know if it works well.

    Another thing you missed is proper readme file, please read the read me template and make changes accordingly.

    Rest your code is very clean and properly maintained.

    Keep growing!

    Happy coding:)

    0