Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
9
Comments
9

antoni0kim

@antoni0kim190 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

  • Newsletter Sign Up Solution


    antoni0kim•190
    Submitted 30 days ago

    I would like some feed back on setting success message on the website. I'm not sure whether setting the spacing manually on both desktop and mobile was a good idea.


    1 comment
  • Article preview component solution


    antoni0kim•190
    Submitted about 1 month ago

    I would like help on adding triangle on top of share button in desktop, along with image. The image doesn't seem right to me and should be cropped out more than what is currently being shown. I'd also like some feedback on animation, which I do not know whether if ease-in is the correct way to do so.


    1 comment
  • Testimonial grid section solution


    antoni0kim•190
    Submitted about 1 month ago

    I honestly wasn't too pleased with the solution. Although in macro view it looks okay, but as I'm going through this journey of frontend, I'm beginning to notice smaller things, and because of that it's bothering me very much! For example, I think the sizing of the card is little off, and my guess is that because I don't have the figma file and guessing the sizing via screenshot, the dimensions of the cards and the text inside it is not placed properly. The shadow also doesn't seem as the example, and I've decided it wasn't worth chasing the exact shadow at this point. Font color was something I kept back and forth, because sometimes the image looks grey, but other times it looks white. I've decided to just stick with what I have instead of trying find everything to be perfect.


    1 comment
  • Four-card feature section solution


    antoni0kim•190
    Submitted about 1 month ago

    Because Figma was not provided, I had to eyeball the solution with the width and size of the card, so I would like some feedback on the dimensions. I'm also not sure if the breakpoint between mobile and desktop was done correctly; I decided that having 70rem of 15px was probably a good breakpoint, but if there's a suggestion as to how to go about this, I would like your advice on it.

    The container display for flexbox also felt bit repetitive and I think there could've been better way to do this, but I decided to go with what works first, and optimize later. Now that I look back, it could've been just div class with "column" and modify all of them at the same time instead of repeating each of them individually.

    I also don't think the shadow was done properly. I'm not sure how I can measure the shadow in the example and try to mimic the effect since there are many variables in play here.


    1 comment
  • Product preview card component solution


    antoni0kim•190
    Submitted about 1 month ago

    I had the most difficulty of sizing the product card on the desktop view. Since I didn't have Figma, I wasn't sure whether to set the product card dimensions fixed, or whether to make it resizable based on the width of the screen. In the end, because I didn't wanted to have the product to stretch out on the larger screen, I decided to keep it fixed and eyeball the size of the product card. I'm not sure if this is the right approach, and if there's alternative approach to this, I would like your feedback on this part.


    1 comment
  • Simple Omelette Recipe Solution


    antoni0kim•190
    Submitted about 1 month ago

    I think because it was my first time resetting margin and padding, I may have added too many paddings and margins on some of the elements.

    The assignment also specify only two views, and hence the height of article was set manually for desktop/pc. However, when testing on different sizes, it looks like the images is being cut off. I'm not sure the best way to approach this at the moment.


    1 comment
View more solutions

Latest comments

  • esteban-eyeride•80
    @esteban-eyeride
    Submitted 30 days ago
    What are you most proud of, and what would you do differently next time?

    I have never done form validation before, i liked how it turned out. I would probably try to use a validation API next time.

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

    i was struggling a bit with having the main image change depending of screen size. I ended up learning about the HTML Picture tag, which let me use different image sources for different sizes in 1 tag.

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

    Just general readability of my code, still don't know if people would think it's organized a t a glance. Would like to know opinions.

    Newsletter Signup using flexbox

    1
    antoni0kim•190
    @antoni0kim
    Posted 30 days ago

    Really well done with the UI. I think you really nailed the layout and responsive of the website. I would add few recommendation to the JavaScript portion.

    1. There's an error with line 18 of your code
    if (typeof email ==! "string" || email === "")
    

    This should be "!==" instead of "==!", which has different meaning, "typeof email == (!"string")" so even if the email is a string, this condition may evaluate incorrectly.

    1. The error logic has few issues. For example, what if the user doesn't provide domain, such as "test@example"? Or what if there are few more @ symbol inside? If you do decide to implement your own, I do suggest having a look at regex, that could help you validate the emails.

    On the organization of css, you could add comments to separate your sections to make it more readable. Comments like /* Container */ to separate each major components of the CSS.

    Marked as helpful
  • JAMES MWAURA•10
    @MWASMWAURA
    Submitted about 1 month ago

    Responsive layout using CSS Flex

    1
    antoni0kim•190
    @antoni0kim
    Posted about 1 month ago

    Great job on the design, but the behaviour on desktop and mobile isn't exactly implemented. On the desktop, there seems to be missing an arrow below the share list, and on mobile there seems to be none of the share links.

  • EbrahimMatter•90
    @EbrahimMatter
    Submitted about 1 month ago

    testimonials-grid-section-main

    1
    antoni0kim•190
    @antoni0kim
    Posted about 1 month ago

    Hey really good job on the design, I think you nailed it. You forgot to add the quotation image inside the first card, but other than that I think you got the whole design correctly.

    One thing that I noticed that you added react as the tool, but looking at your source code there isn't any JavaScript nor React at all, just html and css. Is there something that I'm missing here?

  • Odavid66•60
    @Odavid66
    Submitted about 1 month ago
    What are you most proud of, and what would you do differently next time?

    I WAS ABLE TO REDUCE THE AMOUNT OF MEDIA QUERIES, UNLIKE THE LAST TIME BUT I WOULD LIKE TO SPEND LESS TIME AND ALSO MAKE IT TO SCALE

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

    A LOT LIKE MAKING IT WRAP AND MAINTAINING THE DESIGN

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

    ANY WHERE ANY ONE SEES I CAN IMPROVE CAUSE I NEED TO

    FOUR-CARD-FEATURE-SECTION-MASTER

    1
    antoni0kim•190
    @antoni0kim
    Posted about 1 month ago

    The header font size could be more proportional to other items in the webpage. You've also noted that you wrote this in React, however, there are no JavaScript nor any React in the solution, just HTML and CSS. You used #container and .container in your CSS, and I suggest not doing this, and instead have more meaningful name for classes and ids

    Marked as helpful
  • P
    Elvia•50
    @ElviaG35
    Submitted about 1 month ago

    Responsive product preview using html and css

    2
    antoni0kim•190
    @antoni0kim
    Posted about 1 month ago

    Few minor issues here: the font on h1 and price should be in Fraunces font, instead of the default Montserrat. Font size should also be 14px as per style instruction, instead of default browser size of 16px.

    I also checked the mobile version of the website and it doesn't seem to be fitting properly. For example, the button at the bottom of the product card seems to be touching the edge and there seems to be no padding in between. The border-radius has not been changed on the mobile site for the image as well, and the image at the top is flat. I see that other than setting which image to display, and flex direction, no changes had been added for desktop.

    I believe you added React as your approach in this solution, but checking your code there doesn't seem to be any React, but only html and css. Try adding more semantic tags to html. Interesting choice of using @import in css to bring in fonts. Consider using html instead of css to import the font; the performance will improve if the fonts are imported in html instead of css.

    Marked as helpful
  • P
    Liam Vickerstaff•220
    @LiamVickerstaff
    Submitted about 1 month ago
    What are you most proud of, and what would you do differently next time?

    I'm proud of how I paid more attention to using semantic html and how closely I tried to get the solution to match the design.

    Next time I would try to rely less on help to finish the solution. This time I think I got about 75% on my own so next time I'd like to be able to make everything by relying on my own knowledge and experience.

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

    I had a difficult time with the bullet point stylings of the <ul> and <ol> list items.

    It wasn't possible to create spacing between bullet points like in the design through simple css styling, so I had to learn a new method... You can remove the original bullet points created by html with list-style: none, and add new bullet points with ::before in css and add content: '•'. This way you can handle the spacing and styling with more freedom.

    Another fun new thing was the <hr /> element which I didn't know about previously. But a very quick and useful line break that you can use by giving it a {border: none; height: 1px; background-color: brown}. This gives you a nice horizontal line to work with that breaks up sections. Super neat.

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

    One issue I had was the nutrition table at the bottom of the page. I originally tried to use <table> but found it to be more difficult than using a simple grid. Not sure if it was a good solution but it just made more sense to me. So my question is for any one that would personally choose a <table> over a grid layout:

    1. How would you think about splitting up the contents of the table
    2. How would you apply all the spacings in the table
    3. How would you style the row gaps to have a colored line.

    Thanks for your help!

    Responsive Recipe Page - Vite

    1
    antoni0kim•190
    @antoni0kim
    Posted about 1 month ago

    Hey awesome solution to the project. I think you really nailed it and did a great job. I can only add and answer your questions about using the table, since that's how I did the project.

    1. I also had issues with lining up the table row and columns, but also adding spacing in between. What I didn't realize is that there are issues with default settings on many of the browsers, so it's best if you start with the following settings:
    table {
      table-layout: fixed;
      border-collapse: collapse;
    }
    

    For reference, see this from Mozilla's tutorial website for more information.

    1. The reference above mentions how default spacings are added between rows and columns, and you want to modify that yourself instead of letting user agent do that for you. Thus, for this specific project, I added padding between the <td> elements like this:
    td {
      padding: 1rem 2rem;
    }
    
    1. Styling was done by modifying the <tr> elements and adding border. However, if you look at the solution, the bottom row does not have a colored line, so you would need to use pseudo-element to select all the rows except for the last line. This is how I did it:
    tr:not(:last-child) {
      border-bottom: 0.1rem solid hsl(30, 18%, 87%);
    }
    

    If you're wondering what pseudo-elements are classes are, Mozilla also has reference explaining what they are. The styling of the table is also explained on the first reference.

    Hope this helps!

    Marked as helpful
View more comments

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub