Build a RESPONSIVE and ACCESSIBLE Accordion with ReactJS (NextJS) & Tailwind CSS! PLUS Dark Mode!
Let's create an ACCESSIBLE accordion with ReactJS (specifically NextJS) and Tailwind CSS!
In the event that you do not actually hear me say this in the video, I did make the decision to prepare all of the markup and styling for you. I know many (myself included) prefer a built-from-scratch approach, but I also wanted to place more of a focus on accessibility and functionality since design is so subjective. I'd love to hear your thoughts about this decision down in the comments!
Also, I know the sound and video quality is not the best. I do apologize for that, however I did not want my lack of professional-grade equipment to prevent me from creating this content for you all!
Timestamps:
0:00 Intro & Demo
3:03 Getting Started with Github
4:30 Cloning the repository into VSCode
4:59 git checkout
5:30 code overview
7:20 _app.js (Dark Mode)
8:37 ThemeSwitcher.jsx (Dark Mode Button)
11:20 NextJS Hydration Error (with fix)
14:25 Accordion Walkthrough
16:14 Aditus Reference
16:40 Creating Functionality
19:23 Displaying our open & close icons
21:28 Aria-Attributes
21:32 Aria-Expanded
22:14 Aria-Label
25:56 Aria-LabelledBy
26:28 Aria-Controls
26:52 Outro
Link to the Github Repo
https://github.com/alstudio93/alstudio-acc...
Link to Project Demo
https://alstudio-accordion.vercel.app/
Here is the link to Aditus - the website that helped me create this accordion.
https://www.aditus.io/patterns/accordion/
Website for ALStudio
https://www.alstudio.net
List of VSCode Extensions -- Copy and past the ExtensionID in the Extension Search Input in VSCode to be taken directly to the extension.
(Live Server)
ExtensionID: ritwickdey.LiveServer
(Rainbow Brackets)
ExtensionID: 2gua.rainbow-brackets
(Beauty)
ExtensionID: yhpnoraa.beauty
(Auto Close Tag)
ExtensionID: formulahendry.auto-close-tag
ES7+ React/Redux/React-Native snippets
This extension allows you to create functional components in React using commands like rafce
ExtensionID: dsznajder.es7-react-js-snippets
(Beautify css/sass/scss/less)
ExtensionID: michelemelluso.code-beautifier
Thank you to the following Developers on YouTube that truly make self learning 100x easier --
@The Net Ninja
@Coding Addict
@Dev Ed
@Kevin Powell
@JavaScript Mastery
@ILW Yennefer
Have a favorite YouTube Developer? Drop them in the comments so everyone can benefit from their instruction :)