Skip to main content

Sveltekit-pokedex

This tutorial will guide you to the basic of Sveltekit framework. In this tutorial,we will create a Pokedex using the PokeAPI for getting data to display and TailwindCSS for styling.

What is Svelte?​

Svelte is a component framework that allows you to write pages and components in what you're used to – HTML, CSS and JavaScript. It is an open-source front end compiler.

Note that it is a compiler. This means that all the HTML, CSS, and JavaScript are built up-front into standalone JavaScript modules that reduces the load on the client (the browser).

It's compiled, rather than shipping a JavaScript run-time to the browser like React or Vue. This produces a much leaner project being shipped to the browser.

What is SvelteKit?​

SvelteKit is a new framework for building server-rendered websites and web applications using Svelte. It provides a set of tools and a unified API for building Svelte applications that can run on the server and the client.

SvelteKit builds upon the simplicity and performance of Svelte, adding features like server rendering, code splitting, and optimized client-side hydration. This makes it possible to build fast and scalable web applications that provide a smooth user experience, even on slow or unreliable networks.

You can learn more about how SvelteKit works here.

What is Vite?​

Vite is the build tool you use to compile SvelteKit projects. Vite was created by Evan You, the creator of Vue. Vite is framework-agnostic and a great addition to the SvelteKit toolset.

What is Tailwindcss?​

Tailwind CSS is a utility-first CSS framework that provides a set of pre-designed, pre-coded CSS classes that developers can use to quickly and easily style their web pages and applications. Unlike other CSS frameworks that provide a pre-designed set of UI components, Tailwind CSS provides a set of utility classes that can be combined in many different ways to create a wide variety of styles.

Assignment​

Follow this Pokedex Tutorial but we want you to use TailwindCSS instead of normal css for styling the website.

You can use svelte-add to configure the project to use TailwindCSS instead of adding TailwindCSS config files to your project manually with the following npm command.

npx svelte-add@latest tailwindcss