--- title: Best UI Design posts — March 2024 | daily.dev description: The most upvoted UI Design posts from March 2024, curated by the daily.dev community. canonical: https://daily.dev/tags/ui-design/best-of/2024/03 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/tags/ui-design/best-of/2024/03 og:type: website og:site_name: daily.dev og:title: Best UI Design posts — March 2024 | daily.dev og:description: The most upvoted UI Design posts from March 2024, curated by the daily.dev community. og:image: https://media.daily.dev/image/upload/s--VAY5ToZt--/f_auto/v1724209435/public/daily.dev%20-%20open%20graph --- # Best of UI Design — March 2024 1. 1 [](https://daily.dev/posts/world-s-shortest-ui-ux-design-course-ilxlvfdqf "world's shortest UI/UX design course") Video Community Picks · 2y world's shortest UI/UX design course Learn the fundamentals of UI and UX design, including user flow, wireframing, design systems, and more. Discover popular UI/UX design tools and how to create a consistent design with reusable components. 536 28 2. 2 [](https://daily.dev/posts/how-to-build-a-good-portfolio-website---my-approach--o37pfrbbk "How to build a Good Portfolio Website - My Approach.") Article DEV · 3y How to build a Good Portfolio Website - My Approach. Learn how to create a good portfolio website, including the importance of uniqueness, the benefits of having a portfolio, and the workflow for building one. The post provides insights on planning, designing, feedback, development, deployment, and resources. 357 33 3. 3 [](https://daily.dev/posts/best-practices-for-frontend-web-development-a-comprehensive-guide-oi2ett3ql "Best Practices for Frontend Web Development: A Comprehensive Guide") Article DEV · 2y Best Practices for Frontend Web Development: A Comprehensive Guide A comprehensive guide to frontend web development, covering best practices, including semantic HTML markup, CSS methodologies, responsive design, progressive enhancement, performance optimization, cross-browser compatibility, accessibility standards, optimized images and multimedia, version control, and continuous learning. 284 9 4. 4 [](https://daily.dev/posts/4-ui-design-tools-i-can-t-live-without-oahdsyspo "4 UI Design Tools I Can't Live Without") Video Community Picks · 2y 4 UI Design Tools I Can't Live Without Discover four design resources that can help you create beautiful web applications. Learn about tools for creating SVGs, finding color palettes, and improving animations on your website. 227 6 5. 5 [](https://daily.dev/posts/ui-library-cooler-even-than-shadcn-txt4baevr "UI Library cooler even than Shadcn") Video Community Picks · 2y UI Library cooler even than Shadcn Discover the coolest UI Library with gradient animations, lamp effects, and more! 142 33 6. 6 [](https://daily.dev/posts/free-saas-website-ui-kit-for-framer-and-figma-eapkr3tpj "Free SaaS Website UI Kit for Framer and Figma") Article Community Picks · 2y Free SaaS Website UI Kit for Framer and Figma Build and publish a fully functional, responsive, no-code SaaS website design in minutes using the free components provided for Framer and Figma. Customize and personalize the elements, then publish your site with ease. 68 7. 7 [](https://daily.dev/posts/uilabs-pyox4gkgj "uilabs") Article Community Picks · 2y uilabs The post explores various ways to reuse and transform components, including creating and managing webhooks, using a calendar widget with timezone differences information, and recreating iOS sliders in the web with Radix UI and Tailwind CSS. 66 8. 8 [](https://daily.dev/posts/meet-devin---the-end-of-programmers-as-we-know-it-3qmajab1v "Meet Devin - The End Of Programmers As We Know It") Video ThePrimeTime · 2y Meet Devin - The End Of Programmers As We Know It 66 17 9. 9 [](https://daily.dev/posts/going-beyond-pixels-and-r-ems-in-css-txfhtoo16 "Going beyond pixels and (r)ems in CSS") Article Community Picks · 3y Going beyond pixels and (r)ems in CSS Learn about container query length units in CSS and how they can be used to create responsive designs based on the size of the containing element. 63 2 10. 10 [](https://daily.dev/posts/optimising-your-design-system-with-figma-s-variables-w0oyqwcx7 "Optimising your design system with Figma’s variables") Article Medium · 3y Optimising your design system with Figma’s variables Learn how to optimize your design system using Figma's variables. Explore the principles of consistency, scalability, maintainability, DRYness, and code-friendliness. Discover the benefits of primitive variables and how to set them up in a Codesign system. Understand the concept of semantic variables and their compatibility with different modes. Start building your own design system today! 45 5 11. 11 [](https://daily.dev/posts/css---implementing-responsive-masonry-layouts-5grxypwsp "CSS - Implementing Responsive Masonry Layouts") Article asayer · 3y CSS - Implementing Responsive Masonry Layouts Learn how to implement responsive Masonry layouts using CSS. Discover the principles of Masonry layouts and different techniques to achieve them. 40 12. 12 [](https://daily.dev/posts/announcing-visual-copilot-1-0-general-availability-bring-your-own-components-and-more-wr5uscndw "Announcing Visual Copilot 1.0: General Availability, Bring Your Own Components, And More") Article builder.io · 2y Announcing Visual Copilot 1.0: General Availability, Bring Your Own Components, And More Visual Copilot 1.0 introduces Component Mapping, AI semantic matching, Component Set Generation, and Prompt-to-Design to eliminate bottlenecks in web and mobile development. 37 2 13. 13 [](https://daily.dev/posts/three-modernized-navbar-design-layouts-h9ioisfnm "Three Modernized Navbar Design Layouts") Article asayer · 3y Three Modernized Navbar Design Layouts This post explores three modernized navbar design layouts: sticky navigation bar, hamburger menu, and tab navigation bar. It highlights the importance of navbars for user guidance, usability, brand cohesion, efficiency, SEO benefits, accessibility, and aesthetic appeal. The evolution of navigation in web design is discussed, along with key considerations for modern navbar design. The post then dives into the features, benefits, and drawbacks of each modernized navbar layout. It concludes by emphasizing the importance of choosing the right fit for a website's navigation and when to consider modernizing it. 37 14. 14 [](https://daily.dev/posts/transform-your-website-create-3d-magic-with-css-grid-oju9nmlcf "Transform your Website: Create 3D Magic with CSS Grid") Article asayer · 3y Transform your Website: Create 3D Magic with CSS Grid Learn how to use CSS Grid to create 3D effects on your website. Discover important properties for making grid layouts, creating overlays, adding 3D appearance to grid items, and creating a rotating cube. Understand how 3D improves user experience and get quick tips for common 3D challenges. 29 15. 15 [](https://daily.dev/posts/how-to-use-html-forms-html-form-basics-zevw9uvul "How to Use HTML Forms – HTML Form Basics") Article freeCodeCamp · 3y How to Use HTML Forms – HTML Form Basics Learn the basics of creating HTML forms, including the structure, form elements, and form validation. Discover how to use the HTML , , , and <select> elements. Get insights on form submission methods and best practices for styling and accessibility. 25 16. 16 [](https://daily.dev/posts/on-scroll-3d-stack-motion-effect-esyj2qtbi "On-Scroll 3D Stack Motion Effect") Article Codrops · 3y On-Scroll 3D Stack Motion Effect A post sharing an experiment of creating a scroll-based 3D stack motion effect with rotations, translations, and responsiveness. 24 1 17. 17 [](https://daily.dev/posts/winterjs---a-new-javascript-runtime-dmljqpyp7 "WinterJS - A New Javascript Runtime") Video ThePrimeTime · 2y WinterJS - A New Javascript Runtime 22 4 18. 18 [](https://daily.dev/posts/how-to-convert-figma-to-wordpress-beginner-s-guide--tfrczy3jv "How to Convert Figma to WordPress (Beginner’s Guide)") Article WordPress Beginner · 3y How to Convert Figma to WordPress (Beginner’s Guide) Learn how to convert Figma designs into WordPress themes or pages easily using a step-by-step guide. Discover the benefits of converting Figma to WordPress, the tools and plugins available for the conversion, and the process involved. 22 2 19. 19 [](https://daily.dev/posts/creating-color-palettes-with-the-css-color-mix-function-lsfqrbfwk "Creating Color Palettes with the CSS color-mix() Function") Article CSS {IRL} · 3y Creating Color Palettes with the CSS color-mix() Function Learn how the CSS color-mix() function can help create color palettes and improve design systems. 21 1 [See all UI Design archives](/tags/ui-design/best-of) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@graph":[{"@type":"CollectionPage","@id":"https://daily.dev/tags/ui-design/best-of/2024/03#page","url":"https://daily.dev/tags/ui-design/best-of/2024/03","name":"Best UI Design Posts — March 2024","description":"The most upvoted UI Design posts from March 2024, curated by the daily.dev community.","isPartOf":{"@type":"WebSite","url":"https://daily.dev"}},{"@type":"ItemList","@id":"https://daily.dev/tags/ui-design/best-of/2024/03#items","numberOfItems":19,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/world-s-shortest-ui-ux-design-course-ilxlvfdqf","name":"world's shortest UI/UX design course"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/how-to-build-a-good-portfolio-website---my-approach--o37pfrbbk","name":"How to build a Good Portfolio Website - My Approach."},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/best-practices-for-frontend-web-development-a-comprehensive-guide-oi2ett3ql","name":"Best Practices for Frontend Web Development: A Comprehensive Guide"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/4-ui-design-tools-i-can-t-live-without-oahdsyspo","name":"4 UI Design Tools I Can't Live Without"},{"@type":"ListItem","position":5,"url":"https://daily.dev/posts/ui-library-cooler-even-than-shadcn-txt4baevr","name":"UI Library cooler even than Shadcn"},{"@type":"ListItem","position":6,"url":"https://daily.dev/posts/free-saas-website-ui-kit-for-framer-and-figma-eapkr3tpj","name":"Free SaaS Website UI Kit for Framer and Figma"},{"@type":"ListItem","position":7,"url":"https://daily.dev/posts/uilabs-pyox4gkgj","name":"uilabs"},{"@type":"ListItem","position":8,"url":"https://daily.dev/posts/meet-devin---the-end-of-programmers-as-we-know-it-3qmajab1v","name":"Meet Devin - The End Of Programmers As We Know It"},{"@type":"ListItem","position":9,"url":"https://daily.dev/posts/going-beyond-pixels-and-r-ems-in-css-txfhtoo16","name":"Going beyond pixels and (r)ems in CSS"},{"@type":"ListItem","position":10,"url":"https://daily.dev/posts/optimising-your-design-system-with-figma-s-variables-w0oyqwcx7","name":"Optimising your design system with Figma’s variables"},{"@type":"ListItem","position":11,"url":"https://daily.dev/posts/css---implementing-responsive-masonry-layouts-5grxypwsp","name":"CSS - Implementing Responsive Masonry Layouts"},{"@type":"ListItem","position":12,"url":"https://daily.dev/posts/announcing-visual-copilot-1-0-general-availability-bring-your-own-components-and-more-wr5uscndw","name":"Announcing Visual Copilot 1.0: General Availability, Bring Your Own Components, And More"},{"@type":"ListItem","position":13,"url":"https://daily.dev/posts/three-modernized-navbar-design-layouts-h9ioisfnm","name":"Three Modernized Navbar Design Layouts"},{"@type":"ListItem","position":14,"url":"https://daily.dev/posts/transform-your-website-create-3d-magic-with-css-grid-oju9nmlcf","name":"Transform your Website: Create 3D Magic with CSS Grid"},{"@type":"ListItem","position":15,"url":"https://daily.dev/posts/how-to-use-html-forms-html-form-basics-zevw9uvul","name":"How to Use HTML Forms – HTML Form Basics"},{"@type":"ListItem","position":16,"url":"https://daily.dev/posts/on-scroll-3d-stack-motion-effect-esyj2qtbi","name":"On-Scroll 3D Stack Motion Effect"},{"@type":"ListItem","position":17,"url":"https://daily.dev/posts/winterjs---a-new-javascript-runtime-dmljqpyp7","name":"WinterJS - A New Javascript Runtime"},{"@type":"ListItem","position":18,"url":"https://daily.dev/posts/how-to-convert-figma-to-wordpress-beginner-s-guide--tfrczy3jv","name":"How to Convert Figma to WordPress (Beginner’s Guide)"},{"@type":"ListItem","position":19,"url":"https://daily.dev/posts/creating-color-palettes-with-the-css-color-mix-function-lsfqrbfwk","name":"Creating Color Palettes with the CSS color-mix() Function"}]},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Tags","item":"https://daily.dev/tags"},{"@type":"ListItem","position":3,"name":"UI Design","item":"https://daily.dev/tags/ui-design"},{"@type":"ListItem","position":4,"name":"Best of","item":"https://daily.dev/tags/ui-design/best-of"},{"@type":"ListItem","position":5,"name":"March 2024"}]}]} ```