Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
29
Comments
30
P
BarrieDirk
@barriedirk

All comments

  • P
    Gwinyai•140
    @gkuzivam
    Submitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    Trying the challenge with Angular

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

    Using Angular and trying to get something close to the mobile design. Lot's of trial and error.

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

    Mobile Design and color schemes, styles guide not too helpful.

    Result Summary Component

    #angular
    1
    P
    BarrieDirk•660
    @barriedirk
    Posted 7 days ago

    Hi,

    The only issue I have with the look and feel is the size of the components, and it's not centered.

    About the code, perhaps, you might use a service to call the data.json and fill the Summary Item using @for or *ngFor (depending of your angular version) and get the average score, and depending on the score, show the correct answer.

    Regards,

  • Arcloan•770
    @Arcloan
    Submitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    Nothing in particular. I should have refactored the code for better modularity and code organization, but for this small project I don't bothered.

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

    The deployment of the app. I don't know why couldn't build the project if in the script tag the path was relative instead of absolute.

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

    Any suggestions are really welcomed. Thank you :)

    pomodoro-app

    #tailwind-css#vite#accessibility
    1
    P
    BarrieDirk•660
    @barriedirk
    Posted 10 days ago

    I have finished my challenge, and frontendmentor redirected me to your project for peer review, but unfortunately, I can't give you any feedback because the link to see the site online is not working, and there is no repository to check the code.

    And, as you know, it's necessary to leave a post to advance to the next step of the learning paths,

    Sorry for bothering you.

  • legaz•480
    @Legaz-le
    Submitted 24 days ago

    galleria-slideshow-site

    #react#tailwind-css#typescript#vite#animation
    1
    P
    BarrieDirk•660
    @barriedirk
    Posted 21 days ago

    Looks great!!

    There are some points that could be improved.

    On the main page:

    • When the desktop size, the gallery section has more margin left.
    • Following the design, the art's title is always visible.

    On the internal page (art), when you play with responsive action, the content is a little moved to the right ( I notice this with 938px with /art/Girl with a Pearl Earring). And when it's 375px, the design needs to adjust a little to look nice on mobile sizes.

    Just in case, perhaps I am wrong, but I think you don't have access to the Figma file. In which file does it indicate the font is "Libre Baskerville"

    Best regards,

    Marked as helpful
  • Omar Ramadan•190
    @oramadn
    Submitted about 2 months ago

    Space Tourism

    #tailwind-css
    1
    P
    BarrieDirk•660
    @barriedirk
    Posted 30 days ago

    Looks great!

    It could be improved in some aspects, such as the menu background when in desktop mode, since the original design is not transparent.

    Regards,

  • Jstickz•330
    @Jstickz
    Submitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    I am most proud of the fact that I was able to learn how Tailwind CSS works with the help of this Project.

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

    First, setting up Tailwind CSS with Vite was not even easy at all. After spending hours trying to figure out how to install it, I could not, so I had to reach out to a friend who helped me with it. So, at the end of the day, I just used the CDN (Content Delivery Network).

    Encountered so many other challenges, as I had to use their website to learn how to write basic CSS styles, but now in Tailwind CSS format.

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

    I really want to learn how to install Tailwind CSS Using Vite...

    Bookmark Landing Page Using Tailwind CSS

    #tailwind-css
    1
    P
    BarrieDirk•660
    @barriedirk
    Posted about 1 month ago

    Looks great!!

    A suggestion could be when it's mobile size and the navigation menu is visible. If the client clicks on any link, hide the navigation.

    Regards,

    Marked as helpful
  • PyaePhyo1999•140
    @PyaePhyo1999
    Submitted about 2 months ago

    Room homepage

    1
    P
    BarrieDirk•660
    @barriedirk
    Posted about 2 months ago

    The animations look great!!

  • P
    LaStellaa•550
    @LaStellaa
    Submitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    It was my first time experimenting BEM, it went fairly well. I am happy with the result overall.

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

    This was a pretty straight-forward design to realize

    Loopstudio landing page

    1
    P
    BarrieDirk•660
    @barriedirk
    Posted about 2 months ago

    Hi,

    This is my opinion:

    • When it is mobile size and the user click on the hamburger, the black background should cover the entire screen with position fixed.

    I assume that you can have access to the Figma file:

    • Following the Figma design, the opacity of the gallery's image must be more white.
    • The "see all" border is not the same as Figma design.
    • When the is desktop size, check the footer, there are some spaces on the left and the right. The footer logo must be should be aligned with the start of the gallery column.

    Regards

  • BuieMariaLuminita•30
    @BuieMariaLuminita
    Submitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    It is my second project and I'm proud because it was much easier to do it, i was more confident. It was easier to make it responsive, and also the page alignment was easier to do, but i still need to work on this. And i try to make it with "em" not "px" , i believe it's more recommended to work with it.

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

    Was the alignment, but now because i have done one project, was easier, and faster to to align the content correctly.

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

    I believe that CSS code could be shorter. :) If there are any problems in my code, please tell me.

    NFT card-Landing page (responsive) using HTML and CSS

    1
    P
    BarrieDirk•660
    @barriedirk
    Posted about 2 months ago

    about px, em, or rem.

    You can use this trick

    html { font-size: 62.5%; }

    It is a CSS unit-scaling trick that makes working with rem units more intuitive for developers.

    Instead of calculating:

    2.4rem = 2.4 × 16px = 38.4px

    You can calculate:

    2.4rem = 24px

    Just in case, it doesn’t affect accessibility if used correctly, only for a developer's convenience.

    Regards,

  • George Olatoyan•1,500
    @Olatoyan
    Submitted almost 2 years ago

    Tic Tac Toe game

    1
    P
    BarrieDirk•660
    @barriedirk
    Posted about 2 months ago

    Looks good, and the animations were great!

  • P
    Coder-Liz•560
    @Coder-Liz
    Submitted 3 months ago

    BMI Calculator

    1
    P
    BarrieDirk•660
    @barriedirk
    Posted 2 months ago

    It looks very nice and clean!

    Some details:

    • When it's desktop size, the logo should be 64x64.

    • You may disagree with me on this point, but I think that input labels should be "label" and not "p".

    • An improvement could be that when the input receives focus, you could make the entire text be selected with event.target.select()

    • Another improvement is to only allow numbers (and decimals if allowed) by adding your own functions for "keydown" and "input" addEventListener to prevent copying and pasting texts into the inputs.

    • Maybe the WAI-aria thing is missing

    I hope this helps.

    Best regards,

    Marked as helpful
  • Marko Stankovic•300
    @Stankovic77
    Submitted 2 months ago

    E-commerce product page

    1
    P
    BarrieDirk•660
    @barriedirk
    Posted 2 months ago

    Looks great! The animations are cool.

    Some suggestions could help to improve the challenger

    • When you open the panel cart to checkout, do not close it, and double-click the main image, the lightbox is on top of the icon cart, and I can't close the cart checkout.

    • When is mobile size, the footer is in the middle of the page.

    • I don't know if you know, you can use type="module" in your <script type="module" src ...></script>, using this, you could split your js code into different files and import the function you need. You can see more information about this

    • https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules
    • https://www.w3schools.com/Js/js_modules.asp

    Regards,

  • Sanya•350
    @Sanya-Zg
    Submitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    Practiced css grid.

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

    No problem

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

    Everything is great.

    Responsive landing page using CSS

    1
    P
    BarrieDirk•660
    @barriedirk
    Posted 2 months ago

    Looks great!!

  • Harold-chn•770
    @chanwinharold
    Submitted 7 months ago

    Contact form

    1
    P
    BarrieDirk•660
    @barriedirk
    Posted 3 months ago

    In my opinion, the look needs to be improved.

    Regards,

  • Moundjid Machghour•440
    @PxMach
    Submitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    I'm proud of the way my code is structured

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

    nothing

    Frontend Mentor | FAQ accordion

    1
    P
    BarrieDirk•660
    @barriedirk
    Posted 3 months ago

    Looks Great!

    Some suggestions could be to use another tag apart from "div" like "article", and try to use the font family mentioned in "style-guided.md" is "Work Sans".

  • Jn Shourov•90
    @NewNameAbrar
    Submitted 7 months ago

    Interactive Rating Component : Responsive

    1
    P
    BarrieDirk•660
    @barriedirk
    Posted 3 months ago

    Looks great!

    Perhaps the comment I can add is that the font family is missing. You can see this in the file "style-guide.md"

  • P
    Aakash Dasgupta•360
    @a-d14
    Submitted 3 months ago

    Quiz Application using HTML, SASS and JS Template Literals

    1
    P
    BarrieDirk•660
    @barriedirk
    Posted 3 months ago

    Very nice effect of the progress bar and the timer. a

    Perhaps the only comment is about the console.log, for testing is good, but for production, it's better to remove.

  • Olabimpe•300
    @Lapupeh
    Submitted 3 months ago
    What specific areas of your project would you like help with?

    All feedbacks are welcome!

    Password Generator App

    1
    P
    BarrieDirk•660
    @barriedirk
    Posted 3 months ago

    Looks Great!

    The only suggestion I can give you is if neither of the checkboxes is checked, indicate this to the user when clicking the button generate.

    Cheers,

  • Erick Rodrigues•660
    @SortJakke
    Submitted 3 months ago

    Tip Calculator with HTML, CSS, and JavaScript

    1
    P
    BarrieDirk•660
    @barriedirk
    Posted 3 months ago

    A suggestion could be only to allow numbers or decimals, no letters. The input uses type="number," which shows spinners. If you follow the design, you will notice that there are no number input spinners.

    The rest looks good. Well done!

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