Build a Responsive Navbar with Tailwind
Adam Wathan
- tailwind
^1.0.4
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
Course Content
You might also like these resources:
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.
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.
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.