Just practicing more stuffs

Community feedback

• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted over 3 years ago

  Hello, Raymart Pamplona! 👋

  Great work on this challenge! 👏 You've done a nice job in matching the design preview and I like the smooth transitions of the hover states of the navigation links and the mobile menu! 👍

  If you don't mind, I'd like to suggest,

  • Taking another look at the points at which the layout of the page changes since there are one or two places (namely around 1100px and 700px) when as the width of the screen becomes smaller, a horizontal scroll bar appears along the bottom of the screen and not all of the content of the page can be seen with scrolling to the left/right.
  • I think allowing the backgrounds of the hero section and the footer to fill up the entire width of the screen would be a good idea so that there isn't any empty space to the sides of the design on extra-large screens. 😉

  Keep coding (and happy coding, too)! 😁

  1

  ---

  

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  @ApplePieGiraffe Oh yes I knew that hahaha I got lazy at that part since i'm working on my freelances and I just slipped that challenge, but thanks for pointing out that part and that 2nd suggestion is a great idea btw but the thing is that if I made it take whole the viewport, then it doesn't matches what i'm copying hehe. Also can I ask something? How do you embed <code></code> when you are commenting? Like that list that you made and that code code thingy where it is highlighted?

  0

  

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted over 3 years ago

  @pikamart

  There's a little keyboard icon in the upper-left corner of the text box when you are typing a comment. If you click on it, it'll show you how to format your comments to include things like lists, bold/italicized text, etc. You can make lists by simply adding a dash before a line and you can format code snippets by surrounding them in backticks.

  Also, you can actually allow the backgrounds of certain sections of the page to fill up the entire width of the screen and still match the design preview by adding a max-width to the content inside those sections (so that they don't become too wide on extra-large screens) and just making sure that any background images don't get stretched when the size of the screen grows by adding background-size: cover to them. That's what I did here. 😉

  Hope that helps. 🙂

  0

  

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  @ApplePieGiraffe woah thanks a lot for that, I did not see that one hahaha thank you very much^^

  0