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.
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!
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!😊
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.😁
This challenge allowed me to practice SCSS and to use Autoprefixer !
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!
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.
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😊.
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?
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.
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!
Nothing is difficult in this project but i just practiced some skills which will make me a better developer one day..
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!
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!
Why cannot other people see background image (using url) in my solution from github page link url?
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
Any feedback you have is appreciated. The screenshot is missing some images, apparently the platform can't handle image lazy loading correctly.
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!
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!
