Skip to content
OverviewSolutions
24
Comments
25
P
Josh Kahlbaugh
@Joshk7

All solutions

  • Room Homepage with Animations

    #sass/scss
    P
    Josh Kahlbaugh•540
    Submitted about 1 month ago

    I'm curious if I could accomplish this same result with transitions or if animation keyframes are the way to go.

    1 comment

  • Loopstudios with BEM and Sass

    #bem#sass/scss
    P
    Josh Kahlbaugh•540
    Submitted about 2 months ago

    I'd like any tips on how to setup and structure sass projects.

    2 comments

  • Cube CSS NFT Card

    #cube-css
    P
    Josh Kahlbaugh•540
    Submitted 2 months ago

    I'd like any tips on how to implement CUBE CSS into a project and if I followed the guidelines correctly.

    0 comments

  • Vanilla Tic Tac Toe Game

    #bem
    P
    Josh Kahlbaugh•540
    Submitted 2 months ago

    I'd like any recommendations for accessibility improvements.

    1 comment

  • Accessible BMI calculator

    #pure-css
    P
    Josh Kahlbaugh•540
    Submitted 3 months ago

    I'd specifically like help with accessibility. If anyone has suggestions on how to make this solution more accessible possibly with screen readers I'd appreciate the help.

    0 comments

  • Ecommerce Product Page using dialogs

    #pure-css
    P
    Josh Kahlbaugh•540
    Submitted 3 months ago

    Specifically, I'd like any suggestions or help on how to make that checkout dialog better. Generally, any tips on how to create modals would be helpful as well.

    1 comment

  • Accessible News Homepage

    #pure-css
    P
    Josh Kahlbaugh•540
    Submitted 4 months ago

    I'd like help with styling the dialog element as well as any tips on how to make any elements more accessible by either adding other role attributes or more descriptive labels.

    1 comment

  • Functional Contact Form

    #pure-css
    P
    Josh Kahlbaugh•540
    Submitted 4 months ago

    I'd like help with my semantic html.

    <label class="name__label" for="given-name"
    >First Name
    <span class="required" aria-hidden="true"> *</span>
    <span class="sr">required</span>
</label>
...
<span class="error invisible" id="error_given">This field is required</span>

    Is this the proper way to add aria labels for screen readers. Specifically for the radio buttons, they're wrapped in a fieldset and each buton is described by the same error. Is this correct?

    Lastly, any tips on validation would be appreciated!

    1 comment

  • FAQ accordion with Accessible Radio Buttons 👀

    #pure-css
    P
    Josh Kahlbaugh•540
    Submitted 5 months ago

    Specifically, I'd like help with transitions between open an closed states of the accordion items:

    .item__description {
    max-height: 0;
    overflow: hidden;
    transition: 350ms;
    font: normal 0.875rem/1.5 "Work Sans";
    color: var(--pale-purple);
}

.item__label:has(.radio:checked) + .item__description {
    margin-top: 1.5rem;
    max-height: 6.25rem; /* Adjust as needed */
    transition: 350ms;
}
    1 comment

  • Interactive Rating with Error Message 🚨

    #pure-css
    P
    Josh Kahlbaugh•540
    Submitted 5 months ago

    I'd like help with accessibility since I'm doing this challenge as part of the Accessibility Pathway. Any tips on how to make this solution more accessible would be appreciated!

    1 comment

  • Frontend Quiz with Dark Theme 😈

    #pure-css
    P
    Josh Kahlbaugh•540
    Submitted 5 months ago

    First, I'd like help on loading data into the project. I'm not positive that the way I did it is the best. Second, the conditional styling for the theme is based on toggling a css class on the root element:

    const handleThemeClick = (e) => {
    root.classList.toggle("dark");
};

    .dark {
    --primary: var(--dark-navy);
    --primary-accent: var(--navy);
    --secondary: var(--pure-white);
    --secondary-accent: var(--light-bluish);
}

    Are there better approaches to this?

    2 comments

  • Password Generator

    #pure-css
    P
    Josh Kahlbaugh•540
    Submitted 5 months ago

    Any suggestions on how to generate passwords better or how to solve the problem of styling the range input would be appreciated!

    1 comment

  • Responsive Tip Calculator 👍

    #pure-css
    P
    Josh Kahlbaugh•540
    Submitted 5 months ago

    I'd like help specifically with how I could restructure the html for the main form. Additionally, any tips on better practices for writing JavaScript would be appreciated!

    1 comment

  • Time Tracking Dashboard 🫡

    #pure-css
    P
    Josh Kahlbaugh•540
    Submitted 5 months ago

    I'd like any suggestions on how to populate the cards data a better way if possible, thanks!

    1 comment

  • Responsive Newsletter Sign Up

    #pure-css
    P
    Josh Kahlbaugh•540
    Submitted 5 months ago

    I'm not positive if the background-image set for bullet points is the best way to approach that problem, so any feedback on that would be great.

    Also, any tips or pointers for future development on validation logic would help as well!

    1 comment

  • Responsive Article Preview Card

    #pure-css
    P
    Josh Kahlbaugh•540
    Submitted 6 months ago

    I'd like help on setting the box shadow for the triangle attached to the popup when you press the share icon on desktop. Will it be any different than attaching a box shadow to any other div?

    Also, if anybody has insight into why my icons were being clipped before my fix that would be appreciated!

    1 comment

  • Responsive meet landing page using CSS Grid and React

    #react#pure-css
    P
    Josh Kahlbaugh•540
    Submitted 6 months ago

    I'd like help with the bottom footer image. I added media attributes and source tags for different screen sizes, but I'm not positive if I forgot a height or width attribute and whether that's necessary or not.

    1 comment

  • Responsive Testimonials using CSS grid

    #pure-css
    P
    Josh Kahlbaugh•540
    Submitted 6 months ago

    I'm not positive if the box-shadow is perfect, so any tips on that would be helpful. Also, I wasn't sure if I needed an h1 tag so I just added a hidden one for accessibility. Let me know if that's good practice.

    1 comment