Looking to hire developers?
@shivaprakash-sudo
@sagekim6
Submitted
I finally finished this project. I wish I could do better. I don't know how to optimize my code. I used the 'memo' hook but In the Navigation component, there is too much-repeated code. Also, I couldn't apply the background color transition to mobile design.
@shivaprakash-sudo
Posted
Hello sagekim6,
I've tried to check the live site, but it seems like the styles and the images are not loading on to the site.
js as file extensions when using react?min-width in media queries, instead of max-width.Good luck!
Marked as helpful
@JordiM21
Submitted
@shivaprakash-sudo
Posted
Hello Jordi Mantilla,
The chart component itself is looking good, but unfortunately I'm not able to see the generated chart.
I just checked in Edge browser and it is miraculously working!😂 I think the problem was with the Firefox browser, because I get the following error in my console, when I checked for any errors.
Uncaught SyntaxError: import assertions are not currently supported. So lookout for these kind of things and try to do cross-browser testing.
Anyway, after checking the bar chart in Edge, I have few suggestions.
section, article etc., and the attribution using footer.Keep up the good work!😊
Marked as helpful
@mouad-chakiri
Submitted
@shivaprakash-sudo
Posted
Hello Chakiri,
Your solution looks perfect!
Just a few things I'd like to suggest, if you don't mind.
main, instead of just div.divs inside the card and you can use section or article for wrapping the whole card.Keep up the good work, I hope to see more of your work.😁
Marked as helpful
@celia-tosic
Submitted
This challenge allowed me to practice SCSS and to use Autoprefixer !
@shivaprakash-sudo
Posted
Hello Cellmix,
The card looks fantastic on both mobile and desktop. I just have a few suggestions, if you don't mind.
footer.h1 tag is usually used for page headings and for other sections and components, usually h2-h6 tags are preferred.section, article, etc., for better accessibility.I hope my feedback is helpful. Good luck!
Marked as helpful
@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.
@shivaprakash-sudo
Posted
Hello Paula,
The chart component looks good on desktop screen, but there are few issues with it as given below.
main tag and the attribution inside a footer tag.I hope the above points are helpful and I hope to see more of your work, good luck😊.
Marked as helpful
@Irina-Dehtiarenko
Submitted
The only problem I think I have for now is I don't understand why doesn't it show me a new tip every time I click? Maybe it is related to getting data from api, do I have any problem in the code?
One more question about CSS styles and HTML structure: how else could you build these extra accesories at the bottom of the board?
@shivaprakash-sudo
Posted
Hello Iryna,
fetch API.{
cache: "no-cache"
}
After I've done this in my code, I started to get a new advice every time I clicked. Let me know if it doesn't work.
Marked as helpful
@Bubblecrown
Submitted
@shivaprakash-sudo
Posted
Hello BubbleCrown,
The output looks amazing, even the dark and light modes are working fantastically, good work!
Few things to consider:
type used as the folder name when you've created interfaces inside it?🤔Happy coding!
@Talkitive
Submitted
Nothing is difficult in this project but i just practiced some skills which will make me a better developer one day..
@shivaprakash-sudo
Posted
Hello Roy,
link tags inside the body, instead of head section.main tag for main content inside the body for more semantic and accessible approach.Happy coding!
Marked as helpful
@Tammy-Ajoko
Submitted
@shivaprakash-sudo
Posted
Hello Tammy,
I have few things to say:
375px. This is because max-width property was used instead of min-width in the media query. The width properties given in the design are just for reference, you don't need to code particularly for those widths.min-width property in media queries. For example, have one kind of layout until 600px (mobile screens) and then use min-width: 600px (tablet screens) property to change layout for screens starting with width 600px. For even bigger screens, you can use min-width of 1000 or 1100px. Try not to put too many media queries.main tag.Happy coding!
@om205
Submitted
Why cannot other people see background image (using url) in my solution from github page link url?
@shivaprakash-sudo
Posted
Hello Dubey,
GitHub looks for images using relative path, so we have to give relative path to the images instead of absolute paths. Instead of the path you've given, try ./images/your-image-name.png. Here . represents current folder (one dot means one step upwards into the folder structure), since the images are inside the images folder, you go into that to choose the image.
Few notes to consider:
max-width: 100%; for images, so that they behave responsively.rem or em instead of pixels, to make the site easier for responsiveness.Happy coding
@OmarMAttia7
Submitted
Any feedback you have is appreciated. The screenshot is missing some images, apparently the platform can't handle image lazy loading correctly.
@shivaprakash-sudo
Posted
Hello Omar,
I've checked the live site and it looks really good. I like the way you used TypeScript in the components, keep up the work!
Just a small note, you could add few screenshots to the README file, so that whoever comes to that repo would know how your site would look without them having to open the live link.
Happy coding!
Marked as helpful
@archisvaze
Submitted
@shivaprakash-sudo
Posted
Hello Archis,
Your site looks good and everything works as expected, good work.
Few things to note:
P.S. I checked your movie app and the animation of the movie details on hover is a good touch.
Happy coding!
Marked as helpful
@Shahin296
Submitted
I didn't find any difficulties completing this challenge but any feedback would be appreciated.
@shivaprakash-sudo
Posted
Hello Mohammad,
header into a nav element.Happy coding!
@HadjerL
Submitted
@shivaprakash-sudo
Posted
Hello Hadjer,
Regarding padding and margin, we can't say exactly what the value would be, from a design, but we can do trial and error to see what value is the closest one which matches the design.
Try playing with different CSS values for particular property like padding or margin and see how it effects the overall design. Try doing this with various properties and you'll start to get how these things work and how to approach a design.
For small projects like this, we don't need much organisation of files, but as projects become bigger, try researching which type of project structure would be good for the tech stack you choose.
Try to research about the usage of semantic tags to make your site more accessible.
Keep up the work! Aim higher and try to reach for it.
Marked as helpful
@nobody1234455
Submitted
Hi there, Frontend Community I'm in trouble with JS when I make an API call. Can anybody tell me how I can handle delays after calling the API using fetch?
@shivaprakash-sudo
Posted
Hello Thih_Nezzy,
The Advice API caches the data for 2 seconds, which is why you're having delays in responses. You can avoid the caching using the following code, as a second argument to the fetch method.
{ cache: "no-cache" }
Let me know if it doesn't solve the problem.
Marked as helpful
@SindhujaBandaru
Submitted
This is my 4th project but still i'm struggling to add images to different type of projects.In my browser it shows well but in some deployment apps it isn't showing the image.What should i do?Anyone please suggest me.
@shivaprakash-sudo
Posted
Hello Sindhuja,
The issue would most probably be related to the path of the image you're providing in the HTML. We have to provide relative paths to the image src attribute, for example, let's consider a project structure as follows.
QR code component
images
qr-image.png
index.html
styles.css
In this case, the image src inside your HTML should have something like ./images/qr-image.png, where one . represents that we're searching something inside the root folder, which in our case is the images folder and inside that we're taking the image.
I used to have this problem too, but after some researching the above solution was what I found to be helpful. I hope it solves your problem, please let me know if it doesn't.
Also, the GitHub repository link doesn't seem to work, can you please provide a link to your source code?
Marked as helpful
@ghambino
Submitted
@shivaprakash-sudo
Posted
Hello Abbas,
For some reason the app doesn't work for me, I tried it in different browsers, but it doesn't work in them too. It just says loading. Could you please look into this?
Also, the search bar could use some padding to give some breathing space for the content inside.
@sakshi-bit
Submitted
How do i choose whether i have to use CSS grid or CSS flex property?
@shivaprakash-sudo
Posted
Hello Sakshi,
Congrats on submitting your first challenge!
The card looks very good and even the code looks neat enough, the only things which need to be changed are:
main tag, for more semantic approach.README-template.md and update that accordingly, instead of updating the default README file.Regarding flexbox and grid, you don't need any of them for this project, they only come into picture when there are multiple rows and columns involved.
Happy coding and good luck to your next projects!
Marked as helpful
@PaletteJack
Submitted
Thanks for checking out my solution!
It took me a while to get it deployed to heroku.. finally got it figured out though!
I really just used node to create an initial quote when the app is loaded. After that it's all client side. Works okay, my first time using fetch().
@shivaprakash-sudo
Posted
Hello PaletteJack,
The site looks good and is responsive, but it doesn't work in Firefox after the initial advice is loaded. This is because of the Advice API caching the data when we fetch it, this can be avoided by putting { cache: "no-cache" } as a second argument inside the fetch method.
Regarding the initial advice, you don't need to use back-end for that, you can do it directly on client side using the same getAdvice method on window.onload function.
You did good for your first time, keep up the spirit and good luck on your next projects.
Marked as helpful
@Bach-Nghia-Nguyen
Submitted
@shivaprakash-sudo
Posted
Hello Bach,
The website looks good and is very responsive, but I'm confused as to why React was used for a static page.
You could also update your GitHub README file about your website, instead of leaving the default template like that.
Also, the background image in the design seems to have some opacity set to it to make the hero section pop out, but in the website the lack of opacity makes it hard on eyes.
Happy coding and good luck on your next projects!
@DimitriTsikaridze
Submitted
@shivaprakash-sudo
Posted
Hello Dimitri,
The Advice API caches the data for 2 seconds, this makes the app not work on Firefox and make the advices delay in other browsers. To overcome this issue, you just need to add { cache: "no-cache" } as the second argument to the fetch method.
Also, try to wrap the content inside a main tag, to make the code more semantic.
Happy coding!
Marked as helpful
@LittLotus
Submitted
I find difficulty in keeping the page from overflowing on mobile. I would love your feedback on how to go about that.
@shivaprakash-sudo
Posted
Hello Lukman,
Good job on submitting your first challenge!
I have checked the live site and the card looks fantastic in both mobile and desktop screens, but I couldn't find any overflowing, can you please elaborate on what is overflowing or how to re-create the problem you're facing?
Good luck on your next projects!
Marked as helpful
@uyiplay44
Submitted
I find it difficult to centralize the image inside the white border. I'm unsure if the project was put at the center of the entire body and the media query. I don't have any questions but the best practice is to keep accepting more challenges to enable you get a proper understand of any kind of task.
@shivaprakash-sudo
Posted
Hello uyiplay44,
Congrats on completing your first challenge!
Regarding the centering of the image, you don't need to centre it, just use max-width: 100%; for the image, other than that you don't need to use any other sizing properties for it. Try putting some padding inside the card, that'll make it a little bit better looking, like the design.
I have few suggestions:
grid here.width, padding and margin to the body, instead you can apply it for the container inside it.min-width property).Happy coding and good luck to your next projects!
@AndreaFifo
Submitted
@shivaprakash-sudo
Posted
Hello Andrea,
Congrats on finishing the challenge!
I like what you did with the h1 element's font size for smaller screens.
Few suggestions:
{ cache: "no-cache" } as the second argument in fetch statement.window.onload function to call the advice API when the user comes to the website.advice-text and id-advice, you don't need to use span elements, you can directly use those for the parent elements themselves.alt="" for images, for accessibility reasons.picture as we only have one source, you can use it when there are multiple sources.main for accessibility reasons.Happy coding and good luck on next projects.