Creating a Flower Shop Website Using TUK
Hey everyone, today I wanted to do something fun and exciting! That got me thinking, why not create a website for a flower store. The word exciting can be relative when it comes to a nerd like me. Yes, creating websites is actually something I find exciting and enjoyable. What’s that? I’m too lame for you! Wish I could disagree with you. But we are who we, right?
Now that we have established that I am in fact a huge nerd. Let’s look at how easily you can create a website for a flower shop using TUK
Recap on TUK
If you haven’t used TUK, no worries! That’s what this nerd is here to tell you about. It is a UI Kit for designers and developers alike. It enables them to create websites in a matter of minutes, saving valuable time and resources.
So, how can I start using TUK, you ask? Well, that’s pretty simple actually. All you’ll need to do is acquire a developer’s license to gain access to over 350 web UI application and marketing components.
Let’s be honest here, who would be interested in throwing money without actually trying out the product, right? At least not me! So, if you are anything like me what you can do is try out the “Community License” first. It gives you access to 25 free components which is great for playing with the different components and deciding if TUK is for you.
Let’s get started
Now that we have covered the basics, let’s jump into the fun part.
- Open your Visual Studio Code (VSC) and create your Html and JavaScript file there. Once you have linked your js file with your Html one and added your head and body tags, you will be ready to start playing with TUK.
Adding Components
Once you have taken care of the technicalities, you’ll be ready to move to the fun part, adding the various components provided by the UI Kit to your website.
So, let’s look at how you can add the components provided by TUK one by one, shall we?
Hero Section
The first thing we will add to our flower store website is the “Hero Section”. For that, simply visit the TUK website and go to the components page. There you’ll be able to view all the components provided by TUK.
Scroll to the marketing components and click on the “Hero” section. This will redirect you to the hero components and you’ll be able to view the different variations of the hero components provided by TUK.
Of course, you have complete freedom to choose the one you like. Click on the “Show Code” option, for the one you like.
Copy your “Html code” and your JavaScript code in their respective files. Taa-daaa! The components have now been successfully added to your website.
You can view the components by clicking on the “Live Server” option in your VSC.
Time for some changes
Now, we’ll be making changes to the website. First, change the logo by editing the code for your “SVG”. You’ll also need to change the text according to your website. Lastly, change the image on the left side of the “hero” component.
Newsletter Section
After the header, I wanted to add a section telling the story of the Flower Shop. I used the “Newsletter” component for that.
Changing the components to fit the needs of your website is my favorite thing about TUK. TUK offers over 350 components, these components can then be edited and changed to different components. So, think about the total number of components at your disposal.
I copied the “Html” code and pasted it in my VSC. I then changed the image, removed the subscribe button, and changed the text to reflect the story of the Flower Shop. That’s it!
Blog Section
After the story, I wanted to add the flowers available in the shop. I used the “blog” section for this. Again, I changed a component available with TUK and changed it to cater to my needs. That’s the power of a UI Kit for you.
Contact Section
I then added the “Contact” section. Changed the text which was no biggie! I only had to edit the paragraph text to do that.
I added a newsletter component of my choosing to allow the users to easily subscribe to the email if they wanted. I also changed the image in the newsletter section.
Footer
Lastly, I added a footer. I chose a simple footer for the website. The simpler the better, right? Here what it looked like.
Of course, I changed the color of the background. It would be meaningless to add UIs components if you weren’t able to change the color depending on your needs.
And it’s done
As promised, I created a flower shop website for you! I’m not sure if you found it as exciting as I did but again that’s the nerd in me speaking.
I find TUK extremely helpful as they allow me to focus on the job at hand without worrying about the technicalities of design. Not to mention, the huge amount of time I save while using it!
Thanks for reading.
