Site Sprout - Where students learn web elements

Explore a webpage by clicking around to get an introduction to all the basics!

2.) Navigation Bar

Discover the Navigation Bar, which helps you move around a website just like the table of contents in a book!

3.) Hamburger Menu

Learn about the Hamburger Menu, a special icon that hides and shows the menu, similar to a chapter list in a book.

4.) Search Bar

Understand how the Search Bar helps you find information on a website, just like an index in a book!

5.) Dropdown Menu

Learn how Dropdown Menus work to show more options, similar to expanding a list of topics in a book.

6.) Pop-Up

Discover Pop-Ups that appear on the screen to give you extra information, like footnotes in a book!

7.) Notification Banner

Learn about Notification Banners that inform you about important messages, just like sticky notes in a book!

8.) Toasts

Estimated Time: 35m

Understand Toast notifications that briefly appear to tell you something important, similar to side notes in a book!

9.) Form

Learn how Forms collect your information, just like worksheets in school!

10.) Breadcrumb

Understand Breadcrumbs that show you where you are on a website, similar to the page numbers or chapters in a book!

11.) Address Bar

Learn about the Address Bar where you type in website names, just like the title page in a book!

12.) Tooltip

Estimated Time: 35m

Discover Tooltips that give you extra information when you hover over something, like side notes in a book!

13.) Tabs

Learn how Tabs organize content into different sections, similar to chapters in a book!

14.) Hyperlink

15.) Test Your Basics Knowledge

Understand Hyperlinks that connect you to different pages, just like references in a book!

Sprouty will walk you through an interactive quiz all about the basics! Good Luck 😁

intermediate

1.) Buttons

Learn everything about buttons, from the different types to various icons and their meanings!

2.) Avatar

Learn how to use Avatar components to represent users with images or initials.

3.) Badge

Discover how to use Badges to display status or notification counts.

4.) Button

Learn how to create and style interactive buttons for user actions.

5.) Checkbox

Understand how to use Checkboxes for multiple selections in forms.

6.) Input

Discover how to create and handle different types of input fields.

7.) Label

Learn how to use Labels to describe form fields and improve accessibility.

8.) Progress

Estimated Time: 35m

Understand how to display progress indicators for ongoing tasks.

9.) Radio Group

Learn how to use Radio Groups for single selections within forms.

10.) Select

Discover how to create dropdown Select components for choosing options.

11.) Separator

Learn how to use Separators to divide content and improve layout clarity.

12.) Slider

Understand how to implement Sliders for selecting values within a range.

13.) Switch

Learn how to use Switches for toggling settings on and off.

14.) Table

Discover how to create and style Tables to display structured data.

15.) Textarea

Learn how to implement Textareas for multi-line user input.

16.) Toggle

Understand how to use Toggles for switching between two states.

17.) Toggle Group

Learn how to group Toggles for multiple state switches.

18.) Accordion

Learn how to use the Accordion component to display collapsible content sections.

19.) Alert Dialog

Understand how to implement Alert Dialogs for important user confirmations.

20.) Aspect Ratio

Estimated Time: 55m

Learn how to maintain consistent aspect ratios for media and elements.

21.) Calendar

Learn how to implement Calendar components for date selection and scheduling.

22.) Card

Understand how to use Cards to encapsulate and display related information.

23.) Carousel

Learn how to create Carousels for showcasing multiple pieces of content interactively.

24.) Collapsible

Estimated Time: 1h 5m

Discover how to use Collapsible components to show or hide content sections.

25.) Combobox

Learn how to implement Comboboxes for enhanced selection capabilities with autocomplete.

26.) Command

Understand how to create Command components for executing user commands efficiently.

27.) Context Menu

Learn how to implement Context Menus for providing additional options on user interactions.

28.) Date Picker

Estimated Time: 1h 5m

Discover how to use Date Pickers for selecting dates in forms and applications.

29.) Dialog

Learn how to implement Dialogs for displaying important information or interactions.

30.) Drawer

Understand how to use Drawers to present additional content or navigation options.

31.) Hover Card

Estimated Time: 1h 5m

Discover how to use Hover Cards to display additional information on hover.

32.) Input OTP

Learn how to implement Input OTP fields for secure one-time password entry.

33.) Menubar

Understand how to create Menubars for organizing navigation links effectively.

34.) Navigation Menu

Learn how to implement Navigation Menus for guiding users through your application.

35.) Pagination

Discover how to use Pagination to navigate through large sets of data efficiently.

36.) Resizable

Understand how to make elements resizable for better user customization.

37.) Scroll Area

Learn how to implement Scroll Areas for managing overflow content effectively.

38.) Sheet

Discover how to use Sheets to display supplementary content in a sliding panel.

39.) Sidebar

Learn how to create Sidebars for additional navigation or content areas.

40.) Skeleton