Skip to content
OverviewSolutions
6
Comments
14

CodeWithPedro

@codewithpedroCalifornia160 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

Latest comments

  • CodeWithPedro•160
    @codewithpedro

    Hi Titilola,

    First congrats on your first challenge. You have the majority of the components for the challenge: a card background, the qr image, and the text. You did an amazing job for your first try.

    Here are some tips you can follow to refactor your code.

    First, your main tag should be outside the qr-code div. The main element is usually the element representing the dominant content which means it should be outside your div because the whole card is the main area for the challenge.

    Second, let’s talk about naming convention and when to use general div tags. At the moment you have three div tag. qr-card, qr-code, and qr-text, these are great starting tags but you can remove one of the tag which is qr-code. It’s not necessarily needed because there isn’t any css needed for the div. Also let’s give a class name to the image, let’s say qr-img. Therefore you can replace img with qr-img.

    So you should have something like this

    <main>
    <div class="qr-card">
            <img class="qr-img" src="image-qr-code.png", alt="the QR code image">

            <div class="qr-txt">
            </div>
    </div>
</main>

    Third the css. Let’s start with the image. I would suggest giving the image a display of block. This will allow the image to be affected by margin and other properties including the parent. This will allow us to use the margin-inline property (similar to margin-right and margin-left), set this to auto to let the img center inside the qr-card. You should have the following in the css

    .qr-img {
	display: block;
	margin-inline: auto;
	width: 80%;
        border-radius: 10px;
}

    Lastly, centering text. To center the text is very simple just add text-align: center to your .qr-card.

    .qr-card {
	text-align: center;
}

    Hopefully these tips can help with your code refactoring. Happy coding!

  • CodeWithPedro•160
    @codewithpedro

    Hi Mrnomis,

    I checked over your html and css code and they looked solid.

    A feedback I have is make sure your body doesn't overflow due to margin. You can add margin 0 to your body

    body {
   margin: 0
}

    To answer you question, yes you can variables without using sass. You must add a double dash (--) to add variables.

    :root {
   --clr-white: 0 0% 100%;
   --fs-400: 16px;
}

    Good luck refactoring your code!

  • CodeWithPedro•160
    @codewithpedro

    Hi Salah,

    I looked over your html, css, and js files and I am impress. The app is well functional and there are no bugs in which I could find. I used large numbers and got back a solution. I thought it might error but it didn't. Congrats on finishing the challenge. Hopefully in the future I can tackle the challenge myself. Good Job!

  • CodeWithPedro•160
    @codewithpedro

    Hi Gowsalaya,

    I looked over your html and css code and they look solid. As for your problem I would suggest to give your profile a negative margin.

    profile {
   //some code here
   margin: -30px;
}

    Here's the solution over at stackOverflow

    https://stackoverflow.com/questions/5229081/positionrelative-leaves-an-empty-space#:~:text=The%20element%20still%20takes%20up,elements%20float%20beside%20each%20other.&text=%22and%20you%20can't%20get,like%20in%20the%20plang's%20answer.

    Marked as helpful
  • CodeWithPedro•160
    @codewithpedro

    Hi Roque,

    I looked your html and css code. They look solid but I have a few suggestions.

    The first suggest is have your QR Code use a size width in pixel. Using a percentage base on the screen is okay, however, you want to control the size of your component and not let the screen render the size of your components. Sometimes the QR code looks bigger in tablet size than in desktop site. (You can right click your site and use inspect too look at different sizes)

    The second suggestion is to use the header tag (h1, h2, h3) for really large titles. At the moment you have selectors to style your text but having headers helps with accessibility to know what is important text.

    p{
    margin-left: 1.5rem;
    margin-right: 1.5rem;
}

p:nth-of-type(1) {
    font-size: 1.4rem;
    margin-bottom: .2rem;
    font-weight: 700;
}

p:nth-of-type(2) {
    color: var(--Grayishblue);
    margin-bottom: 2rem;
    font-weight: 400;
}

    You should have something like this

    <h1>Improve your....</h1>
<p>Scan the ... </p>

    h1 {
   font-size: 20px
}

p{
  font-size: 16px
}

    Good luck with refactoring your code. Hope this helps. Good Luck with your Coding Challenge!!!

  • CodeWithPedro•160
    @codewithpedro

    Hi Kelvin,

    The reason why the text disappear is because you added an ::after attribute to display opacity.

    .form__radio-input:checked ~ .form__radio-label .form__radio-button::after {
    opacity: 1;
}

    If you remove this, the hover will not work but at least you will see what the use clicked on.

    I would recommend to learn to style radio checked list. You're heading in the right direction, however, you do not need to add div elements to the input and label but instead add classes. Something like this

    <div class="rating-list flex flex-center">
          <input type="radio" name="rate" value="1" id="rate-1">
          <label for="rate-1" class="circle-style flex flex-center">1</label>
          <input type="radio" name="rate" value="2" id="rate-2" >
          <label for="rate-2" class="circle-style flex flex-center">2</label>
</div>

    Then you can customize the circle style to a circle css and add a hover to the "rating-list".

    .rating-card .rating-list input[type="radio"]:checked + label {
  background-color: hsl(var(--clr-orange));
  color: hsl(var(--clr-white));
}

    Hopefully you can simplify your code this way. Good Luck with your Code Challenge!!!

View more comments