@Simplyvoda
Submitted
My first time fetching API's, please any feedback would be appreciated :) Thank you !!
Looking to hire developers?
@freakyjones
@Simplyvoda
Submitted
My first time fetching API's, please any feedback would be appreciated :) Thank you !!
@freakyjones
Posted
Hi Vodina,
** congrats on fetching data through API 🎉🎉🎉**
I just saw your code and here is one suggestion for you. Always handle errors on your API calls
fetch('https://api.adviceslip.com/advice').then((data) => {
// console.log(data);
return data.json();
}).then((adviceData) => {
// console.log(adviceData.slip.id);
document.getElementById('advice-id').innerHTML = adviceData.slip.id;
// console.log(adviceData.slip.advice);
document.getElementById('advice-box').innerHTML = adviceData.slip.advice;
}).catch((err)=>{
console.log("do whatever you want with this error", err)
})
Hope this helps, Thanks Happy coding :)
Marked as helpful
@rimshub
Submitted
Hi Frontend Mentor community! Here is my solution to the rest countries api challenge with dark and light theme.
Difficult part Fetching borders data and integrating with existing country data was a hard part for me in this challenge. I should have used routers from start for that but still I have done it without react router dom. Please give your suggestions on improving my code or any advice.
Built With
Thank you. Looking forward for your feedbacks✨
@freakyjones
Posted
Hi Rimsha congrats on completing the challenge 🎉🎉
your website looks just like the design. while reviewing your website, one mistake caught my eye, the filter by region dropdown list item cursor is not a pointer.
Happy coding :)
@Fran-Sanabria
Submitted
Hello, this is my second challenge, I am still improving day by day, all the feedback received
@freakyjones
Posted
Hi Fran,
congratulation on completing the challenge
I just saw your code and like to give my one suggestion with your permission,
@media screen and (min-width:950px) {
img{
height: 268px;
width: 268px;
},
h1{
font-size: 21px;
}
}
I hope it helps, Thanks. Happy coding :)
@MrEasty94
Submitted
Found this one quite a simple build. Had questions around whether or not to use background images as the source of the image for the perfume bottle (decided to go with bg images so I could change it based on a media query).
Really going hard on coding mobile first, as I'm finding the media queries are becoming much smaller.
Probably could do with tidying up the CSS a little bit, and maybe changing a couple of the class names so that they better represent the content but overall pretty happy with how this one turned out.
@freakyjones
Posted
Hi Michael,
congratulation on completing the challenge
I just saw your code and like to give you one suggestion
I hope it helps, Thanks Happy coding :)
@Paula-Carlech
Submitted
My difficulty was about creating the chart, I cound´t find a way to change the colors and fonts so I can build something like the original design. Any suggestion are welcome.
@freakyjones
Posted
Hi Paula,
congratulation on completing the challenge
I just saw your code and like to give some suggestions with your permission,
you can add another key to every object in the data.json and then map it for every bar so that you can change the color of the bars.
Start using semantic HTML in your code. Here is a blog for you to get started with semantic HTML. https://www.simplilearn.com/tutorials/html-tutorial/html-semantics
If you want to know how to do this with only Js you can check out my solution.
I hope it helps, Thanks happy coding :)
Marked as helpful
@casserole27
Submitted
I'm happy with my solution, but if anyone has any suggestions, I'm continually looking for ways to make my CSS more efficient and seamless between mobile and desktop. Thank you!
@freakyjones
Posted
Hello Clewis,
congratulation on completing the challenge. I just saw your code, Here is my one suggestion that may help you in the future.
Use of universal operator to get rid of the default browser Style instead of using margin:0, padding:0 for every device
*{
margin:0;
padding:0;
box-sizing:border-box
}
I hope it helps, Thanks Happy coding :)
Marked as helpful
@Jetyun
Submitted
-I would like to learn a faster way to code since it took me more than 6 hours to finish this. -I would like to learn more on responsive website, so that my image and text will be more responsive as the width getting bigger
You guys can go to the README at my github in the respository for more info.
Please criticize my work (especially the responsive part), thanks. If there's some tips on faster coding, please help.
@freakyjones
Posted
Hi Jetyun, congratulation on completing the challenge
I just saw your code, and here are my suggestion,
Here is one of my favorite videos regarding website responsiveness (https://www.youtube.com/watch?v=srvUrASNj0s).
I hope it helps. Happy coding :)
Marked as helpful
@lhpellizzon
Submitted
First time out of Tutorial Hell =)
@freakyjones
Posted
Awesome, More power to you Luis Pellizzon.
Happy coding :)
@abymani
Submitted
Setting navigational menu was difficult for me . I think my javascript code is not optimal it does work but there must be a way to do it better. any suggestions will be appreciated.
@freakyjones
Posted
Hi Abdul,
congrats on completing the challenge
I just saw your code, I would like to give some suggestions with your permission
hope it helps, Thanks Happy coding :)
@fsuropaty
Submitted
I'm struggling on how to change the picture depending on the screen size, Does using the <picture> tag is the best way to change the image or are there any better methods to do this task?
Thank You
@freakyjones
Posted
Hi, fsuropaty,
congratulation on completing the challenge.
There is two way you can handle image responsiveness
#image-section{
background-image:URL(image path);
background-position:center;
background-size:cover;
background-repeat:no-repeat;
}
My solution also uses this method.
#imagesection{
width: 10rem;
}
#imagesection img{
width:100%
}
I hope this helps. Happy coding:)
Marked as helpful
@Kapil101527
Submitted
Suggestions are well apreciated.
@freakyjones
Posted
Hi, Kapil,
congrats on completing the challenge.
I just saw your solution, Here is my one suggestion
Wrap your mobile-bg and parent-bg images inside the individual parent div and give them 100% width of the parent. That can make your image responsive. Check my solution for reference.
Hope this helps. Thanks, and happy coding :).
Marked as helpful
@iOwsla
Submitted
I had a problem placing my project in the middle of the page, other than that, I didn't have any problems.
@freakyjones
Posted
Hi Owsla,
congrats on completing the challenge.
I just review your solution and it almost looks like the design, Here is some tips that can improve your solution
Hope it helps, Thanks, Happy coding :)
Marked as helpful
@stepheigbe
Submitted
For some reason the images are not showing and I have tried every reason I know. Please help me out.
@freakyjones
Posted
Hi stepheigbe
congrats on completing the challenge .
\media\product.jpg
change it to ./media/product.jpg
hopefully it will
work../media/iconcart.svg
Thanks, Happy coding :)
Marked as helpful
@margaridalsemedo
Submitted
Hey there! First challenge with Frontend Mentor,
Do you folks have any suggestions of best practices? I feel that regarding the text style I wasn't super clear with my CSS.
Feddback welcome.
Thank you :)
@freakyjones
Posted
Hi Margarida,
congratulation on completing this challenge. I just saw your code and would like to give some suggestions with your permission
your border radius is not showing up in desktop view probably because your parent container card is much bigger than your child div card image. Try to give your parent a fixed height and then make your card-image container height 100% of the parent's height. in addition you can give your background image `{background-position:center, background-size:cover}.
More space between the card text container and its content will greatly improve your UI.
personally, i like to add {margin:0,padding:0}
with *{box-sizing:border-box}
for getting rid of default browser styles.
hope it helps, Thanks, happy coding :)
@Valhalla-2
Submitted
I find it difficult when i was trying to make website responsive. I am unsure of my margins. What is the best practice of making websites responsive?
@freakyjones
Posted
Hi kounik,
congratulation on completing this challenge.I just saw your code and would like to suggest two videos for learning more about website responsiveness and box-model, 1.https://www.youtube.com/watch?v=srvUrASNj0s //for website responsiveness 2.https://www.youtube.com/watch?v=-8ORfgUa8ow //for CSS box modal
the 2nd video is pretty long if you don't want to watch the whole video, you can watch only the box-modal section.
hopefully this help, Thanks, and happy coding :)
Marked as helpful
@Ali-Primer
Submitted
comment what you think about it
@freakyjones
Posted
Hello Ali, congratulation on finishing your challenge.
I just saw your code and I would like to give some suggestions with your permission,
*{margin:0,padding:0,box-sizing:border-box}
.@Maggus407
Submitted
What did you find difficult while building the project?
@freakyjones
Posted
Hello Markus, congrats on finishing the challenge.
I saw your code and it's pretty awesome, I tried this challenge a while ago and was having a problem with the flexbox issue. Regarding your image responsiveness, I think there is another approach: making a parent image container and then putting the image inside of that div with a width of 100%. let me know your thoughts. Thanks
Happy coding :)
@thisisharsh7
Submitted
While building the project I was unable to center the card body at the center perfectly so it consumes almost 1 hour to made it perfectly. I think I should focus on CSS position and flex property.
@freakyjones
Posted
Hi Harsh, Congratulation on completing the task . Also here is one of my favorite videos regarding the basics of HTML, and CSS. Hopefully, it will help you master HTML and CSS a lot faster. https://www.youtube.com/watch?v=-8ORfgUa8ow.
@LysitheaDarkKnight
Submitted
Question 1: What is the best way to apply padding inside the menu text (Right of the image)? I did it by giving padding to the menu text container and margin to the "Gabrielle Essence Eau De Parfum" so I am not sure if it is an effective way of aligning my text inside.
Question 2: Increasing the image of the Cart Icon inside the button would un-center the "Add to Cart" text. Is there a way to bypass this?
@freakyjones
Posted
@ LysitheaDarkKnight, congratulation on making this great solution.
if you want to align your text, use the text-align center. I just saw your code, use of padding and I think it's a pretty decent way to achieve aligned goals, although I will suggest using either padding or margin to achieve your goal.
you can make use of the path of SVG instead of using an image.
Thanks, Happy coding
Marked as helpful
@Edelrive
Submitted
I can't do Adaptive Layout(
@freakyjones
Posted
Hello, @Edelrive just checked out your awesome solution. Here are some of the tricks you can use to improve your code .
Happy coding...