Karim

@Galielo-App
Salvador Brazil, (Soon to Pennsylvania, PA)
590Points

I'm a junior front-end developer trying to make my dream app a reality.

I'm currently learning...

Advanced Javascript, Pure Functional Javascript, Objected Oriented Javascript, Typescript, React, Next.js

Latest Solutions

Latest Comments

    • HTML
    • CSS
    • JS

    Article Preview Content with HTML, CSS & JavaScript

    2
    Karim590 | Posted 4 months agocommented on Melvin's "Article preview component" solution

    Hello Melvin.

    Awesome build, here the answers to your questions:

    • It's better if you use max-height: 100%. The inherit keyword specifies that a property should inherit its value from its parent element. If the parent element had a different value, your code would look totally different.
    • Yes you could. Inside class="avatar" create another div an put inside the h2 and the img. This should work perfectly.
    • You did a very good job, your code is nice and clean. I would just suggest using BEM for naming your classes. This article will help you to get started.

    Happy coding and please upvote my comment :)

    1
    • HTML
    • CSS
    • JS

    HTML, CSS and JavaScript were the technologies used.

    2
    Karim590 | Posted 4 months agocommented on Ugochukwu Ejiogu's "Todo app" solution

    Hello Ugo!

    Awesome build, just a few tips:

    • Your background is repeating on bigger screens, this is happening because the image is not of the same size. A simple solution would be to add background-repeat: no-repeat; background-size: cover;. This will stop your background from repeating and will make sure that your background is the same size as your screen without stretching it, it's contained automatically.
    • I strongly suggest using unordered lists for semantic reasons. Use ul on id="todoList" and for all the children use li.
    • U should not use a percentage width on your class="to-do", this is making your main content look very small on smaller screens. I suggest using 550px instead of 35%.

    Please upvote my comment if I was helpful and happy coding :)

    1
    • HTML
    • CSS
    • JS

    fylo-dark-theme-landing-page-master

    5
    Karim590 | Posted 4 months agocommented on Mojtaba Mosavi's "Fylo dark theme landing page" solution

    hello!

    Sure, here are my opinions:

    • The best semantically speaking Html structure IMO is this:
      <header></header>
      <main>
        <section></section>
        //all of your sections should go inside a <section> nested inside main
        <section></section>
      </main>
      <footer></footer>
    
    • No, they don't. I prefer to keep them in another file so it is easier to maintain.
    • For me is actually working fine, but I would suggest using ::before with position: absolute (make sure the parent element is position: relative).
    • I usually use Figma or sketch.
    • If you're not a pro member, you will still have the jpeg of each page of the project. So open Figma, drop them inside your workspace, and create blocks to measure height and width.

    Please upvote my comment and happy coding :)

    3
    • HTML
    • CSS
    • JS

    Crowdfunding product page with scss and vanilla js

    2
    Karim590 | Posted 4 months agocommented on Sebastian Söderström's "Crowdfunding product page" solution

    Hello, Sebastian!

    Awesome build, just a few things about your js:

    • For loops are ok, but in javascript we really like using forEach and map, look at this example:
    //your for loop
      for (i = 0; i < radios.length; i++) {
         radios[i].addEventListener("change", openPledge);
      }
    //with forEach
      radios.forEach(radio => radio.addEventListener("change", openPledge))
    

    Trust me, this will make your code easier to write, read and maintain.

    • You don't need a openMenu() and a closeMenu(), u can use toggle and have a compacted, quality code. Look:
      function handleMenu() {
          document.querySelector(".nav-list").classList.**toggle**("open");
         document.body.classList.**toggle**("overlay");
    
         mobileMenu.childNodes[0].src = "./images/icon-close-menu.svg" ? "./images/icon-hamburger.svg"  :  "./images/icon-close-menu.svg";
      }
    

    For any question or suggestion feel free to ask :)

    Upvote my comment if I was helpful and happy coding :)

    1