Responsive landing page using css flex

Community feedback

• 

  P

  Sayed Ali•110

  @sydalwedaiePosted 5 months ago

  Hello Saeed. Excellent work. Your code is well-organized and easy to follow. I pretty much used the same technique to center the main container.

  Here are a couple of suggestions:

  • Consider using CSS variables. I use them to store the design colors. Here's how I use them:

  :root {
    --color-green: hsl(75, 94%, 57%);
    --color-grey-700: hsl(0, 0%, 20%);
    --color-grey-800: hsl(0, 0%, 12%);
    --color-grey-900: hsl(0, 0%, 8%);
  }
  
  
  .container {
    background-color: var(--color-grey-900);
  }
  

  I know the syntax is weird but it's totally worth it.

  • Would you like to remove the vertical scroll bar? Try setting the .main container's height to 95vh and the attribution container to 5vh. This way your total page height becomes 100vh, instead of the current 100vh+footer-height.

  • I would personally use a p tag for where it says "Front-end developer and avid reader." This line is a block-level element. A span is more useful for situations where you want to style a portion of the paragraph (or maybe just a word) differently than the rest.

  • Consider using Prettier. It's a fantastic plugin available in VS Code. It takes care of formatting your indentations, freeing you to concentrate on writing code. Try this video for a quick setup.

  Marked as helpful

  0

  ---

  

  P

  SaeedAbakah•140

  @SaeedAbakahPosted 4 months ago

  @sydalwedaie thanks for the input! really helpful

  0