How to Design and Code a Product Landing Page - Part 12

In Part 12 of my "How to Design and Code a Product Landing Page" screencast series, I continue building out the next section of our design.

The "Benefits" section of our design was fairly wrapped up in the previous video of the series. From there I continue down the page to bring the "Why" section to life.

In this section, I show you how I add another custom field grouping and output the content from the admin area of WordPress to the front end of the site. On top of that, we add some images and style each bit of content to match the design as close as possible.

To round out the video I add a large background image of lemons. I struggle a bit getting the image to display perfectly but eventually land on a working solution using a CSS background-size property known as contain.

I hope you're finding these videos useful. As with all web development, much of it is trial and error. I purposely don't cut out portions of the video where I struggle to get something working so you can see how developing websites and apps is like in real life.

As always, feedback is crucial in order to make me know what you want to see, ways I can improve my content, and is just an all-around great way to network. If you have any thoughts, ideas, and/or concerns I invite you to share in the comments.

The Series So Far

• Part 1
• Part 2
• Part 3
• Part 4
• Part 5
• Part 6
• Part 7
• Part 8
• Part 9
• Part 10
• Part 11