Skip to content
OverviewSolutions
20
Comments
18
Alqorni Trikandalas Ginting
@Deidals

All 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•700
    @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
  • Alqorni Trikandalas Ginting•260
    @DeidalsPosted 3 months ago

    hope i can make it faster

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

    I am proud of learning how to stop a user from typing any negative & decimal number:

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

    I was struggling with making my js code DRY, so I finally tried to use querySelectorAll in JS file to fix this:

    const tipButtons = document.querySelectorAll('.tip-btn');

const removeActive = () =&gt; tipButtons.forEach((btn) =&gt; btn.classList.remove('active'));

tipButtons.forEach((button) =&gt; {
    button.addEventListener('click', () =&gt; {
        const tipValue = parseFloat(button.dataset.value);
        setActiveTip(button, tipValue);
    });
});
    What specific areas of your project would you like help with?

    Responsive CSS & JS do's & don'ts.

    Tip calculator

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

    Nice Solution

    1
  • Luis Aviles•290
    @lavil014Submitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I am proud of using async Js to fetch data from a Json file and using functions to manipulate the DOM.

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

    Using independent functions to manipulate the DOM.

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

    I would like to get feedback on my CSS and Js code.

    Js async functions, display grid and flex

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

    that is neat solution

    0
  • LouisVerch•180
    @LouisVerchSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    Did the JS code all by myself quite proud of this. I should have started with a grid design because I had to redo my code after starting with a flex design

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

    I struggled with mediaquery not overwriting a JS .style.display = "block" on my main card when i resized the window so I had to redo my mobile layout with grid so that I could simply do a style.display = "grid"

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

    Please evaluate my CSS file and HTML as I think I'm a bit far off BEM methodology even though I tried

    Card layout using grid flexbox and JS EventListener

    1
    Alqorni Trikandalas Ginting•260
    @DeidalsPosted 3 months ago

    What a perfect solution.

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

    I am proud of using media query in JS for different-size screens

    const mediaQuery = window.matchMedia("(max-width: 768px)");
    What challenges did you encounter, and how did you overcome them?

    I faced a challenge in creating a CSS tooltip & also making it responsive so that it would always show up in the correct position. I first referred to the W3School tutorial for the tooltip, but it was now showing up in the correct position when I decreased the size of the screen. But after referring to this video, I was able to fix my Tooltip:

    
  
    S H A R E
    
    
    
  
  
    
  


    .tooltip {
        position: relative;
    }

    .social-media {
    display: none;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    z-index: 1;
    transform: translateX(-50%);
    top: -130%;
    left: 50%;
}

    .social-media::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: var(--very-dark-grayish-blue) transparent transparent transparent;
}

    const shareOptions = document.getElementById('social-media-options');
shareOptions.style.display = 'flex'
    What specific areas of your project would you like help with?

    Responsive CSS & JS do's & don'ts.

    Article Preview Component

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

    Nice Solution

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

    Nice Solution

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

    That is a near perfect solution to the design preview.

    0
  • manishkumar12i•130
    @manishkumar12iSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I proud to be that now i am here to make ui and landing pages in html and css and clear my goals.

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

    I face challenge in mobile view with images.

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

    I help in html,css and making ui and avaliable to help others in project.

    responsive product preview card

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

    From the preview picture it seems it just need a minor change. Just need to reduce the font weight of the heading 2 using CSS attribute "font-weight: 700". Otherwise, good job.

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

    Nice solution

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

    your solution is so good

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

    Nice job.

    1
  • David•70
    @DavyMcDickSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I'm most proud of completing my HTML task efficiently and ensuring that the code is clean, organized, and functional. It shows my ability to create structured and accessible web content, demonstrating attention to detail and effective use of tags and elements. If I were to approach the project differently next time, I would focus on integrating more modern practices like semantic HTML and responsive design techniques from the beginning, as well as testing the code across various browsers and devices earlier in the process to identify compatibility issues sooner.

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

    One of the main challenges I encountered was ensuring the HTML code adhered to accessibility standards, which required more research and careful application of ARIA (Accessible Rich Internet Applications) attributes. Additionally, organizing the structure so that it was both semantically correct and easy to read was challenging when dealing with nested elements and complex layouts. I overcame these challenges by referring to trusted resources and documentation, like the W3C guidelines, and validating my code through tools such as the W3C Markup Validation Service. Collaborating with peers and seeking feedback also helped catch issues I might have missed and provided new insights on improving the code structure.

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

    In my project, I would appreciate help with optimizing the overall design for better user experience and responsiveness. While my HTML structure is solid, fine-tuning the layout with CSS. I could also use guidance on best practices for improving accessibility, especially when handling forms and interactive elements. Additionally, feedback on how to make the code more maintainable and scalable for future updates would be invaluable.

    qr-code-component

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

    i really dont have any feedback i can give. So lets just strike to be better everyday even with only small increment.

    Marked as helpful
    0