Skip to content
OverviewSolutions
18
Comments
19
zeegu
@zeegu

All comments

  • Fachrezi•420
    @Fbeye04
    What are you most proud of, and what would you do differently next time?

    I try my best to work on projects like real projects where I really pay attention to every part that I can give special styling. I'm also trying to get used to using tailwind, which I'm still trying to adapt to.

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

    because of the use of tailwind, I have difficulty in reading the css code which is getting longer. I thought that henceforth, some repetitive css code and html will be displayed through javascript.

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

    all parts of html, css, and javascript

    Loopstudios Landing Page

    #tailwind-css
    1
    zeegu•430
    @zeegu

    Woow Beautifully done!🎉

    Really neat and well written tailwind css. Cool, the hover designs are neat too 😄

    You've already done so well, but paying a little more attention to the design layout would be perfect! The width margin of the left and right is slightly different for each of the leader interactive VR/Our Creations/footer areas.

    Happy Coding!

    Marked as helpful
  • zeegu•430
    @zeegu

    Woow Beautifully done!🎉

    It's perfect and clean! The BEM-based naming convention is excellent. It's also neat to use the icon as ::before.

    I have a question🙋‍♂️ Is there a reason why you put the card__price icon as background-image and the card__countdown icon as content?

    I'm also interested in how to put SVG like this! I'd really appreciate it if you could tell me. Have a great day 🤩

    .card__price::before {
  background-image: url("../../images/icon-ethereum.svg");
}
.card__countdown::before {
  content: url("../../images/icon-clock.svg");
}
  • dinixtus•350
    @dinixtus
    What are you most proud of, and what would you do differently next time?

    It is my first intermediate project on FM. I really proud of my JS-code.

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

    There were a lot of problems with pictures and buttons. And i just made a logic code. I used a lot of 'for' and 'if'

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

    I want to change background color for my under-photo when it has .active-img

    E-commerce-product-pag (HTML, CSS, JS)

    #bootstrap
    1
    zeegu•430
    @zeegu

    Beautifully done!🎉 Your code looks great :)

    Here's a little suggestion for a nicer code.

    • If you click the menu button on the mobile screen, it would be nice to have a dark background that dims in the background.
  • alexpeteronoja•280
    @alexpeteronoja
    What are you most proud of, and what would you do differently next time?

    I am proud to complete this challenge

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

    Implementing some stuff in the project

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

    Please reveiw the code and let me know where I need to improve.

    News Homepage Main

    #bootstrap#jquery
    1
    zeegu•430
    @zeegu

    Beautifully done!🎉 Amazing how you write such neat code with react! I'm also studying react, and I wish I could do this well:D

    I think it will be a more awesome site if you could improve a few more things.

    Link to the title

    • There is no link between the article title in the New area and the 01, 02, 03 titles at the bottom.
    • If the mouse changes to the pointer in the hover state and the color changes, the usability will improve

    Mobile spacing

    • On the mobile screen, the left and right spacing of the <New> area appears narrower than other elements
    • This is a detailed design element, but if adjusted, it will look more complete. Adjusting the margin value of the bootstrap or adding container might work.
  • alexpeteronoja•280
    @alexpeteronoja
    What are you most proud of, and what would you do differently next time?

    I learnt a lot about how to use Javascript on forms

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

    I had a little bit of issue figuring out how to use the email validation but I was able to figure it out.

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

    Please review my work and let me know how to improve and follow best practics

    Contact Form Main

    #jquery#bootstrap
    1
    zeegu•430
    @zeegu

    What a nice & clean JavaScript!

    It would be nice to develop the design layout :)

    Why don't you try validation using bootstrap next time? There should be something that can help you in the following link 💪

  • Jye Harry•230
    @jyeharry
    What are you most proud of, and what would you do differently next time?

    This was a fairly simple challenge I felt. It was nice getting to make an accordion using native html components with no javascript though.

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

    None.

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

    No specific areas.

    FAQ Accordion with animation

    #accessibility#post-css#vite#cube-css
    1
    zeegu•430
    @zeegu

    Wooooow, so nice and clean! What an amazing job🤩👍💕

    Looking at github, there are many tools that I've never seen before. I'm curious about your work process!

    How did you write this code without JavaScript? I'd really appreciate it if you could let me know! Thanks :D

  • zeegu•430
    @zeegu

    Beautifully done!🎉

    Here's a little suggestion for a nicer code.

    Simplify show/hide logic

    • classList.add and classList.remove are repeated. How about using classList.toggle? I think the code will be much simpler!

    I'm looking forward to your next challenge. Happy coding :D

  • P
    leeport511•190
    @leeport511
    What are you most proud of, and what would you do differently next time?

    I'm proud of the approach i've this time, i have to understand better JS.

    Tip Calculator App using Js and Sass

    #sass/scss
    1
    zeegu•430
    @zeegu

    Beautifully done!🎉 What a neat file organization! It's amazing that you're organizing SASS folders with global/components. I'll try it next time :D

    Here's a little suggestion for a nicer code.

    Handling negative number case

    • Even if there are negative numbers in the Bill, Select Tip, and Number of People input field, the result comes out. Check out screenshot!
    • When a negative number is entered, it would be much better if there was validation to show the error status.

    Code refactoring

    • There seems to be a lot of logic in one function. How about dividing it by function for convenient maintenance? It would be good for code refactoring :)

    I'm looking forward to your next challenge! Happy coding💪

  • Paradox•350
    @Taresta
    What are you most proud of, and what would you do differently next time?

    Well, there’s nothing to be proud of. I am as happy as ever to have finished another challenge.

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

    Despite facing many challenges along the way, I initially had no idea how I would make everything work out. Thankfully, in the end, it all came together! I've shared a detailed account of my experiences in my README file, as it would take quite a bit of space to cover everything here.

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

    My desktop design is nearly identical. However, I did have trouble making the name "Jeremy Robson" appear in two lines instead of one. What would be the simplest way to do this? Also, please let me know if there are any areas of improvement in my SASS and Javascript.

    Time-tracking-dashboard

    #sass/scss
    1
    zeegu•430
    @zeegu

    Beautifully done!🎉

    Handling codes a lot with JS while keeping your HTML & CSS simple is really cool! I never thought about adding svg icons case by case by JS, I think that's a good idea👍

    Here's a little suggestion for a nicer code.

    Code refactoring

    • Converting button text to lowercase .toLowerCase() would be good for refactoring your code, since there's a bit of duplication. Check the code below!
    const handleView = (e) => {
    handleButtonStyle(e);
    const timeframe = e.target.textContent.toLowerCase(); 
    populateDOM(data, timeframe);
};
  • zeegu•430
    @zeegu

    Beautifully done!🎉

    I think the quality will be much better with a little touch.

    On the responsive screen of the desktop version, the image becomes smaller than the container. Try this!

    @media (min-width: 50rem) {
    .signUpForm__picture {
    width: auto; /*Changing to 100% will solve the problem*/
    }
}

    I'm looking forward to your next challenge. Happy coding :D

    Marked as helpful
  • zeegu•430
    @zeegu

    Beautifully done! 🤩

    Like the smooth transition of the responsive layouts. I'm looking forward to your next challenge:D

    Marked as helpful
  • Uche Ofatu•350
    @Macnelson9
    What are you most proud of, and what would you do differently next time?

    I am most proud of myself for completing this challenge.

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

    I encountered a challenge with arranging the image and the text side by side dynamically.

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

    I'd like help with the UI.

    Article-preview-component

    2
    zeegu•430
    @zeegu

    Great job!

    Image size change

    • Img.drawers keeps changing depending on screen size. How about setting a fixed width&height instead of 100%?

    Share icon

    • I recommend adding svg as child element of <div class = "backgroundshare2"> .
    <div class = "backgroundshare2">
   <img src="./images/icon-share.svg" class="share" alt="Share">
</div>
    • And then adding CSS element makes it easier to handle.
    .backgroundshare2{
  border-radius: 100%;
  display: grid;
  place-content: center;
}
    • If you want to change the color of share icon, try this instead of <img>
    <svg xmlns="http://www.w3.org/2000/svg" width="15" height="13">
  <path
  d="M15 6.495L8.766.014V3.88H7.441C3.33 3.88 0 7.039 0 10.936v2.049l.589-.612C2.59 10.294 5.422 9.11 8.39 9.11h.375v3.867L15 6.495z"></path>
</svg>
    • And then add CSS. 'fill:' would control the svg fill color.
    .backgroundshare2{
 background-color: var(--LightGrayishBlue);
 fill: var(--VeryDarkGrayishBlue);
}
    Marked as helpful
  • EDWINTOAPANTA02•120
    @EDWINTOAPANTA02
    What are you most proud of, and what would you do differently next time?

    I am proud to continue learning grid. It is a challenge that I set myself and I am fulfilling it at my own pace.

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

    The challenges I encountered were that when I set the dimensions on one computer I do it right but I change the design to another computer and everything moves. Even if I use rem, em % it keeps getting misconfigured. If you can see my code I would appreciate it if you could help me by explaining the errors I have.

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

    The challenges I encountered were that when I set the dimensions on one computer I do it right but I change the design to another computer and everything moves. Even if I use rem, em % it keeps getting misconfigured. If you can see my code I would appreciate it if you could help me by explaining the errors I have.

    testimonials grid

    1
    zeegu•430
    @zeegu

    That's a great job!👏

    It seems there's a problem with your mobile layout. The code written in <main> seems to be the cause of problem

    grid-template-columns: repeat(4,1fr);
grid-template-rows: repeat(2,1fr);

    Media query doesn't work with just changing display to flex. Try deleting above line on.

    I hope it works out!

  • zeegu•430
    @zeegu

    Great job!

    It would be nice to add a step between the desktop and mobile versions where the card layout changes to 2/2 :D

    Marked as helpful
  • zeegu•430
    @zeegu

    Nicely Done! Amazing to see details of the original design 👏

    It would be much better to make the layout suitable for the mobile responsive layout :D

  • zeegu•430
    @zeegu

    Great work! I think it'll be much closer to the design with a few more tweaks.

    Mobile layout

    • Change the margin value of the <main> area from auto to 0 on the mobile screen, it will fit tight on the screen. main { margin: 0; }

    Apply correct color code to style guide

    • If you specify --root at the top of css, you can easily apply and modify colors
    :root {
  --white: hsl(0, 0%, 100%);
  --stone100: hsl(30, 54%, 90%);
  --brown800: hsl(14, 45%, 36%);
}
    Marked as helpful
  • zeegu•430
    @zeegu

    Great work! To follow the design in more detail, there's not enough space at the bottom of the card, so it would be nice to give more space :)

  • P
    Daniel Tefe•90
    @awaritefe
    What are you most proud of, and what would you do differently next time?

    Speed at which i got it built

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

    Nothing challenging tbh

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

    Any feedback on improving my build quality

    blog-preview-card-main

    1
    zeegu•430
    @zeegu

    It's a great detailed job! The code is neatly organized and easy to read. I'm looking forward to the next one.