Learning to Code: Day 33 — Building a Product Landing Page

Hello everybody, I took a little hiatus as we had family over last week and our flat is a building site just now. Checking back in with FreeCodeCamp and I can see how we are tasked to building a Product Landing Page which should resemble this page example. Let’s check out the conditions to do so:

#1: My product landing page should have a header element with a corresponding id="header".

#2: I can see an image within the header element with a corresponding id="header-img". A company logo would make a good image here.

#3: Within the #header element I can see a nav element with a corresponding id="nav-bar".

#4: I can see at least three clickable elements inside the nav element, each with the class nav-link.

#5: When I click a .nav-link button in the nav element, I am taken to the corresponding section of the landing page.

#6: I can watch an embedded product video with id="video".

#7: My landing page has a form element with a corresponding id="form".

#8: Within the form, there is an input field with id="email" where I can enter an email address.

#9: The #email input field should have placeholder text to let the user know what the field is for.

#10: The #email input field uses HTML5 validation to confirm that the entered text is an email address.

#11: Within the form, there is a submit input with a corresponding id="submit".

#12: When I click the #submit element, the email is submitted to a static page (use this mock URL: https://www.freecodecamp.com/email-submit).

#13: The navbar should always be at the top of the viewport.

#14: My product landing page should have at least one media query.

#15: My product landing page should utilize CSS flexbox at least once.

Taking a glance at the example page, we have a header, which is in position:fixed; meaning it will remain static as the user scrolls, with anchor tags that direct us to specific sections within the page, (this would be done using anchors and sections with referral id hashtags). I think this will be my main learning point today.

We also have a video embed and several div boxes to create in a column, and a footer with the trademark underneath as a span element.

I start by right-clicking the page and hitting “inspect element” where I then used the source code structure of the example as a guide. It’s good practise to write out the code as you go instead of just copying everything over and learning little. Practise is best!

I found many new points of interest, mainly that when you say:

.product > ol {

margin: 15px 0;

}

.product > ol > li {

padding: 5px 0;

}

You can see the “>” symbol. This takes us down descendants that we want to target as we move through the child elements of a parent element in the relevant declarations in the style tags section of the HTML. Yeah, it’s a bit of a mouthful.

In the above example, the first declaration is referring to the ordered list within the .product class element, and the second is referring to the list within the ordered list, within the .product class element.

..several hours later..

Here is the final product! Take a peek through the code and see what you can spot that was mentioned above and where each condition was passed.

See you next time!