Skip to content
OverviewSolutions
8
Comments
14
LarryTheFatCat
@LarryTheFatCat

All comments

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

    Hello everyone! 👋

    I finished my first guru challenge! It felt amazing to complete this challenge at the end of 2022.

    I learned a lot of things when building this project. I wrote everything that I had learned in README. There are eight things that I learned. I hope it can help developers to do this challenge.

    If you notice there is something wrong or things that can be improved, please do let me know. I am happy to fix or improve the README so that it can be helpful for developers.

    Grace Snow answered all my questions in Slack so I do not have any questions. Thank you, Grace! 😊

    Any suggestions for improvements are welcome. Also, you can ask me any questions about the technique that I used.

    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!

    Responsive Designo Multi-Page Website with Grid and Flexbox

    2
    LarryTheFatCat•50
    @LarryTheFatCatPosted almost 2 years ago

    Hey, @vanzasetia!

    Great work on this Guru Leveled challenge, the replication was very precise and the overall code looks great! Fix up the 2 very simple issues on the HTML report and overall great job!

    1
  • LarryTheFatCat•50
    @LarryTheFatCatPosted about 2 years ago

    Hey! Nice work on this challenge,

    Couple of things here:

    1.- Try to fix the 2 issues that FrontEndMentor report has shown, that's always a good first step

    2.- For ur input, the point where the text is being added should be incremented more to the left, this can be achievable if you use the text-indent attribute in CSS, you can use this to set a certain amount using what unit of measurement you care to use

    3.- Try having it so when the text gets to a point where it collapses on itself when the browser is resized centered so it can look a lot better! (this is noticable when the max-width is below 365, use media query or modify if you have time)

    Great job with this challenge, and happy coding!

    Marked as helpful
    0
  • LarryTheFatCat•50
    @LarryTheFatCatPosted about 2 years ago

    Hey!

    Looks like you've submitted it under the wrong project!

    0
  • LarryTheFatCat•50
    @LarryTheFatCatPosted about 2 years ago

    Hey!

    Excellent Job with this challenge!

    Cool that you added a title that goes with the QR code!

    Just one issue:

    Try to fix the HTML Validation Report that is posted... Other than that good job!

    0
  • LarryTheFatCat•50
    @LarryTheFatCatPosted about 2 years ago

    Hey!

    Nice work on this challenge

    Looks like you forgot box shadow, that's alright, take a look online about how to use ```box-shadow`` and try to implement into the project!

    I find it odd that your card tends to smash itself into smaller and smaller pieces if the browser is resized, though I like how you used a media query to try and fix it; though it is not required since this is a very challenge!

    Take a look at the HTML validation report and try to fix it other then that, great job!

    Marked as helpful
    1
  • LarryTheFatCat•50
    @LarryTheFatCatSubmitted about 2 years ago

    So, this was a fun challenge and easy challenge, I didn't do any web development practice in 5 days and was super busy with school so I decided to do this to "reboot my brain" and it worked as I am now recalling everything I did with HTML CSS and a bit of JS, the responsiveness is excellent, it's just an issue I had was being able to use the position: relative; without making the line disapear, which I didn't really get how to not make it not go away, but the image preview that is displayed is probably going to look messed up but I just wish to know how I can not make the line go away from the screen when the browser is resized.

    (all my frontendmentor challenges and challenges I do on the side are located on my repository. Feel free to check it out! https://github.com/LarryTheFatCat)

    NFT-Card-component

    1
    LarryTheFatCat•50
    @LarryTheFatCatPosted about 2 years ago

    Please check the livesite preview before providing feedback, I don't really know why it looks bad with that image preview.

    0
  • LarryTheFatCat•50
    @LarryTheFatCatPosted about 2 years ago

    just testing smth...

    0
  • LarryTheFatCat•50
    @LarryTheFatCatPosted about 2 years ago

    Hey!

    Nice work on the challenge!

    Small card! That's alright,

    Couple things:

    1.- Very small card, but that was very cool how you still made it look like the image! 2.- Fix the 1 accessibility issue, should be a very easy fix 3.- If you can, try to fix the <p> attribute text color, that should be changed and you can do that by doing

    color: {selected-color}

    Other then that, nice work!

    Marked as helpful
    0
  • LarryTheFatCat•50
    @LarryTheFatCatPosted about 2 years ago

    Hey!

    Nice work on this challenge!

    Couple things:

    1.- Great work on not getting any accessibility issues as well as no issues on validation report! 2.- Good Job on getting the color perfect! 3.- Only issue I believe that should be fixed and updated is the for the image compared to the actual card box, if you can please fix it that would be great...

    Overall, good job!

    Marked as helpful
    0
  • LarryTheFatCat•50
    @LarryTheFatCatPosted about 2 years ago

    Hey!

    Nice work on the challenge!

    Overall, I like what you did with the attribution, creative!

    Make sure to get the colour scheme correct, as well as font-colour, all you have left to do is fix the accessbilIty issues, and you should be good 2 go! Nice work!

    Marked as helpful
    0
  • Nefton•10
    @neftonjinSubmitted about 2 years ago

    I found it difficult to understand and grasp the concepts of flexbox that I used on this project. I believe this mainly because the name of the properties that flexbox use is kind of confusing for me. align-items align content justify-content justify items. Took me a while just to discover that Justifying items is just for the grid system and not for flexbox. After finishing this project I can say that I am a step closer to mastering flexbox.

    html and css

    1
    LarryTheFatCat•50
    @LarryTheFatCatPosted about 2 years ago

    Hey!

    Was looking at your code, well done!

    Background colour is off, but if you ever plan on using a bg that is not black, care to use https://convertingcolors.com/hsl-color-220_15_55.html?search=hsl(220,%2015%,%2055%)

    this website can help you double check what colour is being used, good for me so i dont have to keep tyring with multiple colours, fix up the accessibility issues and you're good!

    update:

    You don't have to use flexbox, if you're just centering a card, you can use what I usually do if im editing a page with just 1 single card:

    • { margin: 0; padding: 0; box-sizing: border-box; }

    body { display: grid; place-items: center; height: 100vh; }

    .card { display: grid; place-items: center; }

    Marked as helpful
    0
  • LarryTheFatCat•50
    @LarryTheFatCatSubmitted over 2 years ago

    How do you make it suitable for mobile? I don't really know, please message me!

    Overall fun proj though, I learned about box shadowing.

    QR-code-component

    3
    LarryTheFatCat•50
    @LarryTheFatCatPosted over 2 years ago

    Thank you!

    Yeah, this is my first time trying to approach with mobile appearance, I'll for sure fix the accessibility issues, and sure, I can improve the text, I'll start working it right now, thank you for the tips! :>

    0