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

Andi Fachriansyah Dwipangga

@fachridpIndonesia710 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

  • Todo App

    #react#tailwind-css#vite

    Andi Fachriansyah Dwipangga•710
    Submitted 10 months ago

    0 comments
  • Multi step form

    #react#tailwind-css#vite

    Andi Fachriansyah Dwipangga•710
    Submitted 11 months ago

    0 comments
  • Interactive Comments Section

    #react#tailwind-css#vite

    Andi Fachriansyah Dwipangga•710
    Submitted 11 months ago

    0 comments
  • Job Listing with Filtering

    #animation#react#tailwind-css#vite

    Andi Fachriansyah Dwipangga•710
    Submitted 12 months ago

    0 comments
  • Space Tourism Multipage Website

    #react#react-router#tailwind-css#animation

    Andi Fachriansyah Dwipangga•710
    Submitted 12 months ago

    1 comment
  • Rest-countries-api-with-color-theme-switcher-master

    #react#tailwind-css#react-router

    Andi Fachriansyah Dwipangga•710
    Submitted 12 months ago

    0 comments
View more solutions

Latest comments

  • Shinacrypt•60
    @Sodiq-faruq
    Submitted 11 months ago
    What are you most proud of, and what would you do differently next time?

    I am able to get the value a user enter to my form i'm very proud of that

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

    Funny i do not remember how to center a div😂, just a little google search.

    Newsletter

    1
    Andi Fachriansyah Dwipangga•710
    @fachridp
    Posted 11 months ago

    So how do you make that div to the center?😂

  • youssefcharfeddine•110
    @youssefcharfeddine
    Submitted 11 months ago
    What are you most proud of, and what would you do differently next time?

    i'm proud that my skills in html and css are getting better i still have a little trouble in responsive web desgin but i will work for it ..

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

    everything especially responsive web desgin and thanks ...

    product-preview-card-component-main

    1
    Andi Fachriansyah Dwipangga•710
    @fachridp
    Posted 11 months ago

    Hey mate, you have done a great job on this challenge, almost perfect tho, but there is ain't perfect in this world hehe.

    Here's some advice from me based on what i'm see :

    1. Let's start from your html structure. Try to implement a semantic HTML from now on (You can read from this article: Semantic HTML or other resource with semantic html topic ).
    2. I see you gave your element like this div class="Main". You don't have to write like that, you can write <main></main> instead. Read the article that i give you to understand about semantic html and try to implement them from now on.
    3. Put your <img /> tag inside a div.
    4. You must give your html elements with make sanse classes.
    5. In your text0 class, you should not do like this P E R F U M, but give him style property namely letter-spacing: your_value_here instead.
    6. Give a style property line-height : your_value_here to your text2 class, to give those line paragraph spacing with vertical axis (up to bottom).
    7. I'm not see your bacground-color: white when i resize my browser to mobile screens.

    And i think that's it from now. Hope you doing well in your next challenge and have a nice day mate.

    Marked as helpful
  • Reem•40
    @reemoon-ctrl
    Submitted 11 months ago

    social-links-profile-mainhttps://medium.com/frontend-mentor/a-complete

    1
    Andi Fachriansyah Dwipangga•710
    @fachridp
    Posted 11 months ago

    Did you have any difficulties in making this challenge?

  • Enriek Naldo Patera•20
    @EnriekNP
    Submitted 11 months ago
    What are you most proud of, and what would you do differently next time?

    What I am most proud of in this project is that I finally mastered using both Grid and Flexbox to create a layout. Prior to this, I had never used Grid and Flexbox for layout design. Achieving this is truly an exciting milestone for me.

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

    One of the challenges I encountered was positioning the modal (newsletter/success) in the center of the layout using Grid. Initially, I struggled to center the modal. However, I discovered that using align-content: center;, justify-content: center;, and justify-items: center; solved the problem and perfectly centered the modal.

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

    If possible, please review my CSS. I am a complete beginner when it comes to CSS; previously, I was only taught to use it in a way that worked for desktop layouts without considering responsiveness. Please teach me the best practices in CSS if there are areas that need improvement.

    Mobile-first solution using CSS Grid and Flexbox

    1
    Andi Fachriansyah Dwipangga•710
    @fachridp
    Posted 11 months ago
    1. First of all, you can start from now on compiling your html tags with the semantic HTML format and you can find it on google, on youtube or on MDN Web Docs. Because this is very vital in a web so you have to start from now learning it and implementing it from now on.
    2. You can remove the default padding and margin from the browser by adding styles to *, *::before, *::after of the form padding: 0 and margin: 0.
    3. Give margins for the vertical and horizontal axes so that the newslatter-modal class does not stick to the side of the browser when on mobile screen.
    4. For desktop screen size it looks good, but for mobile size there is still something you have to add which is margin. Add it to your media queries.
    5. Likewise with the success-modal class, provide margins for the vertical and horizontal axes at mobile screen. Add it to your media queries as well.

    But you've done your best, the rest is to stay consistent and keep practicing by doing small challenge projects (don't watch too many tutorials without hands-on experience) first from this website or from other websites or from other sources. Have a nice day mate! 😊

    Marked as helpful
  • P
    Julien Gilbert•570
    @juliengDev
    Submitted 12 months ago
    What are you most proud of, and what would you do differently next time?

    Reflecting on the project, I am particularly pleased with how I implemented responsive design principles to ensure the product preview card component functions seamlessly across diverse devices. This involved using flexible layouts and media queries to adapt the interface from mobile screens to larger desktop displays, enhancing user accessibility and interaction.

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

    One of the main challenges I faced was mastering the element for loading different-sized images based on media queries, requiring focused learning and experimentation to integrate effectively into the project.

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

    I don’t need help with any specific areas of my project at the moment.

    Product-Preview-Card-Component Public HTML-CSS-BEM-SASS-RESPONSIVE

    #sass/scss
    1
    Andi Fachriansyah Dwipangga•710
    @fachridp
    Posted 12 months ago
    1. You can add style property flex-wrap: wrap to card__body__price to prevent card__body__price__full from escaping the card__body container if the browser width is reduced.
    2. Avoid using fix values for html elements. If you want to display a different size for each screen size, you can use the max-width or calc() method in it to get better results (watching tutorials on youtube about it will help you a lot later).

    But you've done a great job, keep learning and practicing by continuing to work on new projects to improve your frontend developer skills.

    Marked as helpful
  • ARIF CAHYO PRASETYO•40
    @ARIFCAHYO09
    Submitted over 2 years ago

    bs5 jquery form val ping-single-column-coming-soon-page

    #bootstrap#jquery
    1
    Andi Fachriansyah Dwipangga•710
    @fachridp
    Posted over 2 years ago

    Semangat bang :)

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

Beta Member

This badge is a shoutout to the early members of our community. They've been around since the early days, putting up with (and reporting!) bugs and adjusting to big UX overhauls!

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