I'm just beginner and I just use table element for positioning.

Community feedback

• 

  not-a-patch•200

  @notapatchPosted about 3 years ago

  You've done the hardest bit, version one. But you can make some improvements. With new programmers the most obvious issues you see is a lack of consistency in how they write. Inconsistent code is harder to read. For example:

  Bad - inconsistent, hard to read

       body{
          font-size: 20px;
      }
  
      .card {
          width: 450px;
          height: 680px;
      }
  
      .hearder-pic{
          width: 450px;
      }
  

  Good - consistent, easier to read

     body {
          font-size: 20px;
      }
  
      .card {
          width: 450px;
          height: 680px;
      }
  
      .hearder-pic {
          width: 450px;
      }
  

  You might want to see if you can get a linter to solve these problems. But fixing them by hand for a while is helpful, as learning consistency is a good habit.

  “I'm not a great programmer; I'm just a good programmer with great habits.”

  ― Kent Beck

  ---

  Regarding the work. You should try to solve CSS problems like this with Flexbox and flex grid instead of table. Save table for actual rows of data and keep Flexbox and CSS Grid for everything else. The reason is that Flexbox and CSS grid allow you to solve responsive problems easily. Look at this problem, changing between mobile and desktop is literally one line of CSS.

  • It is also worth fixing the 2 HTML issues and the 7 accessibility issues.
  • Consider getting a spell checker in the code, it might have picked up "hearder" which should be header.

  If there's anything you don't understand, I'm happy to write it again.

  Well done and keep going!

  1