Skip to content
OverviewSolutions
10
Comments
8
Niloy Das
@NiloyDas07

All comments

  • vIranq HuQ'qa tuq•50
    @FrankHukkaSubmitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    I used the clamp() function to scale the padding in the card section and it ended up working well. The padding is about 5 % of the element width, but no less than 20 px or more than 30 px.

    Another part I'm proud of is the transition property in the link buttons. The background and text color transition smoothly to the active states, with the text color transitioning slightly faster.

    transition: background-color 500ms linear,
                color 400ms linear;
    What challenges did you encounter, and how did you overcome them?

    My biggest challenge was to get the profile picture centered horizontally. I had to test various margins to get it right.

    Another difficult part was the card width. I tried to make it scale dynamically, but that didn't look right. In the end I decided to make it just 350 px.

    Profile link page with smoothly transitioning active states

    2
    Niloy Das•230
    @NiloyDas07Posted 6 months ago

    Hey @FrankHukka, The desktop design is perfect. The layout is well done. There are just some slight issues with the mobile design:

    1. You used width: 350px for the card. This causes overflow for any device with width less than 350px because even if the device width is smaller, it will still force the card to be 350px. You can change this to max-width: 350px. This will allow the card to shrink if the device width is smaller.

    2. You did not use box-sizing: border-box anywhere. This can cause a lot of issues while calculating the margin, padding, borders etc. e.g. without that, the actual width of your card is not 350px but 350px + the padding in the card. You should learn about that property if you don't know it already as it is one of the most commonly used properties and makes our life a lot easier. You can learn about some basic custom resets here: https://www.joshwcomeau.com/css/custom-css-reset/

    3. After all that you could add some padding to your body. Right now the card is taking the full screen in smaller devices which is different from the design.

    Happy Coding :-)

    Marked as helpful
    0
  • Talika Bajaj•650
    @Talika-BajajSubmitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    Designing the containers to look similar to the given design.

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

    At first, positioning the containers seemed difficult, but then I learned about the grid-area property of CSS Grid Layout and placed all the containers in the right place.

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

    Making sure the website is responsive.

    Testimonials Grid Section

    1
    Niloy Das•230
    @NiloyDas07Posted 6 months ago

    Looks great. 👍 Btw, which JavaScript code are you referring to? There is no JavaScript code in your repo for this project. If you were just asking in general, then you can ask for any advice in the discord server. You will definitely get great answers there. :-)

    0
  • Niloy Das•230
    @NiloyDas07Posted 6 months ago

    Hey, your site is working fine for the screen sizes above around 1200px. But for anything smaller, the content is overflowing. I think it might be because you used fixed widths for your cards etc.

    Also there should be something wrong with the media query logic as well, because no mobile view is applying to it.

    So, you just need to work on the responsiveness a bit. Goodluck. :-)

    1
  • Niloy Das•230
    @NiloyDas07Posted 6 months ago

    Nice! Your solution is almost completely similar to the design.

    In the design the image is exactly 50% of the entire card. But in your solution you used 'gap: 1rem' in the '.card-container' and 'margin-left' in the '.right'. This is causing the image to be a bit smaller. You can look into this issue if you are interested.

    Also, you should update the readme file, because it's often the first thing anyone sees when they visit your GitHub repo. The current readme is only talking about frontend mentor procedures instead of the project, which is quite confusing. :-)

    Marked as helpful
    0
  • Akib Raza•900
    @akibraza91Submitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    I love to create Responsive designs, Well in this project I learnt a media query between two screen sizes that I have never used before.

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

    I think there was nothing that i can say challenge, It was easy peasy project.

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

    In media query

    Mobile first page using CSS Flexbox.

    1
    Niloy Das•230
    @NiloyDas07Posted 6 months ago

    Looks Great! Keep up the good work.

    Marked as helpful
    0
  • osamaaabdullah•60
    @osamaaabdullahSubmitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    Writing the CSS code more efficiently

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

    None

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

    Constructive criticism on how to improve the design.

    3-Social Link Profile Solution

    1
    Niloy Das•230
    @NiloyDas07Posted 6 months ago

    Hey mate, I noticed that your current website is not keyboard accessible. So people without mouse can't reach or click on any of the links. To fix that you need to use something clickable, like button or a link tag, instead of the <div> or <h3> tags you have used. :-)

    0
  • brianopedal•40
    @brianopedalSubmitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    That I'm using basic CSS & HTML and getting more familiar with the bare bones. Nothing much, just keep learning and building.

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

    Positioning, thinking it through, not being so used to figma.

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

    General feedback, positioning, code simplification and clarity.

    Blog Preview Card - Basic

    1
    Niloy Das•230
    @NiloyDas07Posted 6 months ago

    Layout looks great.

    I think this project provides the Figma files even for the free subscription users, so you can refer to that if you want to get it looking closure to the design. But, maybe you just wanted to practice without spending too much time on that. In that case just ignore my comment. :-)

    Marked as helpful
    1
  • Manish Singh•230
    @manishsinghrajSubmitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    Used React and Tailwind

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

    configuring default styles and colors in Tailwind config js importing font family in react and configuring in Tailwind

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

    can any one skim the code and let me know if any better way of doing things in general (Tailwind) : )

    QR-Code using React + Tailwind

    1
    Niloy Das•230
    @NiloyDas07Posted 6 months ago

    Looks Great. About guessing pixels, it's almost impossible to get it right just from the jpg files. Usually for professional settings, we are provided all the measurements along with the design. Otherwise we can only use our best estimate according to our experience.

    By the way, You should update the Readme file of your code. :-)

    Marked as helpful
    1