5. Mobile first horizontal scroll menu

Requirements

• Add menu bar with enough links to overflow when placed in one line
• Use only CSS to build the menu
• Follow the mobile first approach when writing your styles
• Place the bar at the bottom of the page by default
• On screens larger than 768px the bar should be placed somewhere around the top of the page (appropriate for desktop application)
• Loosely follow the design but feel free to style the menu as you please
• (optional) Style the native scroll bars where possible
• ⭐ Follow the BEM naming convention

Design preview

Resources

Not available

Learn more

• Learn Responsive Design - web.dev
• Mobile first - MDN
• Mobile first - Video
• What is mobile first css and why does it rock
• Responsive design - MDN
• Organize css modular architecture
• Style scrollbars

Discussion topics

• Naming classes
• Styling scrollbars
• Optimization for touch devices
• DRY principles when writing variables or reusable UI
• Different patterns we use with UI frameworks
• Using the ch unit in CSS
• The mobile first approach and responsiveness
• Reset CSS property to initial value