SvelteKit & TailwindCSS Tutorial – Build & Deploy a Web Portfolio

Learn how to use SvelteKit & TailwindCSS by building a responsive web portfolio.

Course created by @Smoljames

⭐️ Resources ⭐️

⭐️ Contents ⭐️
00:00 Intro
01:22 Project Demo
02:39 Code portfolio
09:39 Implement particle effect
12:05 Create styles
13:37 Create components and layout
34:53 Create projects section
50:33 Implement About section
1:07:35 Develop Footer component
1:12:20 Conclusion

🎉 Thanks to our Champion and Sponsor supporters:
👾 davthecoder
👾 jedi-or-sith
👾 南宮千影
👾 Agustín Kussrow
👾 Nattira Maneerat
👾 Heather Wcislo
👾 Serhiy Kalinets
👾 Justin Hual
👾 Otis Morgan
👾 Oscar Rahnama

--

[dezlymac]

A tutorial that isn't Tailwind + React / Next.js. I've been looking for this! Thanks!

[malthegram]

i really liked the part where you deployed

[MarkoKukovec]

Thank you! Awesome tutorial! It's going to take a while to digest and try out everything you laid out.

[gitishsandhu]

Thanks! Made it and Sent it to my mom! (She really liked it) ❤

[greatfiredragon]

thank you, I've just wanted to learn swelt^^

[Noritoshi-rm]

Oh just in time, was learning Tailwind and Svelte

[kehan]

Great Video. But I think when explaining how to use a Web UI Framework, you could put some concepts like State Management in Svelte.

[jeanscreen]

Hey, I really enjoy the knowledge and content here but the text is way too small to read and follow along with the video. The amount of times I mistook a [ for a { is crazy, even in the highest quality it's really difficult to see the code text.. please zoom in next time on the code window so everyone can see it! Thank you again for putting this out for free :)

[micheal-dqvz]

do you have any scroll based animation video in svelte?

[logh]

Nice portfolio but why using svelte though? we could have done it in plain React and it would have been the same. It's more of a Tailwind tutorial than a Svelte tutorial IMO

[michaelnkhoma]

Am I the only one who thought the guy was John Cena ? 🤔

[codedlord]

hey bro thanks, but i tried this but i am having a broken pictures, i've tried both jpeg, png and avif images, pls help!!

[spec]

please any ressource on where i can learn about the various classes use for styling the webpage

[_never_on_sunday_]

Loved the "easy-breezy-cover girl" comment at 8:37 💀

[cxl]

Hi! i am trying to deploy to github pages but it's now working, is there a way to fix it?

[tvbreum]

Thanks for the video. Sadly everything regarding Svelte drowns in one Tailwind class after the other making the code unreadable. Return to your code in 6 month and read it again. Writing code that way is not maintainance friendly.

Anyway good luck. Keep trying. You will understand this comment when you have tried switching between technologies and not working day in and day out with the same tech.

[GauravGupta-ripv]

Can I deploy it on Netlify or somewhere else for free?

[zweisser]

i believe you misspelled "fanatic" (as "finatic") on the site demo, ~ 02:05

[whoisbin]

how do i add links to my projects in the "projects" section?

[MikhailCazi]

Most of this "tutorial" is just listing down tailwind classes, but doesn't really explain why and how they work together.