Skip to content
OverviewSolutions
17
Comments
55
Vicktor
@Victor-Nyagudi

All comments

  • Vicktor•900
    @Victor-NyagudiPosted almost 2 years ago

    Hi, Fernando.

    Nice attempt on this one. I'm glad you used the BEM naming convention.

    I noticed you queried the DOM for all the questions and then added a click event listener on each one in your JavaScript.

    This works for a small solution like this one but is not the best for performance. In order to save on performance, you could attach an event listener to .card and get where the user clicks on using e.target.

    If the area the user clicked on is a question, you can then reveal the answer.

    Here's an example of what the code could look like:

    const card = document.querySelector('.card');

// This is an alternative way of responding to click events. 

// You can still use 
// card.addEventListener('click', (e => { code in the function goes here e.g. console.log(e.target); }))

card.onclick = function(e) {
   console.log(e.target); // <- Log to the console what was clicked on

   if (e.target.classList.contains('card__question')) {

      // e.target.chidren[1] gets the answer. Try logging it to the console to see what it returns

      e.target.children[1].classList.toggle('inactive');
   }
}

    This isn't the whole solution, but you can build on it to improve your JavaScript.

    Hope this helps.

    All the best with future solutions.

    Marked as helpful
    0
  • Vicktor•900
    @Victor-NyagudiPosted almost 2 years ago

    Hello, John.

    Your solution is very impressive! Nice work.

    I noticed the countries' images are different sizes. You could potentially wrap them inside a <span> and give it a min-height and min-width and set these dimensions according to the smallest country's image.

    You could also do the same with the max-width and max-height and set them according to the smallest image's dimensions.

    This way, all the images grow to a fixed maximum point and shrink to a fixed minimum point.

    Try it, and let me know how it goes.

    All the best with future solutions.

    Marked as helpful
    0
  • Vicktor•900
    @Victor-NyagudiPosted almost 2 years ago

    Hi, Deeem.

    You can also use display: grid, however, I'm curious why you don't want to use flexbox.

    Is it giving you issues?

    Before grid and flexbox, front-end developers relied on float and clear to position items inside a container. It wasn't always the best, but it got the job done.

    Read more about float and clear here.

    Hope this helps.

    0
  • Vicktor•900
    @Victor-NyagudiPosted almost 2 years ago

    Hi

    Good attempt on this one.

    Different people organize their CSS in different ways.

    Some like to have all the text-related styling grouped together while others prefer to organize their styling in alphabetical order.

    A lot of it depends on what works for you. In a team, there'll probably be a pattern to follow, so this also varies depending on whom you're working with.

    I'd recommend using the BEM naming convention for your classes. It stands for Block Element Modifier, and I find it very helpful in organizing my classes.

    Hope this helps.

    All the best with your other solutions.

    1
  • Pedro Beltran•70
    @Alex-Beltran97Submitted almost 2 years ago

    1. I didn't want to create 2 html files to show both desktop and mobile views, so I created a JS script to calculate the resize in the browser to know which image is the right one depending on my browser resolution.

    2. The JS script to listen de resize event

    3. Yes, but I am not sure about a specific question, but I would like to get some information about it.

    / Mock-up-responsive-challenge

    3
    Vicktor•900
    @Victor-NyagudiPosted almost 2 years ago

    Hi, Pedro.

    You only need to have one HTML file, and that's index.html.

    If you want to style the HTML differently for different screen sizes, you can use media queries.

    These let you add breakpoints e.g. 992px and up, so you can add styling only for a certain screen size and smaller/bigger.

    If you want to use different images on different screen sizes e.g. mobile and desktop, you can use the <picture> element.

    It lets you determine at what breakpoint you want to change the current image to a different one.

    Read more about the picture element here.

    Hope this helps.

    Good luck with your other solutions.

    Marked as helpful
    1
  • Nemanja•130
    @Dayne2xSubmitted almost 2 years ago

    I completed this one as well. It doesn't look like it, but this was pretty difficult for me to align all items properly. If there's anything wrong with how I wrote the code and you have some pointers they would be much appreciated.

    Stats Preview Card

    1
    Vicktor•900
    @Victor-NyagudiPosted almost 2 years ago

    Hello, Nemanja.

    This is a good try.

    If you want to align all the items in, for example, .text-card, you can give it some padding only instead of giving everything inside it some padding.

    This makes it easier since you'll only need to change the padding in one place instead of having to change it for .title, .main-text, and .stats.

    Here's an example of what the code could look like after removing the padding for .title, .main-text, and .stats:

    .text-card {
   background-color: hsl(244, 38%, 16%);
   border-radius: 12px 0 0 12px;
   padding: 1.5em;  // <- padding is applied once here. Changing this affects all elements inside .text-card
}

    Another reason your solution isn't responsive is that you've given .text-card a height and width using px. This is an absolute unit that doesn't change regardless of screen size.

    Here's where you did it in the CSS:

    .text-card {
    background-color: hsl(244, 38%, 16%);
    height: 500px;
    width: 700px;
    border-radius: 12px 0 0 12px;
}

    You can remove the height and width properties because this will prevent the container from growing and shrinking naturally as more content is added or taken away.

    You can then use padding to add space around the content.

    Hope this helps.

    Good luck with your future solutions.

    Marked as helpful
    0
  • Vicktor•900
    @Victor-NyagudiPosted almost 2 years ago

    Hi, Titus.

    Good attempt on this one.

    First things first, if you have a bug in your code, it's standard practice to open an issue in the repo. This could be a bug, a requested feature, or asking for help, just like this issue I created in your repo.

    I noticed you used an <article> as a container for the cards here.

    <article class="page-cards"> // <- Here it is
<div class="card first">
  <img src="" alt="">
  <h2>Check out our most popular courses!</h2>
</div>
<div class="card">
  <img src="./assets/icon-animation.svg" alt="Animation">
  <div class="card--details">
    <h2 class="card--title">Animation</h2>
    <p class="card--info">Learn the latest animation techniques to create stunning motion 
      design and captivate your audience.</p>
    <a class="card--link" href="">Get Started</a>
  </div>
</div>
<div class="card">
  <img src="./assets/icon-design.svg" alt="Design">
  <div class="card--details">
    <h2 class="card--title">Design</h2>
  <p class="card--info">Create beautiful, usable interfaces to help shape the future of 
    how the web looks.</p>
  <a class="card--link" href="">Get Started</a>
  </div>
</div>
  
<div class="card">
  <img src="./assets/icon-photography.svg" alt="Photography">
  <div class="card--details">
    <h2 class="card--title">Photography</h2>
    <p class="card--info">Explore critical fundamentals like lighting, composition, and focus 
      to capture exceptional photos.</p>
    <a class="card--link" href="">Get Started</a>
  </div>
</div>
<div class="card">
  <img src="./assets/icon-crypto.svg" alt="Crypto">
  <div class="card--details">
    <h2 class="card--title">Crypto</h2>
    <p class="card--info">All you need to know to get started investing in crypto. Go from beginner 
      to advanced with this 54 hour course.</p>
    <a class="card--link" href="">Get Started</a>
  </div>
</div>
<div class="card">
  <img src="./assets/icon-business.svg" alt="Business">
  <div class="card--details">
    <h2 class="card--title">Business</h2>
    <p class="card--info">A step-by-step playbook to help you start, scale, and sustain your business 
      without outside investment.</p>
    <a class="card--link" href="">Get Started</a>
  </div>

</div>
</article>

    I'd recommend using a <section> instead.

    <article> works best for blocks of text that can make sense on their own or when shared, for example, an article, as the name suggests.

    Here's some more information on using the article tag you'll find useful.

    Either way, good job on thinking about using semantic elements in your HTML. A lot of people forget about them.

    Hope this helps.

    All the best with other solutions.

    1
  • Vicktor•900
    @Victor-NyagudiPosted almost 2 years ago

    Hi.

    Nice try on this one.

    You're getting warnings in the accessibility report because your solution lacks semantic elements.

    These help screen readers know more about what each part of the page is about.

    One thing you could do is use a <header> tag here inside of a <div>.

    Your code:

    <div class="header">
        <div class="icon__star">
          <svg
            class="icon"
            width="17"
            height="16"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="m9.067.43 1.99 4.031c.112.228.33.386.58.422l4.45.647a.772.772 0 0 1 .427 1.316l-3.22 3.138a.773.773 0 0 0-.222.683l.76 4.431a.772.772 0 0 1-1.12.813l-3.98-2.092a.773.773 0 0 0-.718 0l-3.98 2.092a.772.772 0 0 1-1.119-.813l.76-4.431a.77.77 0 0 0-.222-.683L.233 6.846A.772.772 0 0 1 .661 5.53l4.449-.647a.772.772 0 0 0 .58-.422L7.68.43a.774.774 0 0 1 1.387 0Z"
              fill="#FC7614"
            />
          </svg>
        </div>
        <h1 class="heading-primary">How did we do?</h1>
</div>

    Code using the <header> semantic element:

    <header class="header"> // <- Replaced div with header tag
        <div class="icon__star">
          <svg
            class="icon"
            width="17"
            height="16"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="m9.067.43 1.99 4.031c.112.228.33.386.58.422l4.45.647a.772.772 0 0 1 .427 1.316l-3.22 3.138a.773.773 0 0 0-.222.683l.76 4.431a.772.772 0 0 1-1.12.813l-3.98-2.092a.773.773 0 0 0-.718 0l-3.98 2.092a.772.772 0 0 1-1.119-.813l.76-4.431a.77.77 0 0 0-.222-.683L.233 6.846A.772.772 0 0 1 .661 5.53l4.449-.647a.772.772 0 0 0 .58-.422L7.68.43a.774.774 0 0 1 1.387 0Z"
              fill="#FC7614"
            />
          </svg>
        </div>
        <h1 class="heading-primary">How did we do?</h1>
</header>

    There are a couple of other semantic elements you could use, so be sure to check out the link at the top of this comment for more information.

    Hope this helps.

    Good luck with your other solutions.

    Marked as helpful
    0
  • Vicktor•900
    @Victor-NyagudiPosted almost 2 years ago

    Hello, Sonu.

    Nice try on this one.

    You have quite a bit of HTML validation errors I would suggest looking into before submitting your solution.

    For example, one occurs because you used a <p> tag inside a <span> here.

    <button class="btn" id="btn-purple">
   Try it free 7 days
   <span>
            then
     <p>$20/mo. thereafter</p> // <- This is invalid HTML
   </span>
</button>

    A <span> is an inline element (it only takes up as much space as it needs to), so it can only have other inline elements inside it e.g. <a>.

    A <p> tag is a block-level element (takes up the full width of its container) and starts on a new line. Another example is a <div>. These can have other block-level elements inside them or inline elements.

    Replace the <p> with a <span>, and the error should go away. This is okay because you can have a <span> inside another <span>.

    You can read more about inline elements and block-level elements here to gain a better understanding of how they work.

    Hope this helps.

    All the best with future solutions.

    Marked as helpful
    0
  • Vicktor•900
    @Victor-NyagudiPosted almost 2 years ago

    Hi, Lucas.

    Good attempt on this one.

    I noticed you repeated this snippet of code in your JavaScript where you check if a value is an empty string and then change its display property.

    if (nameInput.value == "") {
   nameInput.style.borderColor = "hsl(354, 84%, 57%)";
   errorMessages[0].style.display = "block";
}
else {
   nameInput.style.borderColor = "hsl(229, 24%, 87%)";
   errorMessages[0].style.display = "none";
}

    This works now, but it's fragile and can break easily.

    Imagine you had to change something in this code snippet e.g. use backgroundColor instead of borderColor, you'd have to go through every if statement and make the change manually.

    You could encapsulate it in a method and call the method multiple times and supply different arguments. This way, if you need to change something, you can do so in one place.

    Here's an example of the code in a method that's called multiple times.

    function changeBorderColor(input, hsl) {
   if(input.value == ""){
        input.style.borderColor = hsl;
        errorMessages[0].style.display = "block";
    }
    else{
        input.style.borderColor = hsl;
        errorMessages[0].style.display = "none";
    }
}

changeBorderColor(nameInput, "hsl(229, 24%, 87%)");
changeBorderColor(mailInput, "hsl(229, 24%, 87%)");
changeBorderColor(numberInput, "hsl(354, 84%, 57%)");

    Which of these looks cleaner and easier to maintain to you?

    I'll let you decide.

    I hope this helps.

    All the best with future solutions.

    1
  • José Cláudio•30
    @JoseClaudiolimaSubmitted almost 2 years ago

    I accept suggestions. I tried to make the project very responsive and similar to the proposed design. I would also like to know how to generally measure the amount of pixels in an image, in this project I literally downloaded a 'virtual ruler' that measures pixels, so I accept suggestions about that. I liked the challenge.

    Intro component with sign-up form

    1
    Vicktor•900
    @Victor-NyagudiPosted almost 2 years ago

    Hi, Jose.

    Good attempt on this one.

    If you want to know how many pixels a <div>, <section>, or any other element is, open Chrome developer tools, and on the top left, above the console, you'll see a cursor icon partially inside a square.

    Click on this icon, and hover over the element whose size you want to know. You'll notice that as you hover over elements, you'll see their content box and/or margin and padding.

    A white popup will also show up telling you what the element is and some other helpful information. On the top left of the popup, you'll see the element's name, and on the top right, you'll see how big the element is in pixels e.g. 546x314.

    The first number is the width i.e. 546, and the second number is the height i.e. 314.

    I hope this helps.

    All the best with your other solutions.

    1
  • Vicktor•900
    @Victor-NyagudiPosted almost 2 years ago

    Hello.

    Nice try on this challenge.

    In terms of functionality, it's working just as I expected, so good job on that.

    However, your solution has many errors both in the accessibility report and the HTML validation report.

    I'll address some in this comment, but I'd recommend going through them and trying to fix as many as you can before looking at the JavaScript.

    One issue is you have empty <h2> elements. This is bad for accessibility because screen readers read these out loud to people with poor vision telling them what the section is about.

    If you're not going to use them, then it's best to remove them completely. If you do plan on using them with JavaScript, you could add the whole element to the DOM instead of having an empty one whose textContent or innerHTML you'll change later.

    Secondly, if you want to use <aside>, it should not be inside an <article> because these are both landmarks. Either use an <aside> with <div> inside them, or an <article> with <div> inside them, but not both nested inside each other.

    Finally, if you want to use a <label>, what goes inside it should often be just plain text. You're getting a lot of errors because you're putting an <h3>, <p>, and <div> inside a <label>.

    I'd recommend just using a <div> instead of a <label> if you plan on including many things inside it.

    I'll let you work on these first.

    Try it, and let me know how it goes.

    I hope this helps.

    Marked as helpful
    0