DEV Community

Cover image for Landing Page Redesign| Design For Developers
Mahmoud Abdelwahab
Mahmoud Abdelwahab

Posted on

Landing Page Redesign| Design For Developers

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

Landing Page before the redesign

to this

Landing page after the redesign


This is the landing page for The coding Career Handbook. You'll find my redesign live at

It's built using Gatsby and TailwindCSS, two of my favorite technologies at the moment. It's open-source as well at

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

Hero section summary before and after

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

Table of contents before and after

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

About the author section before and after

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

pricing section before and after

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

Check it out here: 👉🏻

Top comments (0)