Basic webpage layout using CSS Flexbox and media query

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted about 2 years ago

  Hi, Trezmor! 👋

  I am also a self-taught developer. It's great to meet another fellow self-taught developer!

  About the solution, I recommend changing the live site URL to https://trezmor.github.io/3-column-preview-card-component/3-column%20preview%20card%20component.html.

  Currently, it is visiting the index.html file where there's only the raw content for the page.

  In the future, I recommend using the index.html file. This way, this issue won't happen again in the future.

  Now, here are some suggestions for improvements.

  • There's no meta viewport tag. It means it is not a responsive website. So, I recommend adding the meta viewport tag (<meta name="viewport" content="width=device-width, initial-scale=1.0">). As a side note, if you use the HTML file from the starter files, this won't happen.
  • Use semantic HTML. Here are the reasons.
    • It gives tools or assistive technologies such as screenreader the information about the website like the page structure.
    • If or when the CSS doesn't load, the website still makes sense. It's because the browser's user agent stylesheet will get applied. So, the page will still make sense.
  • I recommend learning about HTML on the web.dev HTML tutorial. It will give you a good understanding of semantic HTML, why it matters, etc.
  • The alternative text is a descriptive text that should be human-readable. It should not have underscore like class name (unless it is needed to describe the image).
  • Also, those car icons are decorative images. They don't add meaningful content to the page. So, they should have empty alternative text (alt="").
  • I don't think the button element needs a name attribute.
  • Why did you wrap the font family with a media query?

  @media screen and (min-width: 800px) {
  
  @font-face {
    font-family: "Lexend Deca";
    src: url("LexendDeca-VariableFont_wght.ttf");
  }
  
  @font-face {
    font-family: "Big Shoulders Display";
    src: url("BigShouldersDisplay-VariableFont_wght.ttf");
  }
  

  I have three recommended videos. The first one tells how hard HTML is (HTML is not easy). The other two talk about modern CSS techniques and approaches.

  • Manuel Matuzović - Lost in Translation - YouTube
  • Andy Bell – Be the browser’s mentor, not its micromanager - YouTube
  • Stephanie Eeckles - Scaling CSS Layout Beyond Pixels - YouTube

  I hope this helps! Happy coding!

  Marked as helpful

  1

  ---

  

  Daniel Dekany•920

  @dknydPosted about 2 years ago

  Hey @vanzasetia !

  Wow, thank you so much for all these informative feedback, I didnt expect anyone to actually comment, not to mention in such a constructive way, I really appreciate it! :)

  I have already changed the live site URL, finally it doesnt just show text.

  Ill get trought the other points and check the videos you sent me.

  THank you again and have a great day! :)

  Trezmor

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted about 2 years ago

  @trezmor

  You are welcome! Have a nice day too! 👍

  1
• 

  Abhilash•920

  @Chiku100Posted about 2 years ago

  Hi Trezmor, your website currently shows only texts. Make sure u have linked CSS with HTML.

  Marked as helpful

  0