Custom Site Theme Picker Tutorial #1 - Intro & Setup

Key Takeaways

when somebody lands on your blog or website how are you going to get them to stick well one of the things you can do is provide some customization that kind of makes them feel like they're a part of what you're building so here I've got a basic blog and it's pretty basic overall we've got some nice shiny colors but down here I've got some custom site settings where you can like round all the radiuses of the buttons you can actually change it to a system or dark mode or even better still a '90s theme or maybe Dracula or material and then choose your custom kind of accent color all of this is what we're going to be building out in this project now this isn't so much about theming as much as it is about thinking through CSS and how you can make it more adaptable to things you might want to adjust That's The Power of a theming system it's a new way of thinking about writing CSS and interacting with user input with JavaScript hey what's up my name is Chris and a huge thanks to Sean for having me on the channel I have my own channel over at coding in public and if you enjoy this kind of thinking I do this kind of stuff a lot on my channel now a couple things you need to know before before we get started number one it would be good for you to have a pretty basic understanding of HTML CSS and JavaScript I will try to explain it in a way that's helpful for you but you do need to have a starting knowledge of all those three second we're going to focus primarily on HTML and JavaScript to start with so just getting the functionality working and then at the end of the series we'll look at CSS how to basically make these customized toggles and switches in fact we're going to hold off on the '90s the Dracula and the material theme until the last the 10th lesson in the series now in addition to having a basic understanding of HTML CSS and Java JavaScript you also need to have node.js on your machine you need to have at least 14.18 or higher or 16 or higher if you don't have that you can come in here and download it from nodejs.org and uh then you should be set and ready to go now I've tried to build this project out so that even if you're more advanced in your understanding of CSS and JavaScript there are several new kind of Concepts or ways of doing stuff that I think will be beneficial to you and if you're just beginning I hope this will still be accessible to you as we work through it all right so let's go ahead and get you started so that next lesson we can start actually templating out the HT for this right here all right what you're going to do is jump to the link in the description at custom site theming this is on my repo here and then just make sure you're on the main branch all you'll have to do then at that point is come to the code the green code button and click download zip that's your download that zip file to your computer and then let me open it up for you all right so I've got my folder open up here here's the custom site theming now you can rightclick and actually open this in vs code or whatever code editor you want to use or you can go the other way around where you open vs code first and then open up this folder I'm just going to right click and open this up all right and it just opened it up here in vs code you can see that I've got my index.html page a style.css page postcss and a package.json now let me just really briefly walk you through this if you're not familiar with the structure here but basically I've got a Dev script here we're using vit as our Builder you don't really need to understand how it works just to let you know what's going on and then we've got these Dev dependencies which will essentially help us with our CSS making it more accessible to people who visit the site but you shouldn't have to interact with really any of these now these are all kind of pushed through this postcss config file and that will take care of a lot of that minifying and auto prefixing and all the stuff you won't have to think about in this project what I'm going to do is open up this terminal down here which you can do from the menu or in this case I just hit control and the Tia key and then the first thing I need to do is with no. JS installed which again needs to be like 16 or higher or 14.18 or higher and if you're not sure what you're running you can do node-- version like this and it will actually tell you so here I'm running 20.2 but whatever you're running as long as it's higher than what I mentioned you should be set to go then I'm just going to type mpm install that will install my Dev dependencies and get me up and running okay so just like that all I need to do now is type mpm run Dev and that was one of our package.json scripts right here and when I do that it will actually run vit which will spin up that Dev server for me all right and just like that I've got Port 5173 up and running your code should look something just like this now all the files like assets like the mp3s the fabcon the headshots all that stuff lives in your public directory you shouldn't have to tach to this we're just going to be interacting with this index.html page the CSS page and then eventually we will create a Javascript file as well but now that we've got this up and running you should be ready to go as long as you're seeing this screen you're set if you have any trouble leave a comment in the description and I'll try to make sure I can help you out or others will as well now one other thing to mention quickly is if you ever get stuck you can always come over here to the GitHub Link in the description find the lesson that you got stuck on and then look at the finished code for that lesson if you have any questions about anything feel free to let me know in the description once again I'm really excited to build this out with you I can't wait for you to add this kind of theming to whatever sites you're building where you want people to have that level of control a huge thanks again to Sean for letting me do this on his channel let's go ahead and jump in to Liston two by the way if you want to watch this entire course now without YouTube adverts you can do it's all up on the net ninja website net ninja. deev you can buy the course for $2 to get instant access to all of it or you can sign up to net Ninja Pro and get instant access to all of my courses without adverts as well as premium courses not found on YouTube including my Udi ones that's $9 a month and you can get your first month half price when you use this promo code right here so I'm going to leave this link Down Below in the video description for you to sign up and I really hope you enjoy this series and please do not forget to share subscribe and like the videos that really helps a lot and I'm going to see you in the very next lesson