Skip to content
OverviewSolutions
16
Comments
7

ChristBM

@ChristBM-290 points

I am a web developer and programming lover in general. Graduated in Telecommunications and Electronics Engineering. I study at Platzi.

Latest solutions

View more solutions

Latest comments

  • ChristBM•290
    @ChristBM

    I will give you a couple of code examples to help you understand what is semantic HTML and what is not.

    <body>
  <header>
    <h1></h1>
    <nav>
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </nav>
  </header>
  <main>
    <section>
      <h2></h2>
      <h3></h3>
      <article></article>
      <article></article>
      <article></article>
    </section>
    <section>
      <form action="">
        <label for="">
          <input type="text" name="" id="">
        </label>
        <label for="">
          <input type="text" name="" id="">
        </label>
        <label for="">
          <input type="text" name="" id="">
        </label>
      </form>
    </section>
  </main>
  <aside>
    <section>
      <h2></h2>
      <p></p>
      <button></button>
    </section>
  </aside>
  <footer>
    <section>
      <p><span></span></p>
    </section>
  </footer>

    On the other hand, I can do the same thing just using the <div> tag. What do you think is better for the code reader? Read only ''divs'' or that the tags have some meaning?

    Marked as helpful
  • ChristBM•290
    @ChristBM

    Good job @Sneflenie I checked your code and it's ok. If you want to improve it, read more about semantic HTML tags and CSS BEM class notation. Semantic HTML tags BEM

    Marked as helpful
  • ChristBM•290
    @ChristBM

    I really liked the animations you used, I can tell you put a lot of effort into it. Good job :)

  • ChristBM•290
    @ChristBM

    Hi, great job EKREM, This topic can be interesting to you: CSS backdrop-filter

    /* <filter-function> values */
backdrop-filter: blur(2px);
backdrop-filter: brightness(60%);
backdrop-filter: contrast(40%);
backdrop-filter: drop-shadow(4px 4px 10px blue);
backdrop-filter: grayscale(30%);
backdrop-filter: hue-rotate(120deg);
backdrop-filter: invert(70%);
backdrop-filter: opacity(20%);
backdrop-filter: sepia(90%);
backdrop-filter: saturate(80%);
    Marked as helpful
  • ChristBM•290
    @ChristBM

    Hi PHOENIXDEV22’S, good job. I review your code and all is ok. You know how is selectors specificity, well I advise you to learn about that :) in advance I tell you that avoid using Tags, IDs and important! And only use classes. When you do that, the navigator spend less time to processing CSS file, for that reason the performance up. Other reason to use only classes is that the classes are easier to read by people.

    Marked as helpful
  • ChristBM•290
    @ChristBM

    Hola Antonio muy buen trabajo. Me estuve fijando que al hacer el redimensionamiento de la pantalla entre 423px y 800px de ancho las card se achata. Esto lo puedes mejorar si pones el mediaquery a partir del ancho de 930px (para este reto en particular)

    @media screen and (min-width: 930px) {
  // aquí pon los estilos que quiere que tenga tu card cuando se esté viendo desde una pantalla de escritorio
}
    Marked as helpful
View more comments