Build and Deploy a Custom React Portfolio - Vite.js & Tailwind CSS
Вставка
- Опубліковано 7 вер 2024
- Build a custom website portfolio using React, Vite JS, Tailwind CSS, and deploy using Hostinger!
👉👉 Get 75% off with Hostinger’s special deal: www.hostinger.... (use code CODECOMMERCE for an extra 10% off)
🔥 Hostinger🔥
bit.ly/Hosting...
ZeroTo Mastery:
Master React JS Course - bit.ly/Learn-R...
Complete Web Developer in 2023 - bit.ly/Complet...
💻 Solve EDABIT coding challenges - BEGINNER! 💻
bit.ly/Code-Ch...
🔥 Connect with me on IG 🔥
/ fireclint
☕ Support the channel ☕
www.buymeacoff...
🔥 My Coding Equipment 🔥
Logitech MX Wireless Keyboard - amzn.to/3xKPFiN
Logitech MX Master 2S Wireless Mouse - amzn.to/3O5WmRD
SAMSUNG 49-Inch Gaming Monitor - amzn.to/3mvUy8M
Shure MV7 USB Podcast Microphone - amzn.to/3O00nqG
Mic Boom Arm - amzn.to/3NHn6YU
Monitor Desk Light Bar - amzn.to/3xzKlyj
Bro! have to say that this is my absolute favorite coding channels on youtube! one year ago I started following your tutorials, and now i jave landed a job as a react developer meanwhile studying at uni, so thank you!
thats nice bruh , can u suggest me some steps to become the same :)
Just wanted to say thank-you for such an incredible tutorial. You have a real knack for explaining things in a way most other creators in tech don't. And I love that you don't edit out mistakes, which is a very natural thing to happen in this space
Thanks for that man! I def edit out a few mistakes here and there :)
For those that Tailwind doesn't work, i've found the fix. I've been missing tailwindcss in the vite.config.js file.
So to fix it, your vite.config.js file should look like this:
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from 'tailwindcss';
export default defineConfig({
plugins: [react(),tailwindcss()],
})
I was not working on the responsiveness of the websites earlier. Thank you for opening the responsive world for me, now I get how important it is.
Your Netflix clone build is awesome too, on my hit list next.
Love the pacing of your tutorials! Not too slow, not too fast; just right.
Thank you!
Very professional and informative tutorial! Helped me a lot with getting use to tailwind again and understanding how to setup my projects in Hostinger. Thank you a ton!
Finally i found the npm installation of the text typing animation for VITE
never expected Macklemore to be teaching web development but I could not be more happy for that.
The rafce shortcut was so useful. Thank you so much! I learnt something very useful today!
Excellent tutorial, thank you very much for this help. Greetings from Venezuela.
Another video from Clint. Can hardly wait to get started!
This is one of the best minimal dev portfolio
Really nice, help a lot to understand how to use tailwind!! I made mine with maps for the menuItens, a little cleaner
Thank you so much, created my new portfolio following your tutorial using vitejs 🎉. I am learning react app including map, such as Geofencing. Very glad to see if you have the similar map project in future.
why do i get 6 vulnerabilities when i install the typing animation package???
Great content, really loving tailwind and learnt a lot through your projects, feels intuitive.
At the 1:07:24 mark, there is is mention of enctype='multipart/form-data', I never seen that before with forms, although I am new to coding, had to research on good old StackOverflow to find the answers, I didn't realise, when you make a POST request, you have to encode the data that forms the body of the request in some way.
I guess it is great although not mentioned, one still follows along and has to do further research when it bugs them :)
Although I don't have a work history in the tech sector as a programmer or any big enough projects to add into a projects worth mentioning yet, I will hide those components for now and also add additional features into the base tutorial, such as dark/light mode.
Looking forward to more great content to come, keep up the great work.
21:40 desktop sidenav
39:18 work experience
52:00 project
1:03:55 contact
09:00 Clean and Sweet
09:30 mobile nav
10:20 useState(false)
10:25 satnav(!nav);
10:30 handleNav
11:57 console.log('state changed')
12:00 ternary operator
19:29 progress break, AiOutlineHome
21:03 save point after icons
for the Mobile Nav.
-----------------------------------------------------
27:48 save point Menus Done
27:53 BG image component
30:10 image flip scale-x-[-1]
31:44 React-type-an
Loving this build so clean and easy to follow not finished yet. Hoping to use once complete to gain a job at the end thanks
So awesome! 🤘
@@codecommerce Hey I have pretty much built out my portfolio now in Projectitem.jsx how do you ref each project to link where the project resides thanks Neill
This tutorial is awesome! I was able to follow up and understand at least 80% of everything. This was so helpful I am new to react and tailwind and this makes such a difference. could you share some of the plug ins you use in VS code like the auto format and the auto population when you write in the className?
I believe that would be the "Prettier" extension in vscode :)
"ES7+ React/Redux/React Native snippets" creates that 'rafce' auto format and auto population for class names.
14:24 h-sceen should be h-screen
Ah dang it. Thank you lol
The map method does not output an array of data . Please help me ...
@codecommerce Hi! I need some help plz and Ty. For some reason when I am transferring my index.html and assets folder over to my public_html folder the assets folder will not transfer over. It says "An error occurred. Your account may be over its quota or you attempted to upload a folder." But the file only has a few pictures, not sure the issues. I would appreciate the help.
Thanks for the content! An advice: could you please use hooks (contexts, custom hooks, etc.) in your next projects?
Hello! Will you make a video of an e-commerce with react, tailwind and strapi or firebase? I like how you explain! greetings from Argentina!
The way you have explained I love it. Awesome 👌👌👌👌
i need help guys once i apply the image the sideNav component disappear completely I cant access it at all I can still access the right side one unless I am full screen
Interesting implementation, but how about solving the problem that arises when you press the mobile menu button while on a smaller window and then maximize the window? The mobile menu overrides takes the width of the whole page, the buttons become gigantic, and the on and off button disappears since the window no longer below medium size.
Did you find the solution?
52:35 are those lightsaber chopsticks??
They are most definitely light saber chopsticks. Not super practical because they are kinda big but they are cool 🤣
just amazing keep up the great work!
36:47 My h1 and h2 not displaying at the center. Kindly help
Hey there! Love this tutorial and was working on a project of mine, trying to implement the code I have onto a hostinger website and everytime I run "npm run build" in my server folder, I get errors. I added the "build": "tsc && vite build" to my package.json script and I am still not getting the components built. Any advice would be amazing! Thanks for what you do and keep it up!
Amazing Video!! Quick question, how do I go about updating the website? For some reason, it only shows the initially uploaded version i.e adding the dist folder into public.html. I have made a few changes to the website since then, but it doesn't reflect them. Please let me know how I can fix this. Thanks!
Hey Clint! I am loving your tutorials, kudos to you. I started playing with Tailwind and Vite. So far so good. Someone already asked; but what vs code theme are you using? mind sharing?
Great tutorial. Learned a lot.
Amazing as always, thanks for this.
Are any of you using webstorm and no hint from tailwind in Vite?
Hey guys, do we need some extra setup if the React App is using routes (react-router-dom)?
Added into the bucket list✌️
is anyone else getting an issue with the map method? it doesn't seem to output the array of data
may i know what extension you use to code in the visual studio code ?
Hi Clint! I did not find the github repo on the latest projects.
Was there a change about it ?
thanks a lot
Sir there are many types of websites except portfolio but every time portfolio is no good
I dont think you went over the links to github, linkedIn and the resume buttons, they do not work
can anyone share the link of the background image of Main.jsx component.
Hello sir I am getting an error at 12:43 sec of the video error is (Type annotations can only be used in TypeScript files ts(8010))
Can you please help I am new to react
Tailwind classes are not working even after configuring them , please help
Did you import everything?
Please i need help with deploying with Firebase authentication when i used react vite and tailwind it doesnt seem to work on google firebase auth
hey just for curiosity what vscode theme you are using? i like that colors
What plugin to install to create automatic template in react components? Thank you
ES7 React snippets ext :)
@@codecommerce Thank you so much)
Thanks man, amazing vid, mind sharing the git repo?
thank you
thank you very much 👑🌹♥️, you are awesome ♥️♥️
27:29 Woah how have you done that lol?!
Uff complete ✅
Please make a tutorial for this year 2023 from 0 to 100. This way your channel will be more attractive.
Tnx a lot
How can I use .env on Hostinger?
Hello Clint! I want ask you one question as a Mac user. Is it worth to get MacBook Air 2020 with M1 chip for web development? Greetings from Bulgaria! Have a nice day.
Hey dude! For web development I don’t think it is necessary. It’s what I like to use just because I’m use to macs now. But it’s certainly overkill. It doesn’t take much computing power for local environments. :)
Thanks for the answer! I appreciate that opinion. Keep going with these coding videos. I’m learning a lot of new things from you 😅
@@codecommerce hey just for curiosity what vscode theme you are using? i like that colors
Tailwind doesn't work for some reason
amazing ❤️🔥🔥
Smashing
Thank you sir!
very good tutorial, except that deploy on Hostinger is easy BUT not that fast. It took about an hour
It really should be pretty quick.. You can known it out in about 10-15 minutes if you are familiar with the process.
@@codecommerce Hi, it is kind of up and down. Sometime the process is quick. But sometime took very long.
The tutorial is awesome though. I really like how you explain. Easy to understand, truely
sir plz make Ecommerce Project with Redux toolkit and Tailwind css .plz its recommended
There is no Ecommerce Project in your channel so plz sir
can i get the source code please
Awesome
video is unclear, my eyes are aching
12:12
17:30
28:12
37:10
39:50
43:58
keep it a buck its pointless uploading this unless you got a repo youre not even using word wrap so we can see all of your code like what is happening lmaooo
Can you explain what you mean I’m new to front end
🤩🤩