![Screenshot of the Google I/O 2022 home page. The header contains the Google I/O logo, the main navigation, and a language selector. The hero section contains an illustration of a blimp with 'IO22' written on the side. The blimp is towing a banner that says 'Thanks for joining'.](/_next/static/media/1.b95e9a8c.png)
![Screenshot of the Google I/O 2022 home page. The header contains the Google I/O logo, the main navigation, and a language selector. The hero section contains an illustration of a blimp with 'IO22' written on the side. The blimp is towing a banner that says 'Thanks for joining'.](/_next/static/media/2.598b60fd.png)
Google I/O 2022
The annual developer conference hosted by Google.
Google I/O is Google's annual developer conference, where new Google products are announced. The Google I/O 2022 website was built using Tailwind CSS.
![Screenshot of the Google I/O 2022 'Program' page. The header contains the Google I/O logo, the main navigation, and a language selector. The hero section contains an introduction paragraph and an illustration of a laptop with the number '22' on the screen.](/_next/static/media/3.97c4b2fc.png)
![Screenshot of the Google I/O 2022 'Program' page. The header contains the Google I/O logo, the main navigation, and a language selector. The hero section contains an introduction paragraph and an illustration of a laptop with the number '22' on the screen.](/_next/static/media/4.a29ed649.png)
The program page featuring all the sessions at Google I/O.
![Screenshot of the Google I/O 2022 'FAQ' page. A list of FAQ categories is displayed on the left side of the screen. On the right side the 'General' category is shown with a list of questions such as 'When and where is Google I/) 2022?'.](/_next/static/media/5.6d2392e3.png)
![Screenshot of the Google I/O 2022 'FAQ' page. A list of FAQ categories is displayed on the left side of the screen. On the right side the 'General' category is shown with a list of questions such as 'When and where is Google I/) 2022?'.](/_next/static/media/6.bfac0d72.png)
An FAQ section with collapsible FAQ items. From the sidebar, one can navigate to the different subsections of the FAQ.
![Mobile screenshot of the Google I/O 2022 'Learning Lab' page. The header contains the Google I/O logo and a menu button. The hero contains a short introduction paragraph and an illustration of blocks stacked on top of each other. Below is a 'Workshops' section and the first video thumbnail can just be seen.](/_next/static/media/7.ff77725e.png)
![Mobile screenshot of the Google I/O 2022 'Learning Lab' page. The header contains the Google I/O logo and a menu button. The hero contains a short introduction paragraph and an illustration of blocks stacked on top of each other. Below is a 'Workshops' section and the first video thumbnail can just be seen.](/_next/static/media/8.3bab4e02.png)
![Mobile screenshot of the Google I/O 2022 program filters overlay. The overlay contains a list of filters such as 'Topic' and 'Level'. Each filter has a list of checkboxes.](/_next/static/media/9.1113f030.png)
![Mobile screenshot of the Google I/O 2022 program filters overlay. The overlay contains a list of filters such as 'Topic' and 'Level'. Each filter has a list of checkboxes.](/_next/static/media/10.1edb3884.png)
![Mobile screenshot of the Google I/O 2022 'Products' page. The header contains the Google I/O logo and a menu button. The hero contains a short introduction paragraph and an illustration of a mobile phone. Below is a list of products with icons, starting with 'Accessibility' and 'Android'.](/_next/static/media/11.daca5af6.png)
![Mobile screenshot of the Google I/O 2022 'Products' page. The header contains the Google I/O logo and a menu button. The hero contains a short introduction paragraph and an illustration of a mobile phone. Below is a list of products with icons, starting with 'Accessibility' and 'Android'.](/_next/static/media/12.f3fdb816.png)
The Google I/O website experience on mobile devices.
![Screenshot of the Google I/O 2022 'Program' page. The page contains a list of videos with thumbnails and short descriptions, in three columns. On the left side of the screen there is a list of checkboxes that can be used to filter the list of videos.](/_next/static/media/13.142576fd.png)
![Screenshot of the Google I/O 2022 'Program' page. The page contains a list of videos with thumbnails and short descriptions, in three columns. On the left side of the screen there is a list of checkboxes that can be used to filter the list of videos.](/_next/static/media/14.63b20fa9.png)
Conference sessions presented on the program page and filterable by topic, level, and type.
![Screenshot of the Google I/O 2022 'About' page. The header contains the Google I/O logo, the main navigation, and a language selector. The hero section contains an introduction paragraph and an illustration of some plain flags blowing in the wind.](/_next/static/media/15.4ed1dee3.png)
![Screenshot of the Google I/O 2022 'About' page. The header contains the Google I/O logo, the main navigation, and a language selector. The hero section contains an introduction paragraph and an illustration of some plain flags blowing in the wind.](/_next/static/media/16.0b0032c8.png)
The about page on the Google I/O website. Throughout the site, hero sections have animations that the visitor can pause.