DevCon Hack - Practice Repo

Usage

To browse the page, run the serve script on the command line:

./serve

Task Guidance

Here are some inspirations for the hands-on sessions. They should only guide you, this is not a hard task list.

• Rebuild our form components with react-area components
• Play with advanced usages of grid, subgrid, container queries, size ranges (clamp, etc.)
• Build an own list/tiles component using the tools above together with tailwind

Useful Links

• Container & Media Queries
  • https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_container_queries
  • https://css-tricks.com/digging-deeper-into-container-style-queries/
  • https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries
  • https://tailwindcss.com/docs/container
• Grid
  • https://css-tricks.com/snippets/css/complete-guide-grid/
  • https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Subgrid
• Min, Max, Clamp
  • https://developer.mozilla.org/en-US/docs/Web/CSS/min
  • https://developer.mozilla.org/en-US/docs/Web/CSS/max
  • https://developer.mozilla.org/en-US/docs/Web/CSS/clamp
• React Aria Components
  • https://react-spectrum.adobe.com/react-aria/TextField.html