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

In Part 10 of How to Design and Code a Product Landing Page, I continue coding the landing page. The last part of the series ended with me styling the header portion of the page. I was stumped on how to create the "slanted" effect with CSS.

In this video, I introduce my solution to that "slanted" effect as well as continue on down the page coding the next section.

The real life

In my opinion, coding is a lot of trial and error. There are times when you are presented with a new challenge. One which you have never had to solve before. This design, in particular, was a first for me in terms of the "slanted" effect I mentioned before. Trying to recreate this effect with code and making it scale was tough!

I'll be honest and say I ran into some issues when making the code match the static design. In terms of scalability, the code was tough to wrangle on all screen sizes. Through a lot of trial and error, I came to a stopping point in this section and will continue on in the next video.

In future videos, I revamp these sections and use a higher quality code stack.

The Series So Far

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