Creating a Landing Page for an Online Learning Platform in a Matter of Minutes

Image for post
Image for post
Photo by Scott Graham on Unsplash

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 Tailwind UI Kit and it has been a lot of fun despite what you may think after my long and weird rant.

Tailwind UI Kit 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.

Image for post
Image for post

Setting Up Code Pen

The first thing you’ll need to do is open your CodePen. Just click the link below for that:

https://codepen.io/trending

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.

Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post

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!

Image for post
Image for post

Footer

For the last component, I added a footer and changed the name of the company along with the elements in the footer.

Image for post
Image for post

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 Tailwind UI Kit. Easy, right?

Image for post
Image for post
Image for post
Image for post

Thanks for reading guys

Believe in turning dreams into vision and vision into reality. A devRel, coding girl, and a strong supporter of messy hair and sweatpants.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store