Skip to content
OverviewSolutions
25
Comments
149
Enmanuel Otero Montano
@Enmanuel-Otero-Montano

All comments

  • Enmanuel Otero Montano•2,155
    @Enmanuel-Otero-MontanoPosted 11 months ago

    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.

    My solution

    Check the code of my solution.

    Greetings, I hope I have helped you.

    Marked as helpful
    0
  • HendKH•10
    @HendKHSubmitted 11 months ago

    The project wasn't difficult. I'm sure of my code .But , I wonder If it be more optimised in another way ?Your suggestions , please :) thank you .

    QR-code-coding-challenge

    3
    Enmanuel Otero Montano•2,155
    @Enmanuel-Otero-MontanoPosted 11 months ago

    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
    0
  • NovichronasJr•20
    @NovichronasJrSubmitted 11 months ago
    • How long does it take to become a full stack developer?
    • Where to find the perfect guidance to gain not only knowledge but experience in Web development?
    • How to know whether you are on the right track while building projects?

    Responsive QR Code component using HTML and CSS

    1
    Enmanuel Otero Montano•2,155
    @Enmanuel-Otero-MontanoPosted 11 months ago

    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.

    0
  • abhijeet•30
    @imabhijeetSubmitted 11 months ago

    Hey folks, I want you all to review my solutions. Any suggestion and feedbacks on this will be helpful for me.

    Responsive QR code component

    2
    Enmanuel Otero Montano•2,155
    @Enmanuel-Otero-MontanoPosted 11 months ago

    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
    1
  • Enmanuel Otero Montano•2,155
    @Enmanuel-Otero-MontanoPosted 12 months ago

    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
    0
  • MatthewSheldon•190
    @PatrickNgabiranoSubmitted 12 months ago

    The areas I found difficult while building the project are, I failed to provide different colors for each score I was provided with and When I uploaded my solution, I was not able to see logos of each score. and You see in the challenge. Feedback is welcomed to see how I could fix it. And I redo it again.

    CSS AND HTML

    1
    Enmanuel Otero Montano•2,155
    @Enmanuel-Otero-MontanoPosted 12 months ago

    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.

    1
  • Samuel Canales•20
    @Saam-DeevSubmitted 12 months ago

    Es mi primer proyecto tanto aqui como en github, asi que disculpenme si el codigo no es el correcto, pero agradeceria que me dieran recomendaciones de como mejorar este y muchos proyectos mas :)

    QR

    1
    Enmanuel Otero Montano•2,155
    @Enmanuel-Otero-MontanoPosted 12 months ago

    Hola Samuel!

    Felicidades por completar el desafío! He revisado su código y he de decir que entiendo que al ser su primer proyecto tanto aquí como en GitHub, usted debe tener poca experiencia, pero quiero felicitarlo nuevamente porque a pesar de eso su código es muy bueno. Usted ha utlizado etiquetas en HTML con sentido semántico, algo que no suelen hacer los dev con poca experiencia, también usted aplica la mayoría de los estilos con selectores de clase, algo que a mi me parece una muy buena práctica. Solo me queda decirle que se documente siempre sobre buenas práctica y no pare de practicar, así no parara de mejorar.

    0
  • Enmanuel Otero Montano•2,155
    @Enmanuel-Otero-MontanoPosted 12 months ago

    Hello @vishalraj947!

    Congratulations on completing the challenge. A question about your question: Did you try to apply the border-radius measurement with fixed units, in px for example? Why do I see that you have it in % and it seems to me that that is what may be causing the borders to not be synchronized? -radisus.

    My reasoning is because by using % as a unit of measurement you are applying a measurement that depends on another so that can vary. I don't know if I was clear in my explanation? I wait for your response.

    Marked as helpful
    2
  • Subhashree Sethi•80
    @SubhsreeSubmitted 12 months ago

    hii everyone..

    • one thing I could not do is When hovering over the svg image(social links in footer) , the image's color will change to green.
    • how will i do it ?
    • let me know if you find any areas in codes that you think can be improved.
    • waiting for feedback.

    clipboard-landing-page solution

    2
    Enmanuel Otero Montano•2,155
    @Enmanuel-Otero-MontanoPosted 12 months ago

    Hello @Subhsree!

    It is difficult to achieve the same challenge by putting the social media icons as images (<img> tag), you can change the color using properties like filter and drop-shadow, but this will apply the set color over the entire image, which It will not be as the design requires.

    I think the ideal solution would be to put the icons directly as svg and then use the fill property on the hover

    Example:

    .footer__container-socials--svg:hover {
        fill: hsl(171, 66%, 44%);
 }

    Share the link to my solution so you can understand better.

    solution on github

    Greetings, I hope it helps you.

    Marked as helpful
    0
  • Enmanuel Otero Montano•2,155
    @Enmanuel-Otero-MontanoPosted 12 months ago

    Hello @Tatyane-Goncalves!

    Congratulations on completing the challenge. Some steps that can help you make the website responsive are the following:

    It uses a design technique called mobile first. This is to develop the solution first for cell phone screens. This is very logical, since nowadays the web is browsed more on cell phones than on desktop devices. Once you adapt, it will be very easy to bring the design to larger screens.

    Research and learn about media queries and CSS properties such as display flex and grid, they are essential in responsive designs, and also learn to use relative units such as em, rem, %, etc.

    Another piece of advice is to always try to apply styles with class selectors. If this is true, it helps a lot so that the styles do not get stepped on and it is much easier to debug the CSS, plus you will have fewer problems with styles in large projects.

    Lastly, don't stop practicing.

    Greetings, I hope it helps you.

    Marked as helpful
    0
  • Enmanuel Otero Montano•2,155
    @Enmanuel-Otero-MontanoPosted 12 months ago

    Hello!

    No question is stupid. For the resume you must include the URL of the GitHub profile. I hope that clarifies your doubt.

    1
  • ShadowMagus•20
    @ShadowMagusSubmitted 12 months ago

    I only had some trouble with centering the div element vertically as couldn't figure the total height of the body. the developer tool on chrome wasn't helpful in this somehow but at the end of the day I did manage to bring it to centre more or less. let me know how you would do it?

    QR Code Solution using html and CSS only, without bootstrap.

    2
    Enmanuel Otero Montano•2,155
    @Enmanuel-Otero-MontanoPosted 12 months ago

    Hello ShadowMagus!

    Congratulations on completing the challenge. An easy way to center an element is by applying the following CSS properties to the parent element (in this case the body) of the element you want to center: display: flex; justify-content: center; align-items: center;

    Marked as helpful
    3