Creating a Landing Page for an Online Learning Platform in a Matter of Minutes
Hey everyone! Maheen over here with yet another box of wisdom nuggets for all y’all. Although I’m not sure if you have been finding my articles interesting or I’m just tooting my own horn. Beans, beans, the magical fruit, the more you eat, the more you toot.
So, before I start overthinking about whether you guys even find my articles interesting or not and whether I have just been wasting my time creating new landing pages and writing articles on it and why I have been creating landing pages using UI Kits, to begin with, and just what am I doing with my life and does anything that you do actually matter or is life just a bottomless pit of despair and everything I have been doing until this point has been an utter and complete waste of time?
Why don’t we start creating a landing page for an online course platform? Are you excited? *cricket noises*
A Brief Background
So, let me give you a bit of a backstory. I have been creating landing pages for various websites using TUK and it has been a lot of fun despite what you may think after my long and weird rant.
TUK is a UI Kit for designers and developers alike. It provides over 350+ web UI application and marketing components that you can add to your website to create the website design of your choice.
Setting Up Code Pen
The first thing you’ll need to do is open your CodePen. Just click the link below for that:
Now, click on the Pen option on the top left side, this will open your HTML, CSS, and JS editor.
Click on the Settings option next to the CSS editor.
In the Add External Stylesheets/Pens, add Tailwind CSS. Click on Save and Close and yup, that’s it.
Adding Components
You are now ready to start adding components in your CodePen Editor. For the landing page, the first thing that I added was the Hero Section. You’ll find it on the TUK website, on the explore page, under the marketing components.
TUK provides multiple variations of every component. You can select the one you like and click on the Show Code option.
Now, just copy the HTML and the JS code in their respective editors in CodePen and you are good to go.
Hero Section
Once, you have added your Hero component to the landing page, you can start making changes to it.
The first thing that I changed was the logo. To do that you can simply replace the SVG file with another one for your logo. Of course, you’ll also need to change the items in the navigation bar depending on the type of landing page you are creating.
Lastly, change the text of your headings and your buttons according to your website.
Features
After the Hero section, I added the features from the marketing components. Again, all I had to do was change the text according to my landing page.
Blog Section
Now, comes my favorite part. I added the blog section but modified it completely to a course section. Here I added the description of the courses provided by the online learning platform.
Call-to-Action
It’s always a great idea to add a call-to-action component to your landing page. It encourages customers to take action and helps them convert them faster. TUK provides a bunch of variations for this component. I added this component and changed it accordingly.
Testimonials
For an online learning platform, having testimonials is crucial. I mean, how else are the other customers going to know which courses to take? Again, all I had to do was change the text in this section and I was golden!
Footer
For the last component, I added a footer and changed the name of the company along with the elements in the footer.
Color Change
I changed the color of the landing page because, well, I wouldn’t make sense if I kept on using the same color provided by the UI Kit. I was easily able to do that by replacing the indigo color present in the HTML editor with teal.
All Good Things Must Come to an End
And that’s it, a mental breakdown and a ten-minute guide on how easily you can create your own landing page using TUK. Easy, right?
Thanks for reading guys