css grid, mobile first approach

Community feedback

• 

  Arturo Simon•1,785

  @artimysPosted about 4 years ago

  Really great job Rafet, mobille first and responds great, got the instagram gradient border effect working too. The detail in the cards look on point. I'll add some suggestions below.

  • you have a good structure to your HTML mark. To bring it to the next level look into html semantics if you haven't already. learn more here. It can give meaning to your containers. For this challenge look up main and article tags

  • The dark theme background does not take up the entire page because it's in the main container. Try the body for most background colors/images:

  body {
      background-color: var(--color-bg);
      min-height: 100vh;  // might not be needed for bg color but useful for background images for future reference
  }
  

  Toggle button: Fully functional 👍. My advice when creating custom elements. Consider assistive technologies like screenreaders. Since this is fully custom look into:

  • aria attributes to help giving your control meaning and help out assistive tech
  • hover styles to help visually something
  • see if you can use the tab key on your keyboard to focus and activate with the enter key

  Overall again great job. Keep on coding!! 👍👍

  2

  ---

  

  rafet•925

  @rafetbasturkPosted about 4 years ago

  @artimys Thanks for your feedback Arturo. It is really so descriptive.

  I know about the HTML semantics but I got accustommed to using div mostly because online courses mostly teaches that way. But from now on I will try to use them instead.

  I have changed my toggle div into a button element so tab and enter works :)

  0

  

  Arturo Simon•1,785

  @artimysPosted about 4 years ago

  @rafetbasturk that's great to hear.

  0
• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted about 4 years ago

  Hey, good job, rafet! 👋

  Your solution looks good and the light/dark themes work well! 👍

  One more tiny thing in addition to artimys' great feedback—there's a horizontal scroll bar that appears along the bottom of the page in the desktop and mobile layouts. Adding overflow-x: hidden to the body should easily get rid of this problem. 😉

  Keep coding (and happy coding, too)! 😁

  1

  ---

  

  rafet•925

  @rafetbasturkPosted about 4 years ago

  @ApplePieGiraffe Hello there! Scroll bar doesn't appear in my mobile, tablet and laptop. Why does it appear in your computer? How should I test it whether or not it appears on other browsers/devices? I'll add it anyway. Thanks for your feedback.

  0

  

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted about 4 years ago

  @rafetbasturk

  Hmm... that's odd! I wish I could take a screenshot to show you, but images aren't supported yet in comments. The scroll bar isn't so evident in the responsive developer tools... but it does show up in my browser window for some reason. IDK, nice job, anyway!

  0