Skip to content
OverviewSolutions
10
Comments
51
Laharl
@UrbanskiDev

All comments

  • Laharl•1,000
    @UrbanskiDev

    Hello Jasmin Hidanovic !

    Good job on completing this challenge. To answer your question, I feel you did great on the responsive, there's not many things to change, but I would adjust when the media query occur, because it happens way too soon (at 415px, which doesn't really make a good design for small device which has a width higher than 415px, but not much higher either)

    The most common breakpoints for media queries are :

    • 640px
    • 768px
    • 1024px
    • 1280px

    You can adapt them to the design you have to work on, but it should gives you a better idea at which width you should use a media query.

    Apart from that, it looks great, congrats again, hope it is useful and answer your question, happy coding !

    Marked as helpful
  • Laharl•1,000
    @UrbanskiDev

    Hello Emmanuel Luka !

    vw and vh correspond to the viewport width and the viewport height, which is based on the width and the height screen of a device. It is useful to size sections.

    Meanwhile, percentages is based on the relative size of the parent, and not the screen of the device used.

    I have found some links, which may help you to understand better the topic :

    I hope it answer your question, keep learning and happy coding !

  • Laharl•1,000
    @UrbanskiDev

    Hi Uzair Bajwa !

    To fix your issue with the centering, I did this on the body tag to center the card :

    display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100vh;

    The centering wasn't doing anything because the body element wasn't taking all the height available.

    Don't forget to remove the padding you added, and it will work like a charm, hope it helps, keep learning and happy coding !

    Marked as helpful
  • Laharl•1,000
    @UrbanskiDev

    Hello Laurie Jefferson !

    I feel there is something wrong with the dropdown on the desktop view, it works, but if you look closely, some elements get a little more space, and the page get bigger in height. I feel it would be better for the dropdown to not affect the height of the page. Also, when you click on one dropdown button, then the other, the first one clicked doesn't close off automatically. Also, I think you could add some kind of effect to make it visually appealing when you hover an element of the dropdown menu (for the desktop part)

    For the mobile part in general, I would add more spacing between element, it feel kinda cramped (not the menu), but otherwise, I think it looks cool. You may try to add a sort of transition to make the mobile menu look smoother. There is also a bug on the mobile menu, when you click to open the dropdown, then close the entire menu, the content of the dropdown is still visible ! (I think it is the same as the desktop version I mentionned earlier)

    Globally, you did a good job, keep learning and happy coding !

    Marked as helpful
  • Laharl•1,000
    @UrbanskiDev

    Hi Jaedon !

    Positioning and aligning is not really difficult, you can use flex and grid to do the job (which I saw you used in your code) which make it way easier to position or align element, maybe you need to go deeper on the subject

    For the transitions to the gradient, it is possible to achieve, but it's a bit tricky to achieve, I have found a codepen element which may help you to achieve the effect you wanted : Transition gradient

    For the javascript files,since it's a simple and small project, it does not really matter if they are in the same page, but for bigger project, it's better to sort the file by their functionalities, what they do.

    I hope it answer well your questions, keep learning and happy coding !

    Marked as helpful
  • Laharl•1,000
    @UrbanskiDev

    Hello anacarolinabmv !

    I don't know how you tackled this challenge, by starting to build the desktop version or the mobile version but I would recommend to always start with the mobile version, which makes it easier after to work for the tablet view & the desktop view.

    Also, if you test the responsive of the page, you will see it is not really responsive, the mobile size is working until your mobile screen is doing a width of 375px. (you can test it with your browser dev console)

    To make sure your design works well for larger devices, I recommend you to work with max-width, and medias query, here's a link about media queries : MDN media queries

    Otherwise, great job on the challenge, keep learning and happy coding !

    Marked as helpful
  • Laharl•1,000
    @UrbanskiDev

    Hello Gemgabriel1

    I think your problem is because your path to the image you try to link doesn't exist !

    You defined <img src="images/image-qr-code.png" alt="QR Code Image" class="qr-code"> but you don't have a folder images.

    You can try <img src="./image-qr-code.png" alt="QR Code Image" class="qr-code">, it should be working.

    I hope it will help to solve your problem !

  • Laharl•1,000
    @UrbanskiDev

    Hello rowanDeveloper !

    You should be proud of having finished the challenge. It may not be to your liking as it is now but with regular practice, you will become a better developer.

    Some advice I can give you :

    • Pay attention to the design, it may sounds obvious, but for example, you inversed the content of the newsletter, by setting up the image to the left instead of the right. You also have forgot the dark background color.
    • For the border, you can use a border-radius property to make the corner of your box more rounded.
    • For the Javascript part, I don't know if it was on purpose but you didn't add a validation for the email.

    Here's an idea on how to do it :

    // Step 1: Get the reference to the input element
const emailInput = document.querySelector('.email-subscription');

// Step 2: Add event listener to detect input changes
emailInput.addEventListener('input', function() {
  // Step 3: Validate the input using a regular expression for email
  const emailPattern = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/;
  const emailValue = emailInput.value.trim();

  // Step 4: Update the CSS class based on validation
  if (emailPattern.test(emailValue)) {
   //email is valid
  } else {
    //email is invalid
  }
});

    If you don't know much about regex, I would recommend this resource to help you understand better regex : Learn_Regex

    • For your bullet point problem, I think it is caused by an error in your HTML, you wrote this :
    <ul class="content__bullets">
            <li class="bullet-item">
                <p class="paragraph_bullet">Product discovery and building what matters</p>
                <p class="paragraph_bullet">Measuring to ensure updates are a success</p>
                <p class="paragraph_bullet">And much more!</p>
            </li>
          </ul>

    An <li> element should contain only one element, not three, which should give you something like this :

    <ul class="content__bullets">
            <li class="bullet-item">
                <p class="paragraph_bullet">Product discovery and building what matters</p>
            </li>
            <li>
                <p class="paragraph_bullet">Measuring to ensure updates are a success</p>   
            </li>
            <li>
                <p class="paragraph_bullet">And much more!</p>
            </li>
</ul>

    A link to learn more about li element : MDNDocumentation

    About the gradient linear not working, it is because you didn't use the good property, you used : background-color: linear-gradient(pink, red); instead of using the property background, you should have this background: linear-gradient(pink, red);

    I give an other link about linear-gradient : MDN_Minear_Gradient

    I think I have addressed most of your point, I hope my advice will be helpful to you.

    Good luck in your learning journey as a developer and happy coding !

  • Laharl•1,000
    @UrbanskiDev

    Hello Baraa !

    Congratulation for finishing the project

    To answer your question the first part of your question, I have a link which will helps you to understand better which units to use for :

    To adapt the screen size, I recommend you to follow the "Mobile First" design ! It means you start by building your page for a mobile phone viewport. When you finished, you can continue the responsive with a bigger screen size, which will be easier to adapt, and also easier to find your breakpoint !

    Here's a link which explain it in more depth:

    For your last point, CSS Grid is a good choice, it may not be easy to use, but it is a very powerful tool !

    I have found a mini-game, which allow you to learn grid and make it easier to understand how to use it :

    I hope it helps you, keep learning and happy coding !

    Marked as helpful
  • Laharl•1,000
    @UrbanskiDev

    Hello Shady Omar !

    Congratulation for finishing this project

    Some suggestions :

    1. In your HTML file, you can change <div class="header"> to an <header>, because a div tag has no special meaning while an header tag have one.

    2. For the mobile responsive part, I would add a min-width:300px to avoid your main component to shrink too much in size when the screen becomes smaller !

    Otherwise, you did a really good job !

    I hope it helps, keep learning and happy coding !

    Marked as helpful
  • Laharl•1,000
    @UrbanskiDev

    Hello Abhilash !

    Congratulation for finishing your project

    To remove the errors when the form is filled, you can use the same idea than you used for showing the errors !

    The code you use to show an error :

    document.querySelector(".def").classList.remove("error");

    To remove an error, you just have to add the class again !

    document.querySelector(".def").classList.add("error");

    I hope it helps you, keep learning and happy coding !

  • Laharl•1,000
    @UrbanskiDev

    Hello Yiwen Chen !

    Congratulation for finishing your project

    Some suggestions to make it better !

    1. You used an hover effect on your button, which is a good design idea to use, but the change is kinda brutal. You can make it smoother by adding a transition on your button !
    transition: 0.3s ease-in-out;

    I give you a like about transition on a button to learn more about it :

    1. In your HTML files, you can use the latest HTML semantic available ! You can replace your <div class=container> </div> with a <main></main> tag. It is important because a div tag doesn't have any meaning by default while a main tag has a meaning !

    I give you a link about HTML semantics :

    I hope it helps you, keep learning and happy coding !

    Marked as helpful
  • Laharl•1,000
    @UrbanskiDev

    Hello Jimin !

    Congratulation for finishing your project

    To answer your question, the reason your button stop hovering is because of your javascript !

    When you click on you button, this part of your code is activated :

    if(clicked) {
        numbers.forEach((number) => {
            number.style.backgroundColor = "hsl(213, 19%, 18%)";
            number.style.color = "hsl(217, 12%, 63%)";
        })

    This part of your code changes some styles for your buttons, with the background-color erasing the property which is inside the hover one ! Why is it erased ? It is because of a priority system with CSS.

    I think this link may help you to understand priority of CSS:

    Inline CSS has a higher priority than embedded and external CSS, which is why your hover doesn't work after clicking a button.

    Now that you know where is the problem, with a better understanding, it should be easier to fix !

    I hope it helps you yo understand why it wasn't working, with some clues to follow, keep learning and happy coding !

    Marked as helpful
  • Laharl•1,000
    @UrbanskiDev

    Hello Atul kumar !

    Congratulation for finishing this project

    1. In your html file, I recommend you to modify your <div class="container"> by a <section>, a div tag has no meaning in html while section does have one !

    I give you a link about section tag, and html semantics in general to learn more about it :

    1. In your css file, you can define variable to make it easier to maintain, like color definition :
    :root{
--var-name:hsl(31, 77%, 52%);
}

.card1{
background-color:var(--var-name);
}

    I give a link to learn more about them :

    I hope it helps you, keep learning and happy coding !

    Marked as helpful
  • Laharl•1,000
    @UrbanskiDev

    Hello rykryslr !

    Congratulation for finishing this challenge

    I have some advice to give you :

    1. I recommend you to use the latest HTML semantic available, using <main> instead of a div with a class container. I give you a link to learn more about the latest HTML semantic !
    1. In your HTML file, you put multiple <h1> tag in your page, which is not recommended the way you used it.

    You can remove the <h1> you added for the price, and then add CSS to make your layout.

    In the same idea, don't use <h5> before using an <h2>, <h3>, <h4>, if you want it to looks like it, use CSS. HTML is for structuring the page while CSS is for giving styles to your page.

    1. Still in your HTML file, you used a lot of <br> tags, while it is not a bad practice, it is not what I would recommend ! I'll recommend you to use CSS to make it looks like you did but without using <br> tag.

    I put a link which explain why it's not really used :

    I hope it helps you, keep learning and happy coding !

  • Laharl•1,000
    @UrbanskiDev

    Hello dia !

    Congratulation for finishing this project

    I have some suggestion for you :

    1. You have some problems with your javascript, when I tried it with the preview site link, it returns in the console dev tool an error Uncaught TypeError: inputs.email is undefined

    2. I've found a website which can help you to understand better how to create regex, while testing them, I give you the link below :

    1. For the password specifications, maybe you can try to make it explicit by showing it to the users to know what are the requirements to make a valid password on this page.

    2. You can make the effect hover of your button a bit smoother by adding a little transition :

    .form__button {
  border: none;
  text-transform: uppercase;
  background-color: var(--btn-clr);
  color: white;
  font-weight: 600;
  letter-spacing: 1.25px;
  padding: 1rem 2rem;
  border-radius: 5px;
  cursor: pointer;
  box-shadow: 0px 5px 0px hsl(154, 59%, 42%);
  text-shadow: var(--text-shadow);
  transition: ease-in-out 0.3s;
}

    I also give you a link about transitions when hovering a button :

    I hope it helps you, keep learning and happy coding!

    Marked as helpful
  • Laharl•1,000
    @UrbanskiDev

    Hello Jordan Kisiel !

    Congratulation for finishing this project

    To answer your question, there is nothing with using pixel values everywhere, but it is not the best units to use for every properties.

    I have some links to help you learn more about the subject : -Medium CSS Which units to use

    I hope it helps you to answer your question

    Marked as helpful
  • Laharl•1,000
    @UrbanskiDev

    Hello Adriel Santos Costa !

    Congratulation for finishing the project

    Some suggestions to make it better :

    1. You can add a little hover effect to your button to make it less rigid !
    .card-button:hover{
background-color: hsl(158, 36%, 32%);
}

    You can also add a transition to make the hover smoother, I give you a link about transition if you want to learn more about the topic :

    You did a good job !

    I hope it helps you, keep learning and happy coding !

    Marked as helpful