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

Continuing on in part 9 of the screencast series titled "How to Design and Code a Product Landing Page" we dive deeper into developing and styling the header portion of the page.

The first half of the video is dedicated to me walking you through how I make use of custom fields as well as implementing them.

To make my life easier I make use of Sublime Text snippets which I highly recommend you make use of if you use the code editor. Other code editors such as Atom or Visual Studio Code can do just as good a job. Use whichever editor you prefer. I find myself jumping from one to the other from time to time to keep things fresh.

The snippets I create in Sublime feature what is known as tab completion. This is a blessing when adding a snippet as you can code faster than you ever thought possible.

Learn more about creating snippets here.

Styling the custom fields

After adding both the data and the advanced custom fields code to the theme I begin styling each element accordingly. The second half of the video is dedicated to making the basic HTML output match the design of the product landing page as close as possible. In the next video, I wrap up styling the header and move on to the next sections.

The Series So Far

• Part 1
• Part 2
• Part 3
• Part 4
• Part 5
• Part 6
• Part 7
• Part 8