4-more-libraries.md

More Libraries

Back to Overview | Next: Creating a Component

Now that you've installed your first library, you might want to explore other libraries to add custom styles, effects, and more to your portfolio.

There are libraries for nearly everything you can imagine. If you've seen some functionality on a website, someone has probably made an open source library to make it easy to implement.

Here are some general ideas to get you thinking:

• Look & Feel

  • Icon Libraries
  • Fonts & font libraries
  • Animated backgrounds

• Animation

  • General animation libraries
  • Hover effects
  • Scolling effects
  • Parallax scrolling
  • Animated SVGs ("drawing" effects)

• Images & Screenshots

  • Galleries
  • "Lightboxes"
  • Sliders and Carousels

• User Interfaces

  • Swiping and Mobile effects
  • Dropdown menus
  • Pop-Up windows / dialogs
  • Tabs
  • Expanders / Accordions

How to Find Libraries

For most libraries, a quick Google search will help you find what you need. Try searching for the functionality you're looking for, combined with keywords like "npm" and "JavaScript library." For example, if you're looking to add smooth scrolling, search for something like "smooth scroll npm library." You’ll likely find multiple options with instructions on how to install and use them.

Note: There are numerous “frameworks” in the JavaScript ecosystem as well as systems called “CMSes” (Content Management Systems). If you come across a "plugin" for a CMS like WordPress or Drupal, that’s not a library you can use for this project. If you encounter a framework like React, Vue, or Svelte, you might be able to use components from them, but for this project, you’re likely better off searching for what’s called a “vanilla” JavaScript library. These are simpler, more straightforward libraries that don’t require a full framework to be used effectively.

Using AI for Help

When you're looking for the right library or need assistance with integrating a library into your site, AI can be a helpful resource, especially because most libraries can be installed in multiple ways, and it can be hard as a beginner to know which instructions to follow. You can use Copilot directly in this project to help you learn how to find and install libraries that add new functionality to your website!

There are libraries for virtually anything you've ever seen on a website, from adding animations (like we did with the animate-on-scroll library) to adding image galleries, sliders, and more. If you can describe what you want to do, AI can often help you find a library that fits your needs and guide you through the installation and onfiguration process.

---

Sample AI Prompt:

If you don't yet know what library to use:

Can you help me find a library that will: [YOUR TEXT HERE] and guide me through installing it? I am building a basic portfolio using vanilla JavaScript and Vite in a GitHub Codespace. I am a beginner programmer just learning the basics of HTML and JavaScript and am looking for simple solutions using third-party libraries to add functionality to my site. Please avoid extra complexity and complex frameworks. Guide me toward simple solutions where I can implement things by, for example, adding a data attribute to an element to enable an animation. I already have a basic public styles.css file and a basic main.js file, and I use Vite to build my project, so I can put any imports from node_modules in main.js so they get built properly.

If you already have a library:

Can you help me install and use [LIBRARY NAME] in my project? I am building a basic portfolio using vanilla JavaScript and Vite in a GitHub Codespace. I am a beginner programmer just learning the basics of HTML and JavaScript. I already have a main.js file included in my project that can build through Vite, where I can centralize my imports so they get built properly.

---