Creating a responsive landing page for an event planning website using TUK
Hey everyone! Let’s start the day by creating something fun, why don’t we? Sound good? So, a little background before diving into the article today. I have been using TUK to create all sorts of landing pages and not to sound dorky but I’ve been having a lot of fun with it.
So, today I wanted to share how easy it is to create a responsive landing page for an event planning website using TUK.
A little bit of backstory
I feel like I should talk a little bit about why TUK is the way to go! It’s fairly simple really, it provides over 350 web UI components and 10 templates, and this makes the job of designers and developers extraordinary easily.
On top of that, ALL the components and templates provided by TUK are accessible. What this means is, that TUK is all about inclusive design. As a developer, this really speaks to me, I want to create websites that cater to the needs of every user. That’s not too dorky, right?
Develop Away
Any-hoo, let’s jump into the world of development and let’s look at how you can create a landing page using TUK.
Creating Html and JS files
So, the first thing you are gonna wanna do is create your Html and Javascript file. You can easily do that in your Visual Studio Code.
Adding the Hero component
Next, let’s move towards adding the components to our landing page. All you’ll need to do is visit the TUK website and go to the marketing section. Click on the Hero component.
This will display the variations for the hero component offered by TUK. You can select the one you prefer. Click on the Show Code option on the right corner, this will display the Html and JavaScript code for the component.
Now, all you’ll need to do is copy the Html and Js code in their respective files in VSC. That’s it! We are good to go! You will be able to view the added component by clicking on the Open with Live Server option. Easy peasy lemon squeezy, right?
We can now start making changes to our code. Change the logo by changing the SVG. Replace the logo according to the website. You’ll also need to change the items in your navigation bar according to your website. Add your business description in the heading and lastly, change the image in your hero component.
Features for the landing page
Now, that we are done with the hero section, we’ll add the features section. Again, all you’ll need to do is copy and paste the Html code from TUK. To change the features, edit the paragraph tag.
Tell your Story
After that, I added the Newsletter component to add a story about the event planning company. What I did was, changed the heading and added a description of the event planning company. Of course, I removed the subscribe button. Something as simple as removing the button completely changed the look for the entire component, it went from being a newsletter component to being a section that talked about the business.
Services Offered
So, to add the events covered by the Event Planning Company, I used the blog section. I changed the pictures along with the text description.
Call-to-Action
I added the call-to-action (CTA) component twice. In the first one, I talked about planning the events, and how to get started.
The second CTA was to talk about how easily the users can manage their budget while using the event planning website.
Of course, I changed the images and the text according to my website.
Subscribe Away
The landing page of an event planning should have a newsletter section to make the users subscribe to the website. All you’ll need to do is change the image and the text in their respective tags.
Footer
Now, just add a footer from the marketing components and make changes to the paragraph tag. I know you can make simple changes like this in your sleep. Well, I wouldn’t recommend it but you get the idea.
Changing Colors
Change the colors for all the buttons and the icons by searching indigo in the Visual Studio Code. Just replace it with a color you prefer and you are good to go.
What’s the Takeaway
I started using UI Kits a while back and I have to say. I haven’t found any of the UI Kits out there as helpful as I found TUK.
You should explore what TUK is offering and check if the UI Kit works for you or not! And maybe let me know what you think! That’s it! Have fun developing. Here is a link to it: https://tuk.dev.com