@TryinghardFESubmitted over 1 year ago
Hello, this one is my favorite challenge so far. I made the challenge using TailwindCSS. Badly need some feedback for further improvement of my knowledge and skills. Thanks and happy coding! =)
Guillermo
@Guille-SanchezAll comments
- @Guille-SanchezPosted over 1 year ago
In a quick look, the website looks awesome. I noticed you'd used vanilla JavaScript, which is pretty wild but since the challenge is a static site, it is all right. For challenges which are dynamic, for example posting comments, I would recommend you to try a library like React or framework like Vue. You can totally do those challenges with vanilla JS, which has its own merit, but it may be a little bit discouraging to do so, since it tends to be much more difficult.
Having said that, your repo seems well organized. The only comment I would give you is to separate the code from index.html into more files, and import them in index.html. Your code right now has 291 lines, which may be difficult to debug/update in the future. I am not well verse in vanilla, but I think there must be a way to do so by using it.
Marked as helpful0 - @momin-riyadhSubmitted over 1 year ago
Can I use Grid in Flexbox components?
@Guille-SanchezPosted over 1 year agoHi! To my knowledge you can totally use grid inside flexbox elements. Think of each element as a container, the flexbox -grid attributes only modify the disposition and size of the element. But still, each conserves the state of being a simple container.
One recommendation I would give you is to use Mozilla as your browser when debugging flex-grid items. Mozilla devtools is better optimize for dealing with them, look into it, best luck!
Marked as helpful0 - @byKrizSubmitted over 1 year ago
Hi all, this is my frontend mentor project, in which I had to create a web page that consumes an API for URL shortening. I used axios, reactjs and sass to develop the page. The hardest part was making the CSS fully responsive and adapting to different screen sizes and devices. Many times the design broke or didn't look good. I also had difficulties to make some CSS interactions with javascript, like the copy animation that shows a message when a shortened URL is copied. I would like to know if you have any advice or suggestions to improve my code or layout. Thanks for your time and attention.
@Guille-SanchezPosted over 1 year agoHi friend! It looks pretty good. I took a quick look at the website and you had very good ideas. one of the things you may try to implement to the website is to save the shorthen-urls on "local-storage", and retrieve those links after the page is refresh. This brings a better user experience. You should also include a button to delete the links and things like that.
Another thing I noticed is that you used really good semantic HTML, but you may have forgotten (or I did not notice) to put the main tag.
Overrall it is pretty well-made the website and you should be happy for what you have made. Congrats!
Marked as helpful1 - @Keenu22Submitted over 1 year ago
This is my first project. all feedback are welcome.
@Guille-SanchezPosted over 1 year agoHi! I think your page was wrongfully deploy somehow. It is weird because the code in the repo looks good, but when inspecting the website the code it shows is not the same as the one in the repo. For example, there is an image inside a p tag. Try deploying it again, and lets see how it goes. Best of luck!
0 - @parimaldesignSubmitted over 1 year ago
Please provide your feedback on how I could have made the code better and more efficient. I think I could have used something better instead of using 'magic numbers' for the card's width. I will update the code and make it more accessible, efficient as I learn more.
@Guille-SanchezPosted over 1 year agoHi! First of all your work looks pretty good. I took a quick look to your code and css and seems all right for the project. Specially I liked how you named your classes. Regarding your question of no using magic numbers for the card's width, the way I would have approach to it is by fixing the width of the image. And from having an image with a fixed width (i.e. width: 300px; height: auto; object-fit: contain). After that, I would try to make the hole card fit the width I want with padding. I find this approach more maintainable in the future because in case you want to change the image, you will have only one point of change instead.
If you want the image to increase/reduce size by making it responsive I would recommend you to search for the css function called clamp and use rem instead of px for such units. THIS LAST PART is a little bit more advanced, so take it with a grain of salt. You are doing well my man, I would recommend you to practice another exercise instead of stressing yourself with making this exercise perfect. There are more interesting exercises beyond, just improve a little bit each time you solve one
Marked as helpful0 - @sanchesaline6Submitted over 1 year ago
What other CSS properties should I have used to center my divs? Was there a correct semantic markup I could've used despite of the divs tags I used?
@Guille-SanchezPosted over 1 year agoHi! There are many ways in which you could try to center a div in CSS; however, from some years it has become a 'standard' to use Flexbox or Grid because it is way simpler.
The advantages of using those previous methods is that you do not need to use position relative/absolute, and it usually takes 2/3 lines of css to center a div. I highly recommend you look into any of them. Many people find Grid easier, but grid and flexbox have their own use-cases. I do recommend you to practice a lot one method and once you've mastered it study the other. It is really confusing to study both at the same time.
Another note, try to make the width and heights of your container responsive. Meaning, it is way easier if the parent container has no size and the children provide the height. For example, .qr-container has height = 500px. If the image needs to increase probably that number should also increase and it would be nice if that change was made automatically. for example.
.qr-container without a height img with a height determined by you h2 and p in a div and this div has a padding top and bottom that gives the .qr-container the height you want
I kown I said a lot, and it may be a lot of concepts to learn from scratch, so DO NOT WORRY. By doing many more projects it becomes a second nature. You are in a good track!
0
