Hello, hi, hey!
Hope you all had a great weekend because I sure did. I mean, who doesn’t love weekends, right? But this weekend was extra noteworthy. I don’t think I have been this productive, especially on a weekend, well, since forever.
I worked on a bunch of new projects and accomplished a ton. This has me on a kind of new high and has left me with a feeling that I can take anything life throws at me.
Well, on that positive note, let’s keep at it with this momentum that I’ve got going and dive right into it. I’m going to be making a landing page for this meal delivery service using TUK. By now, reading my articles, you must have memorized what my favorite UI Kit of all time is, what it does, how it does what it does, and why it’s the best.
It provides responsive, accessible, and cross-browser compatible components and templates that designers and developers can use to create websites in a matter of minutes. You don’t believe me? Well, why don’t I show you how to create a landing page for a meal delivery service to prove you wrong. Teehee.
Add Tailwind CSS to your file
So, the first thing you’ll need to do is create your Html and Js file in your Visual Studio Code (VSC).
Now, visit the TUK website and go to the Documentation page. There you will be able to view a bunch of ways you can add Tailwind CSS to your project. Scroll to the Use Tailwind CSS via CDN and copy the link from there. Simply paste it into your Html file and donezo! How easy was that?
<link href=”https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel=”stylesheet”>Marketing components
We are now ready to start adding components to our landing page. Go to the TUK website and click on the Explore page. There, you will get access to over 350 web UI application and marketing components.
For our landing page, we will be using the marketing components from the TUK website.
Hero Section
Scroll to the marketing components section and click on the Hero section. You’ll have complete freedom to select the variation you like. Click on the Show Code button on the top right side of the component you selected. Then, copy the Html and Js code and paste it to their respective files in VSC.
You can use the Open with Live Server option available with VSC to view the components added to your file.
Now, let’s start changing the code to create a landing page for a Meal Delivery Website. The first element that I changed was the logo for the landing page. To change the logo, remove the SVG tag and replace it with an image tag with your logos source code.
Once, you have taken care of that, you’ll have to replace the text in the heading and the paragraph tag with the text of your choice. You can change the items in the navigation bar just as easily. Lastly, change the image by changing the source in the image tag.
Adding a Newsletter Section
I added a newsletter section after the hero section to talk about the services provided by the meal delivery business.
For that, I changed the text and removed the subscribe button, and lastly changed the image to a more appropriate one. This way, I was completely able to change the Newsletter Section into an About Us section.
Changing Call-to-Action
I used a call-to-action from the marketing components and then changed the image and text in a matter of seconds.
Call-to-Action to Order Now
On top of the various application and marketing components provided, TUK also offers variations for each component provided. This enables developers to create the website design of their choice.
So, I used a different variation of the Call-to-Action component and changed it to create an Order Now section.
Footer
Lastly, I added a footer to the landing page. There are several variations from the footer to choose from. I chose the one that came with the newsletter section and made changes in that.
Ending on a positive note
Creating your landing page using TUK is this easy. You don’t have to worry about writing the code from scratch. You save a tremendous amount of time while using it, and on top of that, you don’t have to worry about making your website accessible and responsive.
So, if you are also looking to be productive and you want to utilize your time more effectively, you can check out the TUK.