Day 11 & 12

Progress on my Product Landing Page - updated menu, form and grid

Continuing on with my Product Landing Page project…

I am beginning to get a bit tired of working on this one! It’s been a while.

I’ve made a few more changes to the code, but nothing major hence no updates recently. My progress has also been hindered a little bit as CodePen has been going down a lot this week due to a DDoS attack – I hope they get it sorted soon.

You can view my progress and my code on CodePen here. The original page that I need to replicate as part of the challenge is here.

What I have done:

  • I have updated the top navigation menu, so that the links now sit alongside each other in a row rather than on top of each other in a column. I also added a a:hover element, so that now hyperlinks are orange on hover.
  • I have also added styling to the top form. The button (which became an ‘input’ as per the user stories requirements) is now orange with no background, and it generally has more padding.
  • I have updated the ‘features’ section, so it now is central on the page (80% width), centered the icons and removed padding around the text (and added padding underneath each item).
  • I also fixed the media queries – so now all tests pass.

Things I have learned:

  • I was really struggling with the grid/flex box system and to get it looking right, so I had another look at the code. I think I was just over-complicating it. I added an icon and description class instead with display: grid, and width: 80%, and set the main #container to width: 100%; and margin: 0 auto; so that the grid would sit in the centre of the page. This works much better and I think looks much closer to the original.
  • I had trouble with getting the last two items to pass the required tests – the media query and the button – and asked on the FreeCodeCamp forum for help.
    • I realised that I had not read the User Story correctly – the form needed an input field, not a button field. Definitely important to read these very carefully!
    • The media query wasn’t working, as I didn’t realise that I need to target a #id or .class or tag inside a media query for it to work. Changing my code to:@media(max-width: 600px) #header-img {
      background-color: yellow;
      }

      Now works and is recognised by the test script!

  • I didn’t realise that p and h1, h2 and h3 tags add so much additional padding underneath an element – I couldn’t figure out why my text was so spaced out. I used Google Chrome’s Developer Tools to inspect the text, and saw that it had lots of extra padding added by the element itself. I removed the padding, and then just adding the required padding to the description class, worked and made it look much better (and much closer to the original).

I never figured out why the header set to position: sticky; wasn’t working. I think it may have just been my PC, as the next day I tried it on my laptop (without having changed anything!) and it worked fine. It does also work on my PC now, so it must have just been a bug. Very strange though!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.