piccalilli_’s avatarpiccalilli_’s Twitter Archive—№ 34,374

  1. You may or may not have seen that I made all Front-End Challenges content ✨free✨ on @piccalill_, so here’s a thread of each tutorial that’s now avaiable 👇 You can see them all and their challenge posts here: piccalil.li/category/front-end%20challenges%20club/
    On twitter.com ↗ piccalilli_’s avatar ♻️ 12 Retweets ❤️ 54 Favorites 2020 Apr 3 Mood 0
    1. …in reply to @piccalilli_
      #001: Email signup form A solid, progressively enhanced component that provides a good user experience to everyone. piccalil.li/tutorial/solution-001-email-sign-up-form/
      Permalink On twitter.com ↗ piccalilli_’s avatar 2020 Apr 3 Mood +5 🙂
      1. …in reply to @piccalilli_
        #002: Toggle Switch Y'know, just like dark mode/light mode switches, but this one packs a punch! piccalil.li/tutorial/solution-002-toggle-switch/
        Permalink On twitter.com ↗ piccalilli_’s avatar 2020 Apr 3 Mood +2 🙂
        1. …in reply to @piccalilli_
          #003: Duotone card Just like those sweet looking images on Spotify, you can learn to make this effect using blend modes piccalil.li/tutorial/solution-003-duotone-card/
          Permalink On twitter.com ↗ piccalilli_’s avatar ❤️ 1 Favorite 2020 Apr 3 Mood +4 🙂
          1. …in reply to @piccalilli_
            #004: Progress Button A handy button that shows a loading state piccalil.li/tutorial/solution-004-progress-button/
            Permalink On twitter.com ↗ piccalilli_’s avatar 2020 Apr 3 Mood +2 🙂
            1. …in reply to @piccalilli_
              #005: Tabs I am not a fan of tabs as a design pattern, but I hate tabs that are a user experience nightmare that rely on tonnes of JS, so this solution remedies both piccalil.li/tutorial/solution-005-tabs/
              Permalink On twitter.com ↗ piccalilli_’s avatar 2020 Apr 3 Mood +1 🙂
              1. …in reply to @piccalilli_
                #006: Auto-scrolling responsive grid At small viewports, it's a handy scrollable container. At larger breakpoints it turns into a good ol’ grid. There is so much to takeaway from this one piccalil.li/tutorial/solution-006-auto-scrolling-responsive-grid/
                Permalink On twitter.com ↗ piccalilli_’s avatar ♻️ 1 Retweets ❤️ 2 Favorites 2020 Apr 3 Mood +5 🙂
                1. …in reply to @piccalilli_
                  #007: Heading keyline I love these and we get to play with CSS Grid to make one. piccalil.li/tutorial/solution-007-heading-keyline/
                  Permalink On twitter.com ↗ piccalilli_’s avatar ♻️ 1 Retweets ❤️ 1 Favorite 2020 Apr 3 Mood +3 🙂
                  1. …in reply to @piccalilli_
                    Of course I did a typo on the first tweet with the twitter handle. It's piccalilli_ 🙃
                    Permalink On twitter.com ↗ piccalilli_’s avatar ❤️ 1 Favorite 2020 Apr 3 Mood 0