If you're a developer and you find yourself struggling with making things look good then this video is for you!

I go over how I changed the landing page from this

to this

👉🏻 https://www.youtube.com/watch?v=eovEWBXSWIg

This is the landing page for The coding Career Handbook. You'll find my redesign live at https://coding-career-handbook.netlify.app

It's built using Gatsby and TailwindCSS, two of my favorite technologies at the moment. It's open-source as well at https://github.com/m-abdelwahab/coding-career-handbook

If you prefer reading, I wrote a summary of the changes I made + key takeaways ⬇️

The Hero Section

By far the most important section of any landing page. This is where users build the first impression and should be able to understand what the whole website is about.

So make sure that:

→ Use an attention-grabbing headline that focuses on the product's value
→ Make sure that there are clear call-to-actions

Table Of Contents Section

Having a table of contents that users can read is important.

People want to know exactly what they're paying for.

However, having it on the main page will result in a lot of scrolling.

A good approach is to have it on a separate page

About The Author Section

When designing things, sometimes "less is more"

You don't need a unique color combination

You don't need fancy layouts.

Keeping things simple works more often than you think

Pricing Section

If you offer different packages/ pricings a common pattern is to have a comparison table. This way your future customers can easily understand the differences and which package is best for them

If you enjoyed this you'll find that the video covers one more section (the book reviews)

Check it out here: 👉🏻 https://www.youtube.com/watch?v=eovEWBXSWIg