Google Calendar API Event Page (Tailwind Project) | HTML and Tailwind CSS Project

Google Calendar is the default system for a reason: it’s stable, ubiquitous, and easy-to-use. Displaying calendar data, however can be a bit clunky, especially if you want your event page to reflect your site’s branding. In this series, I’ll show you how to: - Create a custom calendar event page with HTML, Tailwind CSS, and ViteJS - How to publish your site to Netlify - How to get a Google API key and store it safely as a Netlify environmental variable - How to write your own custom serverless function, allowing for dynamic query string parameters - How to fetch dynamic calendar data from your Google Calendar endpoint and display it on your site. 🔗 Key Links 🔗 - Live code: https://codinginpublic.dev/projects/google-calendar-event-page/ - GitHub: https://github.com/coding-in-public/google-calendar-event-page Help me make it better! Contribute to the community-improvements branch on GitHub. 📹 Other Videos in this Series 📹 - Full Playlist: https://www.seevid.ir/fa/w/SOsGToYI0MQ&list=PLoqZcxvpWzzeuzWsIpH-N1b3vnRVbrdm3 - Video 1: https://youtu.be/SOsGToYI0MQ - Video 3: https://youtu.be/wf5gVe8hWnk - Video 4: https://youtu.be/_ec2ps7w8s4 --------------------------------------- 🔗 Additional Links 🔗 - Tailwind: https://tailwindcss.com/docs - Tailwind CSS IntelliSense VSCode extension: https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss --------------------------------------- 📹 Related/Mentioned Videos 📹 - Emmet for HTML: https://www.seevid.ir/fa/w/AGAXv3GjH60 --------------------------------------- ⏲️ Timestamps ⏲️ 0:00 Introduction 0:57 Explaining Tailwind CSS 2:53 Building out the page 22:38 Customizing Tailwind --------------------------------------- 🌐 Connect With Me 🌐 - Website: https://www.codinginpublic.dev - Blog: https://www.chrispennington.blog - Twitter: https://twitter.com/cpenned Source for images: Google, Tailwind, Netlify

• #howto_style
• #tailwind
• #tailwind_css
• #google_event_api