Creating a photography website’s landing page using TUK’s components
Hey everyone! Maheen here back with another banger, as per the usual. Since I have been having so much fun creating landing pages for different websites I thought to myself, why not keep at it and continue the good work? Pat on the back for me. Whee.
So, for today, let’s look at how you can create a responsive, accessible landing page for a photography website in under twenty minutes. What that? I am exaggerating? Well, I guess you’ll just have to wait and see for yourself!
A bit of a recap on TUK
So, a brief background: I have been using TUK to create different landing pages. What’s this UI Kit that I speak of, you ask? Well, it’s a UI Kit for designers and developers alike and provides over 350 web UI components along with 10 templates with over 50 screens, making the job of developers, designers, and coders ridiculously easy.
So no more staying awake all night to develop websites from scratch and no more chugging ten cans of Red Bull to keep your eyes from closing. I’m only kidding. As developers, we’ll always be up late with empty cans of Red Bull lying next to our computers.
So, no more staying awake all night to develop websites from scratch and no more chugging ten cans of Red-Bull to keep your eyes from closing! I’m only kidding! As developers, we’ll always be up late with empty cans of Red-Bull lying next to our computers.
Getting Started
Let’s move to the fun part, shall we? Let’s look at how you can start using components provided by TUK to create a landing page for a photography website.
The first thing you’ll need to do is create your Html and Javascript file and open your project with Visual Studio Code (VSC).
Once, you have taken care of that, visit the TUK website and go to the Documentation page. There you’ll be able to see a bunch of ways you can add Tailwind CSS to your project.
Scroll to the Use Tailwind CSS via CDN section and copy the link provided by the website.
Paste this link in your Html file in VSC and you are good to go!
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 TUK to your website.
So, let’s look at how you can add the components provided by TUK one by one, shall we?
The Hero Section
To add the Hero Section to your landing page. Go to your TUK website and visit the explore page.
Now, scroll to the marketing components and Click on the Hero section. This will display the various components provided by TUK. There select the component that you prefer and click on the Show Code option for that component. Now, all you’ll need to do is copy the Html and the JS code in their respective files in VSC.
You’ll be able to view your website by clicking on the Open with Live Server option with VSC.
Making Changes
We are now officially ready to start making changes in our code. For the hero component, the first thing I changed was the logo on the top left corner. To change the logo, remove the SVG, and add an image tag with the source to your new logo.
After that, I changed the items in the navigation bar according to my landing page. Then, I changed the heading tag along with the picture, and Yup, that’s it!
Newsletter Section
I then added a newsletter section to the landing page and changed it into an About me section. Here, I changed the heading and the paragraph tags to display the services provided by the photography landing page.
After that, I replaced the image by simply changing the link to the source file in the image tag.
Creating a product portfolio by blog component
A photography landing page needs to have a portfolio section to showcase the pictures taken by the photographer. To add the portfolio, I used the blog component.
Changing the images and the text in the blog was super easy and I was able to do that in under 2 minutes.
Call-to-Action
Next comes the Call-to-Action. I selected a CTA section from the TUK website according to my preference. I then changed the image and the description in this section according to a photography landing page.
Footer
For my footer, I selected a footer with a newsletter section in it and modified it to cater to my needs.
Color Switch
Lastly, I changed the color of my website according to my needs. For that, I replaced the color provided by TUK with one of my choosing.
Told you so!
I know no one likes a bragger but let me just say I told you so this one time, just the one.
Yes, I wasn’t exaggerating when I said that creating a landing page with TUK is a matter of minutes. And of course, you don’t even have to worry about making the page accessible and responsive, the components provided by TUK handle that for you.
Check out the TUK website and have a look around at their components, templates, and everything.
So that was pretty much it for this article. I hope this helped you out, I hope you have an absolute blast developing UIs with TUK like I did.
Catch you on the flippity-flop!
Maheen.