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) :)
Sameer Singh
@SameerJS6All comments
- @LiarleyCodieSubmitted almost 2 years ago@SameerJS6Posted almost 2 years 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
onimg
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 - @moofathSubmitted almost 2 years ago
Please help me to review my coding, I will accept all suggestions from all of you. Thank You
@SameerJS6Posted almost 2 years agoCongratulations 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-millardSubmitted almost 2 years 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'; }```
@SameerJS6Posted almost 2 years agoThe 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
orcss display: flex
. But the nonetheless, below is the solution for your problemHere 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 helpful1 - @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!
@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 helpful1 - @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!
@SameerJS6Posted almost 2 years agoNice 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 - @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 AllIll be happy to hear any feedback and advice!
@SameerJS6Posted about 2 years agoI loved the color scheme and Gradient in it.!!.. But a minor change (i.e its 1000GB or 1TB, not 100GB)...
Marked as helpful2 - @folaa01Submitted about 2 years ago
First javascript project, thought I won't be able to do it but tried it... Will be glad to get feedbacks.
@SameerJS6Posted about 2 years agoWell nice one brother, must have felt good but you missed the color of Thank You (It's white, not black)
0