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
Top comments (0)