Skip to content
OverviewSolutions
15
Comments
15
Nelson Uprety
@nelsonuprety1

All comments

  • Vishnuprakash•60
    @AwizpSubmitted almost 2 years ago

    Frontend Mentor - Product preview card component

    Welcome! 👋

    Thanks for checking out this front-end coding challenge. This challenge I took, I changed the design and colors for challenge myself to develop component correctly with any circumstances given to me. Nothing offence in current design and this isn't ad. Just for learning purpose I took photo from online.

    This component responsive for any devices started with Mobile first approach.

    Then I used display: flex method to align card at center of the page

    I used <picture> tag to change two images between page width ranges.

    Colours I selected from colorhunt.io site

    Languages I used for this component,

    1. HTML
    2. CSS
    3. SCSS

    All feedback is greatly appreciated!

    Responsive Product preview component

    3
    Nelson Uprety•320
    @nelsonuprety1Posted almost 2 years ago

    The zoro touchup you gave is amazing. Congrats for completing the challenge Nakama.

    Kaizoku oni orewa naru

    1
  • Martina•150
    @PastoreMartinaSubmitted almost 2 years ago

    I'm resubmitting after some changes.

    How can I keep the card in the center of the page but push the attribution at the bottom using Flexbox? I'd like to prevent overflow on smaller screens (e.g.: landscape mode).

    QR code component using Flexbox

    2
    Nelson Uprety•320
    @nelsonuprety1Posted almost 2 years ago

    Hello, pastore martina congrats for completing the challenge. As you have mentioned about attribution not going to the bottom, I have explained and added code to fix the problem of attribution not going to the bottom of the page. So please check your github code file and merge the changes if you like it.

    Thank you

    1
  • Nelson Uprety•320
    @nelsonuprety1Posted almost 2 years ago

    Hello Joaquin, I used background: linear-gradient(hsl(277, 64%, 61%, 0.5), hsl(277, 64%, 61%, 0.5)), url('/images/image-header-mobile.jpg');

    to achieve the desired purple filter . I used linear gradient with the color that has been provided in the style guide file.

    Marked as helpful
    0
  • Nelson Uprety•320
    @nelsonuprety1Posted about 2 years ago

    Hello tobi, nice work on the project. I would like to share some of my insights regarding the code.

    You can use the flex-direction property to set how flex items are placed in the flex container. Check this link: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction

    And you can use justify-content: center; align-items: center; to center your content And please try to reduce the size of the whole container by adjusting its width and height.

    I hope this helps.

    Marked as helpful
    1
  • Nelson Uprety•320
    @nelsonuprety1Posted about 2 years ago

    Looks good and clean. One thing I would like to suggest is to check out async await with fetch API. Here are some of the links you can use:

    https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function

    Happy coding.

    Marked as helpful
    0
  • Nelson Uprety•320
    @nelsonuprety1Posted about 2 years ago

    The app looks good. But please consider using Javascript to load the api and display the api data when you click the dice as mentioned in the project description.

    You can use the fetch API method with async await to call the api. Fetch api: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

    Async / await: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function

    Please briefly go through the topic of asynchronous javascript to learn more about the topic. Link: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous

    Marked as helpful
    0
  • Nelson Uprety•320
    @nelsonuprety1Posted about 2 years ago

    Hello mate, here are few of the suggestions from my side, I hope it helps

    1. Please separate your stylesheet from your html file. Create a new style.css file and link that to your html. For example: <link rel="stylesheet" href="style.css">

    2. Try reducing the border radius for container and the image so that it matches up with the given design.

    Happy coding, cheers 😀 😃 😁

    1
  • Sudharshan S•90
    @Sudharshan-24Submitted about 2 years ago

    In this Order Summary Component challenge, I've learned how to use flexbox to design the music icon, Annual plan description and change link text in the same row.

    Order summary component using flexbox

    2
    Nelson Uprety•320
    @nelsonuprety1Posted about 2 years ago

    Looks good. One suggestion i can give you is change the background-image whenever the site is viewed on larger device.

    example:

    @media (min-width: 768px) { body { /* use your own path for the background desktop svg*/ background: url('./images/pattern-background-desktop.svg') no-repeat; background-color: hsl(225, 100%, 94%); } }

    Marked as helpful
    0
  • Nelson Uprety•320
    @nelsonuprety1Posted about 2 years ago

    Please add border-radius to your wrapper to get the desired outcome.

    Using different colours as provided in the style guide for the typography might make this site look more good. This is just my suggestion. Thank you

    0
  • Loïc2A•50
    @Loic2ASubmitted about 2 years ago

    Hello! I ended up with a convincing result (in my opinion :D ). The most difficult part for me was the organization of my code, this is really the point I would like to improve: -Is my html well structured? -Is my CSS correct? (I think the reset too big for a project like this)

    If you have any ideas for improvement in terms of integration (fonts for example), I'm listening!

    HTML/CSS Product card

    1
    Nelson Uprety•320
    @nelsonuprety1Posted about 2 years ago

    Looks good. Can you please mention why did you make a counter.js file?
    In my opinion, using !important is not a really good approach, using other alternatives might be a good approach. If you have time please take a look at my code and please provide me feedback on the solution.

    Thank You. Happy Coding Cheers

    0
  • Nelson Uprety•320
    @nelsonuprety1Posted almost 3 years ago

    Hi nurgeldi

    Reducing width for larger screens would really look great.

    Marked as helpful
    0
  • Nelson Uprety•320
    @nelsonuprety1Posted almost 3 years ago

    Looks good mate

    Marked as helpful
    0