Skip to content
OverviewSolutions
20
Comments
18

Alqorni Trikandalas Ginting

@DeidalsIndonesia260 points

someone who want to develop into software developer :)

I’m currently learning...

Javascript

Latest solutions

View more solutions

Latest comments

  • Tarek Islam•220
    @tarekulSubmitted about 2 months ago
    What are you most proud of, and what would you do differently next time?
    1. Organization and Readability: Well organized code using SCSS features mixins and variables
    2. Responsive Design: Ensured that the site looks great on various devices by implementing responsive design techniques, allowing for a seamless user experience across desktop and mobile.
    3. Overcoming Challenges: Using overlay for hover effects and z-index content.
    What challenges did you encounter, and how did you overcome them?
    1. Responsive Design
    • Media Queries: Implementing responsive design required careful planning and testing to ensure that the layout adapts well across various screen sizes. Faced difficulties in achieving the desired look and feel for both desktop and mobile views.
    1. JavaScript Functionality
    • Menu Toggle: Implementing the mobile navigation toggle functionality presented challenges, particularly in ensuring that the menu overlays correctly and does not interfere with other elements on the page.
    • Event Handling: Managing event listeners and ensuring they trigger the correct actions without causing any conflicts or unintended behavior might have been a learning curve.
    1. CSS Styling
    • Z-Index Management: Managing the stacking order of elements, especially with fixed or absolute positioning, led to unexpected overlaps or visibility issues.

    Responsive loop studios main page

    #sass/scss
    1
    Alqorni Trikandalas Ginting•260
    @DeidalsPosted about 2 months ago

    nice solution

    0
  • Alqorni Trikandalas Ginting•260
    @DeidalsPosted 2 months ago

    nice solution

    0
  • calvinvin•710
    @calvinvinSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    More practice on WAI-ARIA and grid display.

    Pitfall:

    • if the <ol> and <ul> element were styled as list-style: none, it will lose its intrinsic ARIA-role of 'list'. I can solve this problem by styling li::marker { font-size: 0 } instead. However, it adds a line height space on mobile version display if I style <ol> as display: grid. So I still have to use list-style: none and add role="list" attribute to the <ol> element in the end.

    news-homepage

    2
    Alqorni Trikandalas Ginting•260
    @DeidalsPosted 3 months ago

    nice solution

    1
  • Alqorni Trikandalas Ginting•260
    @DeidalsPosted 3 months ago

    Nice Solution

    0
  • Snigdha Sukun•550
    @snigdha-sukunSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    I am proud of my website being accessible using keyboard.

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

    I was facing some challenge in adding some animation/transition to the accordion, but after a little trial & error I was able to fix it:

    .answer {
    color: var(--grayish-purple);
    padding-top: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding-top 0.3s ease;
}

.active {
    max-height: max-content;
    padding-top: 0.5em;
}
    What specific areas of your project would you like help with?

    CSS techniques, JS best practices, accessibility

    FAQ accordian

    #pure-css
    1
    Alqorni Trikandalas Ginting•260
    @DeidalsPosted 3 months ago

    thumbs up

    0
  • Alqorni Trikandalas Ginting•260
    @DeidalsPosted 3 months ago

    Nice solution

    1
View more comments