@Mutohi-R
Latest solutions
Latest comments
- @Enmanuel-Otero-Montano
Hello @Mutohi-R!
Congratulations on completing the challenge! Yes, instead of creating <a> tags, you can create <button> and have an addEventListener created for each of them and do the fetch operation when one of them is clicked, taking the corresponding data. I leave you the link to my solution so you understand better.
Check the code of my solution.
Greetings, I hope I have helped you.
Marked as helpful - @HendKH@Enmanuel-Otero-Montano
Hello @HendKH!
Your solution is good, but I would like to make a couple of suggestions.
Regarding what you ask about how to optimize your code, it is difficult to make an assessment about this in this project, since it is a project that does not need much code, perhaps in a project that requires more code you can see if there is room for improvement , but I'm going to the point, something that I could find in this project is that you establish at the beginning of your code margin and padding 0 for all elements and in my opinion this is not optimal, since there are elements that have padding or margin by default , with this there is a high probability that you will have to apply margin or padding to an element that already had one of these characteristics removed at the beginning of the code.
At this point you may think that the margin and padding of the default elements may never match the ones you want to apply, so you will always have to apply these properties to the elements, and that may be the case, but still It is not a reason to apply margin and padding 0 to all elements because if we look at how the browser interprets the code, you are requiring the browser from the beginning to set margin and padding to all elements at 0, so that it can later apply these properties again in the elements with the values that you establish, this definitely in larger projects would somewhat affect the loading speed of your website, which is not good for the user experience or for positioning in search engines.
I hope you understand what I'm trying to explain, if not, you can ask again. I forgot to tell you that I do agree with
box-sizing: border-box;One last thing, always write the styles in a separate file to the HTML file.
Greetings
Marked as helpful - @NovichronasJr@Enmanuel-Otero-Montano
Hello @NovichronasJr!
The time it takes to become a full stack developer depends on the time you dedicate to it, but applying 20 hours a week, I would say maybe a year and a half to have the basics and some advanced, don't expect to be an expert at that time in both areas.
Regarding your second question, always look for the official documentation, watch two or more tutorials on the same topic you are trying to learn and compare the way to do it and do not stop applying what you have learned, this platform is perfect for learning, make many solutions and try Increase the level of difficulty of the challenges and always ask for feedback, there are many experienced people here willing to help.
And on the third, on each topic you want to learn, look for good practices on that topic, follow the conventions.
- @imabhijeet@Enmanuel-Otero-Montano
Hello @imabhijeet!
Congratulations on completing the challenge. Your solution looks good, but I've looked at your code and would like to make an important improvement suggestion.
The suggestion is that you apply semantic tags in HTML, you have done everything with <div> and this is not good, with semantic tags I mean that you use <main>, the <h1> tags to the <h6>, <section>, <article>, these are just a few, there are more. The use of semantic tags is very important in web development, since they help browsers better understand how your website is structured, which translates into a more accessible website, improved web positioning and other improvements. I encourage you to search for information on the subject.
Greetings and keep practicing
Marked as helpful - @SarahCooper-TC@Enmanuel-Otero-Montano
Hello @SarahCooper-TC!
I don't know if you noticed that the images are not displayed. I know this is not why you asked, but if you want to improve, this should interest you. The reason why the images are not displayed is because you established an absolute path to retrieve the images, this works perfectly in your local environment, but not remotely. For it to work correctly apply the route as follows
./images/icon-ethereum.svg.On the other hand, to make a website well accessible you have to keep many things in mind, but some of them are the correct use of semantic tags, if you use the <img> tag put the description in the alt attribute. Have the appropriate color contrast between the background and the text, the appropriate font size and several other things.
If you have any questions, don't hesitate to ask.
Marked as helpful - @PatrickNgabirano@Enmanuel-Otero-Montano
Hello @PatrickNgabirano!
It seems that your problem with displaying the icons is because you assigned a path to request the images that does not exist in your repo, what you mean with the following
<img src="./assets/images/icon- memory.svg "It is that you look in your directory for an assets folder that inside has an images folder and inside that the icon, but the assets folder does not exist so the image cannot be recovered. The idea of this challenge to go one step further is to try to retrieve the data from the data.json file they provided you and display it in the interface.
