illustration for Build and Style a Dropdown in Tailwind
pro

Build and Style a Dropdown in Tailwind

Instructor

Adam Wathan

38m closed-captioning
·
4 lessons
Star icon$$$
Star icon$$$
Star icon$$$
Star icon$$$
Star icon$$$
4.8
254
people completed
Published 5 years ago
|
Updated 4 years ago

A menu dropdown is a common component that you will build and style in any application.

In this course, we'll start from scratch, build and style a static dropdown menu and then add functionality to the component so you can open and close the dropdown. There are some keyboard accessibility topics we'll cover when adding interactivity to the dropdown. We'll use Vue in this example but these concepts will apply to any framework.

After the drop down is fully functional and styled properly, we'll see how sometimes you need to rethink the design of a component when considering the mobile view. For this case, the dropdown is removed entirely and the links shown inline underneath the navbar content.

What you'll learn:

  • Build and style a static dropdown menu
  • Creating keyboard accessible components
  • Best practices for mobile-first UI development

Course Content

38m • 4 lessons

    You might also like these resources:

    illustration for CSS Fundamentals
    Tyler Clark・33m・Course

    All developers can learn something new when it comes to using and understanding how the browser interprets CSS. We will slowly style a website according to a mocked image.

    illustration for Build Complex Layouts with CSS Grid Layout
    Rory Smith・42m・Course

    CSS Grid Layout is a two-dimensional layout method that gives you control over items in rows and columns. We will look at ways to divide the page into major regions.

    illustration for Flexbox Fundamentals
    Garth Braithwaite・18m・Course

    Flexbox is a wonderful tool built into the CSS specification. Using flexbox doesn't require any special framework or library, just a browser with CSS3 support.