Skip to content
OverviewSolutions
33
Comments
7
Alfredo Peguero Capellan
@AlfredoPegueroC

All comments

  • jcoms2003•100
    @jcoms2003Submitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    Getting my first project done. I hope to continue using frontend mentor to improve my front end development skills.

    What challenges did you encounter, and how did you overcome them?

    Trying to figure out how to vertically center the container. After some research I found a way using margins and "top"/"left".

    What specific areas of your project would you like help with?

    I couldn't figure out how to get the google font to work for some reason. If anyone can see the issue that'd be awesome.

    Horizontal and vertically centered QR code using margins

    1
    Alfredo Peguero Capellan•590
    @AlfredoPegueroCPosted 5 months ago

    Hello @jcoms2003

    Your solution looks great!

    You have to use font-family: "Outfit", sans-serif instead of font-family: "Outfit" in your CSS.

    Also, you can use Flexbox to position your elements.

    Here is a great guide Flexbox.

    I hope it helps.

    Marked as helpful
    0
  • ayeniDan•160
    @ayeniDanSubmitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    I'm most proud of the hover section on the cube image. It was difficult but I was able to pull it off. Even though it's not perfect, it's progress

    What challenges did you encounter, and how did you overcome them?

    I had issues with the hover on the cube image but i was able to solve it using help from MDN webdocs and a little bit of background knowledge on positioning and psuedo-elements

    What specific areas of your project would you like help with?

    I need help to make the hover on the cube better

    nft-preview-card-component-main

    1
    Alfredo Peguero Capellan•590
    @AlfredoPegueroCPosted 5 months ago

    Hello @ayeniDan

    Your solution looks great!

    you can use pseudo-element such as ::before and ::after to create an overlay.

    Here is an example Youtube video.

    I hope it helps.

    0
  • Alfredo Peguero Capellan•590
    @AlfredoPegueroCPosted 9 months ago

    Hello, @OketchOdanga

    There is a tag that offers alternative versions of the same image for different displays. It's called the 'picture' tag.

    Here is the example Picture tag in mdn.

    I hope it helps

    Marked as helpful
    1
  • Alfredo Peguero Capellan•590
    @AlfredoPegueroCPosted 10 months ago

    Hello, @valeushu

    Your solution looks great!

    You can use tools or extension such as:

    • powerToy (on windows)
    • pixel perfect (on browsers)

    note: powerToy has a screen ruler for taking measurements.

    I hope it helps.

    Marked as helpful
    2
  • Alfredo Peguero Capellan•590
    @AlfredoPegueroCPosted 10 months ago

    Hello, @evsta24

    Your solution looks great!

    Just need to add HTML semantic tags for your next project.

    Leaving you a blog that explains why. freecodecamp and semrush.

    I hope it helps.

    PS: Sorry about my English; I'm still learning.

    Marked as helpful
    1
  • Alfredo Peguero Capellan•590
    @AlfredoPegueroCPosted 10 months ago

    Hello, @vernonroque

    With the next function, you can retrieve the days of each month.

    function daysInMonth(month, year) {
    return new Date(year, month, 0).getDate();
}

    I hope it helps.

    Marked as helpful
    1
  • Alfredo Peguero Capellan•590
    @AlfredoPegueroCPosted 10 months ago

    Hello, @OsatohanmwenT

    Your solution looks great

    This is the solution to the border error

    • Element with class list that includes both #newsletter-input and error-border.
    #newsletter .news-input #newsletter-input{
    padding:  15px 20px;
    border-radius: 5px;
    border: none;
    outline: 1px solid black;
}

    #newsletter .news-input #newsletter-input.error-border{
    outline: 1px solid red;
}
    • Tips
    1. Learn how to use pseudo-elements such as ::before and ::after; this will help you display error messages.
    2. The structure of labels Label mdn

    I hope it helps

    PS: Sorry about my English; I'm still learning.

    Marked as helpful
    0