Using your knowledge of jQuery and the various plugins available for it, we're going to build an application that lists content using tabs and accordions.
Once that's complete, the rest of the workshop will be your time to experiment! Try researching different plugins and implementing them on the page.
- Fork and clone this repository
- Run
npm installto install dependenciesnpm start- start the BrowserSync servernpm run lint:css- lint CSSnpm run lint:js- lint JS
- Include jQuery and jQuery UI via a CDN. These can be found on Google's Hosted Libraries page
- Note that jQuery UI uses CSS and JS, so place these links in the appropriate areas. (CSS within the
<head></head>element, JS just before the</body>tag)
- Note that jQuery UI uses CSS and JS, so place these links in the appropriate areas. (CSS within the
- A user should be able to view four different paragraphs of text on the page using tabs. See jQuery UI tabs.
- Below the tabs, a user should be able to view four different images on the page using accordions. See jQuery UI accordions.
- Text can be obtained via Wikipedia, news articles, or placeholder text sites. Images can be obtained via a placeholder image site.
- Experiment with some other jQuery plugins that may interest you. Here are some different plugins available.
- Create your own jQuery plugin. Now that you've experimented with plugins, you'll be pleased to hear that making your own is actually pretty easy.
- All content is licensed under a CC-BY-NC-SA 4.0 license.
- All software code is licensed under GNU GPLv3. For commercial use or alternative licensing, please contact legal@ga.co.