@TryinghardFE
Front-End Developer with experience in creating responsive websites with React.js. I typically use raw HTML/CSS and JavaScript with React in the client side; however, there are times in which I prefer using TypeScript and TailwindCSS in my projects.
I’m currently learning...I am currently learning the MERN stack.
Latest solutions
REST Countries API with color theme switcher solution
#react#typescript#accessibilitySubmitted over 2 years ago
Latest comments
- @Guille-Sanchez
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 helpful - @momin-riyadh@Guille-Sanchez
Hi! 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 helpful - @byKriz@Guille-Sanchez
Hi 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 helpful - @Keenu22@Guille-Sanchez
Hi! 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!
- @parimaldesign@Guille-Sanchez
Hi! 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 helpful - @sanchesaline6What are you most proud of, and what would you do differently next time?
I'm most proud that the project looks like the prototype. However, I know I have some text alignment problems.
What challenges did you encounter, and how did you overcome them?I couldn't find a way for the text to look exactly like the prototype.
What specific areas of your project would you like help with?Any valid points are more than welcome. I'm not sure if I used the semantic HTML the right way, and I would appreciate some tips on how to improve my css
@Guille-SanchezHi! 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!
