'Blogr' Landing Page using CSS & tiny JavaScript

Community feedback

• 

  Nic•595

  @nicm42Posted about 3 years ago

  I like your description of macaroni code :)

  I opened this, wondered why it had so much white space and then realised it's because all your images are missing. You need to upload those to GitHub, as it currently can't find them.

  Your Ubuntu font isn't showing up. It took me a while to spot it, but you've got an extra "-font" when you tell it the custom property to use: --ubuntu-font: "Ubuntu", sans-serif; font-family: var(--ubuntu-font-font);

  Some of your CSS is repeated. So for example, main-para-one and main-para-two have exactly the same code. What you can do is to give both those paragraphs a class of main-para, so then you'd have this:

  .main-para {
    font-size: 1.5rem;
    max-width: 48rem;
    color: hsl(207, 13%, 34%);
    margin-top: 3rem;
  }
  

  What I've found useful, to make the CSS code easier to read, is to space it out a bit more - so leave a blank line beneath each closing curly bracket (like you have after root). And then label each section so it's easy to see on skimming eg

  /**************** Header ****************/
  .header {
    /* Some styles go here */
  }
  
  .logo {
    /* Some more styles go here */
  }
  

  I don't know if you did it on purpose, but only your first dropdown menu works - because the JS is looking at the ID on the first one. If it looks at the class instead, then you can do all three. But that is a little more complicated, as the selector will get all of those lis and you have to loop through them to add/remove the active class when it's clicked.

  Marked as helpful

  2

  ---

  

  Dragosh Gheceanu•140

  @dragoshcodePosted about 3 years ago

  @nicm42 It won't be enough said to express how happy I am about your comment... About the images, I don't understand why they disappeared after deploying, and, should I add them all to the respective repo, won't it make it uglier with a lot of images in it?

  Wow, you are such a professional and cool guy, how only you took your precious time to inspect my code? Thank you so much I have only now noticed that, yes, there is written 'font-font' in the CSS, for future I'll be more attentive :)

  About repeating paragraphs, you are also so right, I wasn't seeing that I can make it in one selector at once! Huge thanks! 🤗

  I'll make more space after the closing curly bracket as well, HOW CAN'T I LISTEN TO A PERSON WHO KNOWS REACT AND HAS SUCH AN AMAZING STACK OF SKILLS AND COMMENTS MY BEGINNER'S WORK, THANK YOU ONCE AGAIN!

  About JS, yes, I did that only one dropdown menu on purpose, because only today I have understood a bit how to do it by following along a YT tutorial on that, which is in the README.md file in the repo, I didn't know how to loop through a class, because how I googled and understood, when using .getElementsByClassName, you have to loop, to transform in a string and so on... and I was already tired that moment.

  I opened all your account and watched your social presence It's amazing Nic! (that following you phrase is pretty genuine btw: 'I also like red') 😁

  Final: I appreciate your review of my first project so much, and I'd be so glad to connect with you! I followed you on Twitter and sent connect request on LinkedIn 🙌

  0

  

  Nic•595

  @nicm42Posted about 3 years ago

  @dragoshcode I am happy to help. The reason the images have disappeared is because the only place they are is on your computer and only you can see that. It won't make the repo ugly uploading the images to it. You need to keep them in the images folder, so the path to them is the same as on your computer, so when you look at your repo, there'll just be some files and a folder.

  With the dropdown menu, there is so much more to think about when you're doing three vs one. But now you know how to do one you can do three on your next project :)

  Marked as helpful

  1