Skip to content
OverviewSolutions
27
Comments
10
Ricky
@pyaetheiN

All comments

  • Vanza Setia•27,775
    @vanzasetiaSubmitted over 2 years ago

    I've finished another challenge! 🎉

    This challenge has a straightforward layout and it is a nice challenge to keep my skill sharp. However, I try a new thing by changing the order of the head meta tags which hopefully makes the site run faster. In 4G the site loads after 1.3s, and in 3G the site loads after 3.5s which, is still really slow. So, is the site loads fast enough on your side?

    I also make this as PWA (Progressive Web Apps), just for practice. So, you can install it and, it should be able to work even without the internet. 😁

    Feel free to give me any feedback or comments. 😉

    If you have finished this challenge and would like me to give feedback on it, please include a link to your solution. I would be glad to help you! 😀

    Thanks!

    P.S. I follow the order of the meta tags that Harry Roberts recommends. You can learn more about it by watching this YouTube video (Harry Roberts - Get Your "head" Straight).

    Ping Single Column Coming Soon Page | HTML CSS Sass JavaScript

    1
    Ricky•470
    @pyaetheiNPosted over 2 years ago

    Hello Vanza! The amount of extra work you put into this challenge is amazing and I would love to add them into my solution too. However, I've a few questions...

    • How do u redirect your page to display "Thank you!". I don't see any extra html files nor additional line of codes for that redirected page... Would you mind explaining me how things worked?
    • I also don't understand the difference between capturing groups and non-capturing groups in RegEx patterns so could you explain to me in simpler terms?
    Marked as helpful
    1
  • Ricky•470
    @pyaetheiNPosted over 2 years ago

    Good job completing the challenge! For the background, you should add

    • background-repeat: no-repeat to fix the repeating background and
    • background-size: contain to fit the background inside every screens

    Make sure to check the report on accessbility and html issues too.

    1
  • Ricky•470
    @pyaetheiNPosted over 2 years ago

    Hello! Your solution is awesome :) I learned a lot from it especially the stopPropagation() method. I was stuck on that part as the navbar keep closing when I clicked the navlink so checking your solution out turns out very well for me. Thank you and keep up the good work!

    1
  • Halibal•250
    @halibalSubmitted over 2 years ago

    I've tried really hard on making the box in which there is the background image to be responsive. But couldn't succeed it doing on mobile version. I would appreciate any advice or comment on how to make the code work in mobile version as well. Thanks in advance!

    NFT Preview Card Component using CSS | HTML

    1
    Ricky•470
    @pyaetheiNPosted over 2 years ago

    Hello Halibal! Nice job completing the challenge, love that you added a different nft :) Anyways about your questions,

    • remove width: 100% and add padding: 0 1rem to your body tag
    • make a media query where you make the font sizes smaller and that should make your design look a lot better in smaller screens

    I don't really recommend you adding width property on body tag, just add height or min-height and only add width when you need to on containers inside body. That's it for my feedback, happy coding as always!

    Marked as helpful
    1
  • Ricky•470
    @pyaetheiNPosted over 2 years ago

    Hey there @ExiviuZ ! Your solution looks good overall. You forgot to add

    • cursor: pointer to things you add hover effects on
    • card image background-color when hovered so make sure you fixed them.

    If you've any other difficulties, just ask me.

    0
  • Ricky•470
    @pyaetheiNPosted over 2 years ago

    Hey buddy, nice work on completing the challenge but you still got lots of things to fix so take a look at my solution on this challenge ( https://github.com/pyaetheiN/QR-code-component ) It's not as hard and stressful as you think, you just gotta understand how embedding elements inside containers works and most importantly learn flexbox first.

    Marked as helpful
    0
  • Ricky•470
    @pyaetheiNPosted over 2 years ago

    Hello Matias! Great job completing the challenge however there're things you have to fix, so here it is...

    You need to add:

    • display: flex;
    • align-items: center;
    • min-height: 100vh;
    • justify-content: center;
    • background-repeat: no-repeat;
    • background-color: hsl(225, 100%, 98%);
    • padding: 0 1rem;

    inside <body> tag and

    • max-width: 400px instead of width: 30%; inside your .container class

    I hope my feedback is helpful for your solution.

    0
  • Vanza Setia•27,775
    @vanzasetiaSubmitted over 3 years ago

    Hello Everyone! 👋

    I was doing this challenge on my Android phone. Hopefully, it looks good on your deskop. 😅

    Of course, any feedback is appreciated!

    That's it! Happy coding everyone!

    Profile Card Component HTML5 CSS3 Sass

    3
    Ricky•470
    @pyaetheiNPosted over 2 years ago

    Hello Vanza, I was having a hard time trying to understand your calc(47vw + 15%) and calc(65vh - 15vw).

    Is there a documentation or a video about using calc with view-width plus percentage and view-height minus view-width?

    0
  • Rolly Castillo•190
    @Pomz010Submitted over 2 years ago
    1. I'm having trouble in slight horizontal scrollbar, though I have used 100vw for the width of the body tag and applied css grids for main tag with a class of container. I have also applied 100% for the width for the container class but horizontal scroll is still showing.

    3-column preview card component

    1
    Ricky•470
    @pyaetheiNPosted over 2 years ago

    Hey there! I want to help you but I can't access your github repository. Make sure you fixed that right so that I can see your codes and help you.

    Marked as helpful
    0
  • Ricky•470
    @pyaetheiNPosted over 2 years ago

    Hello! It took me a while to find out the problem,

    I will explain step by step:

    • remove height: 50%; max-height: 50rem; min-height: 40rem;" from your ".cards" class in style.css because of your height properties , it doesn't work in mobile screen
    • remove overflow: scroll; because it's ugly and add padding: 5rem 0; in your ".cards" class in responsive.css to have spaces between top and bottom of the page

    That's the solution for your problem you're pretty much good to go after doing these steps.

    Things you forgot to add:

    • change card titles font-family
    • add border-radius on first and third card
    • add line-height in your ".card-paragraph"

    In my humble opinion, I recommend you to avoid using heights too much. It isn't required in every layout, it automatically wraps up the content inside it.

    1