Best of UI Design — April 2024

1. 1
   Article

   Bootcamp·2y

   16 Websites for Design Inspiration in 2024

   Discover 16 websites for design inspiration in 2024, ranging from app design inspirations to branding and logo inspiration.

   1.2K

   47
2. 2
   Article

   DEV·2y

   New Web Portfolio 16bit OS Style

   A completely revamped web portfolio dedicated to artists and developers, inspired by the style of an operating system. It features responsive design and adaptive language.

   697

   21
3. 3
   Article

   asayer·2y

   Using Rarer HTML Tags for Styling

   Using rare HTML tags for styling offers advantages such as reducing code bloat and improving code readability, as well as enhancing website performance by minimizing CSS file size.

   184

   14
4. 4
   Article

   Community Picks·2y

   Why UI designers should understand Flexbox and CSS Grid

   Learn why UI designers should understand Flexbox and CSS Grid for responsive design. Explore the differences between column-based design and modern CSS layouts.

   157

   6
5. 5
   Video

   Community Picks·2y

   Coding project IDEAS for portfolio

   Learn how to find real-life coding projects for your portfolio. Get inspiration for web design, web scraping, data analytics, Chrome extensions, and full-stack applications.

   85

   4
6. 6
   Video

   Community Picks·2y

   Your favorite UI Library just got a big update!

   A favorite UI library has released a new feature called 'lift mode' which allows users to easily copy and paste code for desired components from a blocks page.

   76

   5
7. 7
   Video

   Community Picks·2y

   Make your Next.js app Awesome with THIS UI Library!

   Learn how to implement various components using the Aity UI library and enhance the appearance of your Next.js app.

   67

   6
8. 8
   Article

   Community Picks·2y

   Design Systems Demystified

   This resource explains what design systems are, their value, and how to compose the right one for your organization. It also provides information on common features and recommended tools.

   64

   1
9. 9
   Article

   freeCodeCamp·2y

   Flutter Tutorial – How to Develop an App with Flutter From Scratch

   Learn how to develop a Flutter app from scratch, including installation, coding UI elements, testing, and app publication.

   57

   1
10. 10
    Article

    Community Picks·2y

    15 Best Books On Web Design You Must Read

    A list of 15 best web design books for beginners, covering topics such as design principles, HTML and CSS, color theory, typography, UX design, design systems, and more.

    57

    1
11. 11
    Article

    Hacker News·2y

    HTML-first, framework-agnostic implementation of shadcn/ui

    Franken UI is a collection of HTML-first, framework-agnostic, customizable components that can be easily integrated into any website.

    49

    4
12. 12
    Article

    asayer·2y

    Exploring CSS Units

    Discover the different types of CSS units, their impact on webpage performance, and get tips for choosing the right CSS unit for your projects.

    48
13. 13
    Article

    LogRocket·2y

    Mojo CSS vs. Tailwind: Choosing the best CSS framework

    CSS frameworks like Tailwind and Mojo CSS offer different features and benefits. Tailwind is popular, well-documented, and has a large userbase. Mojo CSS is newer, lightweight, and requires no CSS coding. Tailwind is recommended for most projects, but Mojo CSS might be a good choice for lightweight projects.

    48

    12
14. 14
    Article

    asayer·2y

    A set of CSS Snippets and Tricks for Common Design Problems

    CSS snippets and tricks are ready-made solutions to common web design issues. They can solve problems related to layout, animation, typography, and responsiveness.

    45
15. 15
    Article

    Hacker News·2y

    built to create landing pages and websites. Easyfrontend UI components are free and open-source. show your support and love, don't forget to give us a star 🌟

    EasyFrontend offers pre-built UI components for enhancing apps and designing modern websites.

    41
16. 16
    Article

    Community Picks·2y

    Your background images might be causing CLS

    Cumulative Layout Shift (CLS) is a Core Web Vital that measures unexpected shifts in a web page's layout after initial content loads. It can be caused by various factors such as client-side data-fetching, loading large images, ads, or embedded media players. To avoid CLS, web developers can use techniques like including width and height attributes on images, providing placeholder elements, and using CSS properties to minimize shifts caused by font files loading.

    37

    1
17. 17
    Article

    LambdaTest·2y

    How to Create a Smooth Scroll in CSS

    Learn how to implement smooth scroll in CSS to improve user experience and engagement. Understand the benefits and importance of smooth scroll, how it works, and how to implement it using CSS and JavaScript.

    36