illustration for Build a Responsive Navbar with Tailwind
pro

Build a Responsive Navbar with Tailwind

Instructor

Adam Wathan
22m closed-captioning
Star icon$$$
Star icon$$$
Star icon$$$
Star icon$$$
Star icon$$$
4.7
358
people completed
Published 3 years ago
|
Updated 2 years ago

The Navbar is a common component you will find yourself styling in almost any application.

In this course, we'll style a Navbar for a mobile view with a logo and toggleable hamburger button that will contain nav links.

After building up the mobile view, we will refactor the navbar to be responsive by removing the hamburger menu from the navbar and replacing that with the links directly inline within the Navbar

What you'll learn:

  • Best practices for mobile-first UI development
  • Use the mobile first breakpoint system
  • Use responsive utility variant

Learner Reviews

  • Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    What did you like about this course?

    Good course! Dealt with all the TW classes as well as integrating behaviors.

    Wish Adam would drop the verbal crutches: "sort-of", "kind-of", "maybe" - driving me to distraction!!

    Peter
    9 hours ago
  • Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    What did you like about this course?

    It was easy to follow and the pronunciation of the instructor was very clear. Also, up to the point.

    Jimena Miguez
    3 weeks ago
  • Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    What did you like about this course?

    Supreme course! I really love it :D

    Learner
    4 months ago
  • Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    What did you like about this course?

    Super clear! I was just using "vanilla?" Typescript instead of a framework and writing out the code myself made me understand what was happening in the framework even more! Super excited to learn more tailwind :)

    Learner
    9 months ago
  • Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    What did you like about this course?

    I liked how the creator of Tailwind CSS walked me through building an entire responsive navbar using just the utility classes, a couple of SVG icons, and a Vue.js dynamic class..

    Kevin K.
    a year ago
  • Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    What did you like about this course?

    So easy explanation, I have never gotten in my life.

    Som
    2 years ago

Course Content

22m • 3 lessons

    You might also like these resources:

    illustration for CSS Fundamentals
    Tyler Clark・33m・Course

    Even the most experienced developer can learn something new when it comes to using and understanding how the browser interprets CSS. In this course, 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 as well as columns. In this course we will look at multiple ways to divide the page into major regions with control of the size, position, and layer.

    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. It is so awesome, and makes the arranging elements on a page almost fun!