Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
14
Comments
19
ebenkanin
@ebenkanin

All comments

  • Danielle Evans•70
    @daniellemevans1
    Submitted 1 day ago
    What are you most proud of, and what would you do differently next time?

    I used CSS Transitions, I discovered Merge vs Rebase with Git repositories, and did a Rebase. And learned of the value attribute of an HTML button.

    When changes are made to a remote Git repository, as soon as that's done, it must be pulled to the local repository. Otherwise if you make changes to the local repository you'll receive error messages and have merge discrepancies. And changes to your files must be accepted manually.

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

    Making it so one page is visible and another is hidden, until the user clicks the submit button. Choosing between using radio buttons and making them look like buttons, vs using buttons and making them act like radio buttons. I chose to use buttons. I reviewed box shadow and the third parameter blur effect. I also discovered the HTML DOM element classList, the HTML DOM element getAttribute(), and reviewed null and undefined and that they are false values. The difference between hover and focus.

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

    I'd like feedback on the JavaScript, as well as the HTML and the using buttons instead of radio buttons. I'd also like to be more familiar with Flexbox.

    Interactive Rating Component using CSS Grid

    2
    ebenkanin•370
    @ebenkanin
    Posted 1 day ago

    Hi Danielle,

    concerning the use of buttons, i also used buttons in mine. i found out about the data attribute and figured it was more convenient using that over radio buttons and figuring out how to style them when i could just do a border radius : 50%; and get my rounded button. So kudos to you for your use of buttons and it's very normal too for user experience. You are indeed sending information so using a button would be par for the course.

    Keep going and you can only get better with time.

    Marked as helpful
  • Polariz625•220
    @Polariz625
    Submitted 2 days ago
    What specific areas of your project would you like help with?

    this is my first challenge using JavaScript, any feedback or advice would be highly appreciated. Also, sorry for the Spanish comments in the JavaScript code xdddd

    interactive-rating-component-main

    2
    ebenkanin•370
    @ebenkanin
    Posted 2 days ago

    Hello Polariz625,

    well done on completing this challenge. Using javascript successfully in a program for the first time is a really nice feeling. Just a little observation.

    Anytime a user sends a score, an alert telling the user that the scores are being sent runs before the success message. I;m guessing you either wanted to check if the submit button was working or you want to implement a notification function that says "scores are being sent". Either way, the alert is currently not allowing the user to see the thank you notification as soon as they click submit so i'll suggest you comment it out for a better user experience.

    Keep going!

  • P
    Michael•180
    @Networksentinel
    Submitted 17 days ago
    What are you most proud of, and what would you do differently next time?

    This was the first project where I finally got to use Tailwind—and more importantly, JavaScript!

    Tailwind really impressed me. It saves a ton of time, and if you're already comfortable with vanilla CSS, the transition is super smooth. You don’t have to switch between your HTML and CSS files all the time—just apply utility classes and focus on layout, styling, and fine-tuning the design.

    I also got to put my basic JavaScript knowledge into action. I used variables, functions, if...else, addEventListener, and some DOM manipulation. It felt great to build the interactivity I needed without running into major issues. Even though it’s just beginner-level stuff, it was really satisfying to see it all work!

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

    I wouldn’t call them full-on challenges, but I definitely needed some time to get used to working with Tailwind CSS—especially figuring out how to apply classes efficiently while keeping the HTML readable. It also took a bit to learn how to customize Tailwind classes when the default values weren’t quite what I needed, which was important for getting things pixel-perfect in a project like this.

    To get past that, I watched a few basic Tailwind tutorials, referred to the official docs, and regularly used this CHEAT SHEET. That combo really helped me get comfortable with the workflow.

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

    I’d really appreciate if someone could take a look at how I used Tailwind CSS and give me some feedback on how to keep it clean and readable. I tried to stay organized using comments, spacing, and indentation, but I’d love to pick up good habits early on and make sure I’m heading in the right direction.

    Tailwind + JS? No problem - my take on the "Article Preview Component"

    #vite#tailwind-css
    1
    ebenkanin•370
    @ebenkanin
    Posted 17 days ago

    Hi there! Congratulations on completing this challenge.loved your use of tailwind css for this. I have never built using vite. I always use the tailwind cli . it allows you to even clean up the classes nicely by packing recurring sets of classes you maybe using in each section into one class and just using it throughout. Do look into it when you have the time in the official tailwind documentation. It's under custom classes. Cheers to a good job done

    Marked as helpful
  • abu-baasit•100
    @abu-baasit
    Submitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    improvement on learning new things

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

    styling of bullet points and numbers and style of nutrition table

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

    probably another way or method to style the nutrition tableto style

    customize page using flexbox

    1
    ebenkanin•370
    @ebenkanin
    Posted about 2 months ago

    Hi Abu,

    Well done on completing this project. Concerning your styling of Tables, i noticed all the data in the calories column were boldened. Going forward, do consider structuring your code like this.

    <table> <thead> <tr> <th>Calories</th> <th>270kcal</th> </tr> </thead> <tbody> <tr> <td>Carbs</td> <td>10mg</td> </tr> </tbody> </table> the table usually has a table head(where your column headings go) and the body(where the data goes). This ensures only the column headings are boldened and is more semantically pleasing. i have included a link to a Dave gray video on tables in html. I think this should help you get better at building and styling your tables in future.

    https://youtu.be/mJgBOIoGihA?t=8681

    Good luck and keep going!

    Marked as helpful
  • DayaA•130
    @Aishaakin
    Submitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    This is my first challenge after taking about 8 months break from web development learning because I switched into Cybersecurity. I still want to stay in Cybersecurity but as I am in the period of my school IT (6 months ),I am learning frontend. It took time for me to finish this challenge as I have forgotten most of the concept because it was Node.js, I stopped before the break.

    What challenges did you encounter, and how did you overcome them?
    1. I didn't know how to use flexbox and grid properly and I would love someone to suggest a platform where I can fully understand it excluding w3school.com but a friend helped me out in this project by explain how it was used.

    Responsive Landing Page Using CSS Flexbox And Grid

    1
    ebenkanin•370
    @ebenkanin
    Posted about 2 months ago

    Hi Daya,

    for flexbox, i suggest you visit flexboxfroggy.com . It's a great resource for learning flex box. i actually found it really useful when i began learning about the flex property.

    Well done on the challenge though. Keep it up

    Marked as helpful
  • Kelly McLaughlin•10
    @CodeKellyCat
    Submitted about 2 months ago
    What specific areas of your project would you like help with?
    • Did I use best practices?
    • How would you make the CSS more efficient?

    Recipe Page Built with HTML & CSS (Mobile-First Approach)

    1
    ebenkanin•370
    @ebenkanin
    Posted about 2 months ago

    Hi Kelly,

    Great job completing this challenge. Congratulations. I went through your code and realized for your table, you put the headings in a normal <tr> and <td> tags. In future, do consider wrapping your table headings up in a <thead> tag to adhere more to html semantics since they are column names. something like this should work out nicely.

    <thead> <tr> <th>Calories</th> <th>277kcal</th> </tr> </thead>

    Overall, well done and keep going!

  • fa23bcs233•230
    @fa23bcs233
    Submitted 2 months ago

    FAQs Component

    1
    ebenkanin•370
    @ebenkanin
    Posted 2 months ago

    Hello there,

    Great job completing this challenge. I particularly loved the sizing on both large and small screens. I also loved the bit where the open faq is closed before clicked question opens. That's really cool. wish i had thought about that for my own submission. I did realize though that you can't close a question by clicking on the retract button after it has been opened. I suggest you include a condition in your loop function that checks if the faq is open so it closes and if closed, open. Keep going!

    Marked as helpful
  • DangoDono•110
    @CodingDango
    Submitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    Proud of the organization of my CSS and the maintainability of it, keeping the sections of for each class separated. And the semantics of the HTML.

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

    Lots and lots of headbanging. wondering why my main content wouldn't center, playing around with the CSS.

    And the semantics of the HTML. I finished it firstly on my own. and asked AI what was wrong with the semantics. I got lots wrong, but now i am left with more understanding on the why.

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

    Im satisfied with the project. I think it doesn't need anymore tinkering and help. I just dont see any areas. its not perfect by any means but just good enough for me. but feedback is still appreciaited.

    Responsive Social Links Profile

    #accessibility
    1
    ebenkanin•370
    @ebenkanin
    Posted 2 months ago

    Hi there,

    Congratulations on completing this project. I loved the transitions you included in your work. Concerning the issue of centering divs and stuff, it's a classic struggle for all of us beginners. I'll advise that you familiarize yourself with flex box and grid system. Honestly, it will save you a ton. I recommend using flexbox froggy to help you in this regard. This is the link. flexboxfroggy.com Do look it up and try your hands at it.

    Great job and keep going!

    Marked as helpful
  • Anoushzad•10
    @Piexar
    Submitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    i gotta practice flexbox more, and grid. and i have to get used of media queries in case if i didnt use a flexbox display it was fun, i first completely did write it myself

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

    only one place i had problem which was social links. i did put down a main div, then 5 divs and inside each these 5 div's i did put a or link, which was wrong, last i asked chat gpt to tell me where i did wrong and ai said that u should do nav -> a not like that im learning this is finished one, and the animations like transform box shadow and transition i did them myself no help of ai, it took me 1hour 45 min which is a lot, and i try my best to reduce this time <3

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

    rn nothing, but i gotta go watch some youtube about where nav, section and div get used. <3

    i used html css and a little bit of js, totally raw, no library used

    1
    ebenkanin•370
    @ebenkanin
    Posted 3 months ago

    Hey man, good job on this one! I am glad you stated in your feedback that you kept exploring different ways of doing the links with chatgpt too. In future, you can also include just the links with the anchor tag<a href=""></a> and style them by giving it padding on the top, bottom, left and right. You would still be able to give it a background color upon hovering over it with the cursor too.

    Overall, great work! Keep going.

    Marked as helpful
  • Gilang Ardian•40
    @gilangxardiian
    Submitted 3 months ago

    Recipe Page Main using HTML and CSS

    1
    ebenkanin•370
    @ebenkanin
    Posted 3 months ago

    Hi Gilang,

    Great work on the project. Very well done. It is very clean and looks really great. I have a little suggestion for you concerning tables. When including a table in future, do consider using <thead> for the headings instead of a normal <tr> and <td> tags. I think that would be semantically better. keep going!

  • P
    Monika•180
    @monika-webdeveloper
    Submitted 3 months ago

    Responsive page using HTML & CSS

    1
    ebenkanin•370
    @ebenkanin
    Posted 3 months ago

    love your solution. so cleanly done!

  • Leslie Bagalho•90
    @lesliebagalho
    Submitted 4 months ago

    Pagina em CSS

    #accessibility
    1
    ebenkanin•370
    @ebenkanin
    Posted 4 months ago

    Hi Leslie, well done on submitting your solution. A few things i feel you could do to improve your solution.

    First off, look into using hover: or pseudo classes. They will help you give different colors to your links when a user hovers over them.

    Secondly, the links are supposed to lead somewhere so putting paragraphs in divs won't exactly cut it. Going forward, do look into using anchor tags. Eg <a href="#">Linkedin</> to help you render links appropriately.

    The next one would be the typography. To get the correct typography, search for the font stated in the readme on font.google and embed that in the head of your code. Then you can use it to give your work a better looking font instead of the default.

    Overall, good work and congratulations on your work.

    Marked as helpful
  • Michaeldremy•40
    @Michaeldremy
    Submitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    I am getting better are reading the Figma designs. This provides insight into card sizes and padding as well as the exact font sizes, line height etc...

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

    I was struggling for a while figuring out how to add margin around the card since it had a box shadow and I learned that box shadow + margin don't respect each other, therefore I had to add additional margin on the box shadow side.

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

    I created a class called "card-container" and put it on the main HTML element. Would it be better to create a div or section and give it a class rather then adding that class on the main tag?

    I added the colors to the :root of the CSS file for reusability. What is the proper way to do it for font-family or font-weights?

    Basically how can I improve reusability using CSS variables?

    CSS Flexbox + Figma Design - Blog Preview Card

    3
    ebenkanin•370
    @ebenkanin
    Posted 7 months ago

    Great job! Everything seems to have been done perfectly. Keep it up! I learned what to put in the main tag from your code. I always wondered where i'd put the main tag in a component like this. I'm glad i found my answer in your code.

  • Amr-Atef-k•30
    @Amr-Atef-k
    Submitted 10 months ago

    I'm struggling with the padding and div spacing, please look at my css

    2
    ebenkanin•370
    @ebenkanin
    Posted 10 months ago

    Hello Amr,

    At first glance, i could see you did not specify a font style to be used. This made your work use the default font style of the user's computer. Do look into specifying font style properties especially when defining the rule for the body of your work. The font for this particular challenge was Figtree and it is easily accessed from fonts.google.com.

    In your next project, do log on to that website, search for the font and import it into your work. click on your selection and then import it by copying the import code and placing the links in the head of your html and using this rule in your css.

    // <uniquifier>: Use a unique and descriptive class name // <weight>: Use a value from 300 to 900

    .figtree-<uniquifier> { font-family: "Figtree", system-ui; font-optical-sizing: auto; font-weight: <weight>; font-style: normal; }

    Good job! Keep it up

    Marked as helpful
  • Hoang Nghiem Dac•30
    @Ha0n9
    Submitted 10 months ago
    What are you most proud of, and what would you do differently next time?

    I have added animation when you click the card, you can try if you want

    Blog Card solution

    2
    ebenkanin•370
    @ebenkanin
    Posted 10 months ago

    Hi Hoang,

    Loved your solution, especially the bit where the header changes color when you mouse over it. I wish i'd thought about that in my solution. Why did you decide to do it that way though? If it were a button or a link, that'd be very self explanatory but i would love to know if this is a new UI/UX practice.

  • Hoang Nghiem Dac•30
    @Ha0n9
    Submitted 10 months ago
    What are you most proud of, and what would you do differently next time?

    I have added animation when you click the card, you can try if you want

    Blog Card solution

    2
    ebenkanin•370
    @ebenkanin
    Posted 10 months ago

    Hi Hoang,

    Loved your solution, especially the bit where the header changes color when you mouse over it. I wish i'd thought about that in my solution. Why did you decide to do it that way though? If it were a button or a link, that'd be very self explanatory but i would love to know if this is a new UI/UX practice.

  • Ademola Adewole•220
    @adewoleademola
    Submitted 10 months ago
    What are you most proud of, and what would you do differently next time?

    How i did my blog Perfectly

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

    none

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

    none

    Blog Preview Card With HTML and CSS

    1
    ebenkanin•370
    @ebenkanin
    Posted 10 months ago

    Hi Ade, The font weight for your "Learning" made the lettering quite illegible. Do consider using a little lighter font weight. I was curious, why didn't you use a button instead?

    Overall, good job!

  • Ashum91•50
    @Ashum91
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    I am prod of bring able to achieve a similar look to what was required.

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

    One of the challenges I faced was not being able to round the edges of the boxes and also being able to centre the container and make it smaller.

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

    Trying to figure out if I am using the @media queries correctly. I struggled to see what other information I needed to add. Also as mentioned above in regards to the rounding the edges of the boxes and making the container centre.

    Social Links

    2
    ebenkanin•370
    @ebenkanin
    Posted about 1 year ago

    Hi Ashum91, as Daniel has already pointed out, kindly look into studying the concept of flexbox. It will really solve your headache of centering items. But overall, it's an amazing job. Keep it up.

    Marked as helpful
Frontend Mentor logo

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

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