Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
9
Comments
4
P

Scott

@scottmotion290 points

I specialize in building clean sites and functional applications. Looking to join a team as a Junior Frontend Developer.

I’m currently learning...

React, TypeScript, Tailwind

Latest solutions

  • Audiophile E-commerce using React, TS, and Tailwind

    #react#react-router#tailwind-css#typescript#react-hook-form

    P
    Scott•290
    Submitted 2 months ago

    0 comments
  • Design Portfolio using Slick Slider


    P
    Scott•290
    Submitted almost 2 years ago

    0 comments
  • Drag-and-Drop Todo App: React / TS / Tailwind / Dnd-kit

    #react#typescript#tailwind-css

    P
    Scott•290
    Submitted almost 2 years ago

    0 comments
  • Profile Card Component


    P
    Scott•290
    Submitted almost 2 years ago

    0 comments
  • FAQ Accordion Card


    P
    Scott•290
    Submitted almost 2 years ago

    0 comments
  • Time Tracking Dashboard


    P
    Scott•290
    Submitted almost 2 years ago

    0 comments
View more solutions

Latest comments

  • Rohit Kumar•560
    @rohitKumar38344
    Submitted almost 2 years ago

    Todo app built with Html, css and vanilla js

    #tailwind-css
    1
    P
    Scott•290
    @scottmotion
    Posted almost 2 years ago

    Another approach would be to use the CSS content property: https://developer.mozilla.org/en-US/docs/Web/CSS/content

    So if you had a dark mode class on the element (or parent) you could use that to determine the content url :

    .someDiv {
      content: url(../images/bg-desktop-light.jpg);
    }
    
    .someDiv.dark {
      content: url(../images/bg-desktop-dark.jpg);
    }
    

    Of course if the class is on a parent element then the selector would be something like

    .dark .someDiv
    
    Marked as helpful
  • hamid Mola•120
    @hamidMolaDev
    Submitted almost 2 years ago

    I just used HTML & CSS. send me feedback, please?

    1
    P
    Scott•290
    @scottmotion
    Posted almost 2 years ago

    A couple things I noticed Hamid:

    On the main element you should remove min-height: 70vh.

    The grids are overflowing in Chrome Inspector, you can try this:

    .profile {
        display: grid;
        grid-template-columns: 45px auto;
    }
    

    Alternatively you could make the element a flex row.

    I recommended to another user that they make a wrapper around each testimonial:

    <div class="people">
        <div class="testimonial__wrapper">
            ...Testimonial elements here...
        <div>
    </div>
    
    .testimonial__wrapper {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 1rem;
    }
    

    If you use space-between and gap it will stretch the div and you don't need margin/padding on the inner testimonial elements. You might need to add flex column to the people div in your layout.

    Marked as helpful
  • Koli•110
    @KoliOyama
    Submitted almost 2 years ago

    Responsive - Testimonial grid section

    1
    P
    Scott•290
    @scottmotion
    Posted almost 2 years ago

    I added a wrapper around each testimonial like this:

    <article class="testimonial">
        <div class="testimonial__wrapper">
            ...Testimonial elements here...
        <div>
    </article>
    
    .testimonial__wrapper {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 1rem;
    }
    

    The justify-content: space-between will help space out the content if the column stretches. The gap replaces margin-top on the inner elements, so you can remove that!

    Marked as helpful
  • Kamil Szymon•700
    @kamiliano1
    Submitted about 2 years ago

    Karban Task Management

    #firebase#react#tailwind-css#typescript#accessibility
    1
    P
    Scott•290
    @scottmotion
    Posted almost 2 years ago

    Hey Kamil, I'm working on this project now and I ran across similar problems with nested data in Firebase. I solved this by flattening the data structure to be a top level collection of Boards with 2 sub-collections: Columns and Tasks. I changed Task.status to Task.columnId and put in the Firebase key of the parent column. Then I did a querySnapshot for each column's tasks based on the columnId. Now moving the Task to a different Column is as simple as changing the Task.columnId value. BTW I'm holding the subtasks in an array within each Task, not a sub-collection.

    Marked as helpful

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