Skip to content
OverviewSolutions
29
Comments
7
Sameer Singh
@SameerJS6

All comments

  • Liarley Dantas•160
    @LiarleyCodieSubmitted over 1 year ago

    This project was the first time I used the fetch method to fetch data from a local JSON, and also the first time I happened to need to use methods like async and await (this time I saw the md file that contained the fonts and the colors) :)

    Beautiful Results Summary

    1
    Sameer Singh•560
    @SameerJS6Posted over 1 year ago

    Congratulations on completing this fun, beautiful Project.

    • You've done a phenomenal job on styling but there's a slight mistake that you've done, they are:-
    • On mobile, the result i.e the purple gradient container should take the full width, but you have given alot of padding or margin.
    • Also on the Accessibility report, don't use the same name for I'd on span.
    • Try to add a alt=Whatever the image is about on img tag is necessary because, In case if the user doesn't have a good internet connectivity, then it show this text instead of the image. So describe it short and simple.
    1
  • Sameer Singh•560
    @SameerJS6Posted over 1 year ago

    Congratulations on completing this little fun challenge and you have done a great job.

    • But, you have to focus on the Accessibility report & HTML validation report, as it helps in using the clean and standard practices for writing code.

    Good Luck!!!

    0
  • Matthew Millard•50
    @matthew-millardSubmitted over 1 year ago

    Is the correct way to center the component both horizontally and vertically as the contents are overflowing the viewport height? I set the top: 0; applied equal padding on both top and bottom and set translate(-50%, 0).

        position: absolute;
    top: 0;
    left:50%;
    transform: translate(-50%, 0%);
    padding: 2rem 0;
    width: 90%;
    max-width: 400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: auto;
    grid-template-areas:
    'sedans'
    'suvs'
    'luxury';
}```

    Responsive 3-Column Preview Card using grid-template-areas

    2
    Sameer Singh•560
    @SameerJS6Posted over 1 year ago

    The problem your facing is very basic that anyone can face, but to solve it all you have to do is use the modern solution to align content i.e. css display: grid or css display: flex. But the nonetheless, below is the solution for your problem

    Here is the solution,

    • To center the content in the whole
    body {
 display: grid;
 min-height: 100vh;
 place-content: center;
}
    • Don't hide the h1 title
    h1 {
 color: black;
 text-align: center;
 visibility: visible;
}
    • For the Main Section set the max-width here
    main {
 padding: 1rem;
 max-width: 900px;
 margin-inline: auto;
}
    • Remove all the styling that you did in the cards section, and add this one mentioned below:-
    .cards {
 display: grid;
}
    • For making the 3 columns layout on desktop
    @media (min-width: 768px) {
.cards {
 grid-template-columns: repeat(3, 1fr)
}

    Then adjust the column's border-radius according to the layout i.e. either for mobile or desktop

    • Hope it helps you to understand the problem and let me know if this solved your problem
    Marked as helpful
    1
  • Gabriela•180
    @PaulaR-05Submitted almost 2 years ago

    Here is my solution to the NFT preview card component solution ✨ I still find it challenging to understand all the best practices for CSS/HTML, so ...any tips for it?

    😊 Happy to hear any feedback and advice. Thanks!

    NFT preview card component

    2
    Sameer Singh•560
    @SameerJS6Posted almost 2 years ago

    "Nice one, buddy, but you forgot to add hover effects on the link tags (Creators Name, Price) and on the main image. You also forgot to add a cursor: pointer to some links. Always make sure to decrease the heading tag only by one. For example, if you have used h1, you should not use h4 directly on the page; it should only decrease one by one."

    Thank You,

    Marked as helpful
    1
  • Mohieb•90
    @dev-mohiebSubmitted almost 2 years ago

    Created using Tailwind CSS. Took me about 4 days to finish everything up.

    I'm not sure if my JavaScript code is up to standard but it's the best I can do at my current level.

    I was also going to add accessibility to the app but I got really frustrated while writing the JavaScript and I just wanted to finish the project asap.

    Any advice is appreciated, this is all self-taught!

    Tailwind CSS Tip Calculator App -- Splitter

    1
    Sameer Singh•560
    @SameerJS6Posted almost 2 years ago

    Nice one there brother, and also congratulations on your achievement in completing this project.

    But work on the Reset Button functionality, it reset the tip percentage active class but doesn't actually remove the selected value, so make sure to leave the active or selected class active.

    And also the give the body a min-height: 100vh; to center the whole application center proper. Thank you!!

    1
  • Lucas 👾•104,400
    @correlucasSubmitted about 2 years ago

    👾 Hello, Frontend Mentor coding community. This is my solution for the Fylo Data Storage Component.

    This challenge was really challenging, was really tricky to create the pop up and position some elements. Was really fun to create the logo and customize the design, I am happy with the design output but not with the code, once I finish the remaining HTML/CSS challenges I'll focus on it!

    🎨 I added some custom features:

    • 👨‍🔬 Custom UI Design + Logo.
    • 🧚‍♀️ CSS Animations

    🍚Follow me in my journey to finish all HTML/CSS only challenges (Only 3 missing)! Gotta Catch ’Em All

    Ill be happy to hear any feedback and advice!

    Fylo Data Storage VANILLA CSS (Custom Design + CSS Animations)

    9
    Sameer Singh•560
    @SameerJS6Posted about 2 years ago

    I loved the color scheme and Gradient in it.!!.. But a minor change (i.e its 1000GB or 1TB, not 100GB)...

    Marked as helpful
    2
  • Sameer Singh•560
    @SameerJS6Posted about 2 years ago

    Well nice one brother, must have felt good but you missed the color of Thank You (It's white, not black)

    0