Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Log in with GitHub
OverviewSolutions15Comments15

All comments

  • Vishnuprakash• 60

    @Awizp

    Submitted

    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

    #bem#sass/scss

    3

    Nelson Uprety• 320

    @nelsonuprety1

    Posted

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

    Kaizoku oni orewa naru

    1
  • Martina• 150

    @PastoreMartina

    Submitted

    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

    @nelsonuprety1

    Posted

    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

    @nelsonuprety1

    Posted

    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

    @nelsonuprety1

    Posted

    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

    @nelsonuprety1

    Posted

    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

    @nelsonuprety1

    Posted

    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

    @nelsonuprety1

    Posted

    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-24

    Submitted

    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

    @nelsonuprety1

    Posted

    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

    @nelsonuprety1

    Posted

    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

    @Loic2A

    Submitted

    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

    @nelsonuprety1

    Posted

    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

    @nelsonuprety1

    Posted

    Hi nurgeldi

    Reducing width for larger screens would really look great.

    Marked as helpful

    0
  • Nelson Uprety• 320

    @nelsonuprety1

    Posted

    Looks good mate

    Marked as helpful

    0
  • Nelson Uprety• 320

    @nelsonuprety1

    Posted

    Thank you deniel. I will definitely keep the things that you have mentioned in mind and implement it.

    1
  • Nelson Uprety• 320

    @nelsonuprety1

    Submitted

    I was not able to put a cyan color while on active state. Please if you know the solution for the problem feel free to comment.

    The tags are totally irrelevant because there was no any option. Thank you

    NFT Preview Card Component

    #accessibility#parcel#sass/scss#vue#angular

    3

    Nelson Uprety• 320

    @nelsonuprety1

    Posted

    Thank you for the feedback eric.

    0
  • P
    Elisabeth Martin• 200

    @Blondeli

    Submitted

    Hey everyone, I just finished this landing page. It's the first time that I used the mobile-first approach and also that I made use of the CSS grid. I'm still a beginner, so any feedback to further improve my work is welcome :)

    Meet landing page

    2

    Nelson Uprety• 320

    @nelsonuprety1

    Posted

    Looks good. The website is responsive too. Good one

    0