How do I structure my repository for frontendmentor.com projects in a nice way? Should I work in the main zip folder or bring my HTML and CSS files out of that to work with?
Could you tell me if my code could have been cleaner, more professional or more efficient? If yes, how so?
My ability to design a qr code
What challenges did you encounter, and how did you overcome them?hosting a live site on git hub
What specific areas of your project would you like help with?what mistakes did i do that prevented the live hosting
Your index.html file should not be inside a folder. Bring it out of the folder. You can also bring other files out if you want but just make sure that when linking files and images, your file path is correct.
I was able to finish the project in half a day, making it responsive with Flexbox and clamp().
What challenges did you encounter, and how did you overcome them?At first, I struggled to keep the card responsive, but the clamp() function was a big help.
You did well. Looking at your code, you didn't use React though (and it was tagged). I almost didn't check because I'm not familiar with React. Your code looks clean and efficient.
Something to note though is that IDs should not be used so often in CSS. Classes are preferable when assigning reusable styles because they can be applied to different elements (e.g. div, p, button, etc) at once. You can use them to style multiple elements with the same attributes.
IDs are useful when working with Javascript but are preferably used when only one <h1> or <p> or whatever element you choose has the applied styling. IDs are also useful as anchor links. Otherwise, they should probably be used sparingly (this is what I've read online).
For more information, you can message ChatGPT with the following statement: 'when to use class and when to use id in CSS'. ChatGPT helps me a lot with figuring out how to achieve a particular result with my code.
I created a responsive page. I am proud of that.
What challenges did you encounter, and how did you overcome them?I faced an issue in setting the width of the page. I played around with adding extra div and applying CSS to it.
What specific areas of your project would you like help with?importing fonts
If you go to fonts.google.com and pick a font, you will see the option of 'get embed code'. Click on that, then copy the way you want to import it, whether as a <link> into your HTML or using @import for CSS. Then paste this, into the appropriate section in your code editor.
The 'author's image' did not load properly on the final webpage. Perhaps your file path was incorrect? I had a similar issue when I tried to push my screenshot to my remote repository but I have now resolved it.
If you need to go back one level, use ../ If you need to go back two levels, use ../../ and so on If you need to go forward one level, use / e.g. root files/inner folder/file in inner folder
Looks good, especially if you replicated by sight and not using a Figma file, but you didn't add padding to the bottom. Sizes and colours are slightly different but I think that's okay. We can always add our own flair as front-end developers. If you intended to follow the design exactly though, then there's some work to be done. Have a good day :)
