This is first project I have done using Tailwind CSS, so it's a first time for me and it was awesome to work with.
What challenges did you encounter, and how did you overcome them?NA
What specific areas of your project would you like help with?any suggestion or feedback would be helpful.
NA
What challenges did you encounter, and how did you overcome them?NA
What specific areas of your project would you like help with?any suggestion or advice would be helpful
This one was a lot of fun and in the way i learned a few new things.
What challenges did you encounter, and how did you overcome them?The challenge for me was the status side was containing a lot of space around. It took me a while, but then i switched to grid and it was like butter from then on.
What specific areas of your project would you like help with?any feedback would be helpful.
I was able to solve all the problems myself, although I did a lot of googling and tried to learn from other people's code. However, I could not find a single person whose website was fully responsive or at least as responsive as I wanted. It took me days to complete, which may sound hilarious since it is a newbie project but I hammer homed a lot of fundamental knowledge and added new features to my knowledge base. I learned deeply about position absolute and relative interactions, dealing with the color of svgs and shaping them, properly setting the width of the image so that its height fully extends throughout the container without being small.
What challenges did you encounter, and how did you overcome them?The first biggest problem was the height of the image was not the same as the height of the container, so it looked silly. I tried to use rems, percents but at the end I realized to increase the height, I needed to increase the width since I wanted their ratio to stay the same. So, I gave it more width. Next problem was svg coloration. On the internet people said apply filters but to no avail. At the end, I found out that I needed to give a class or id to the path of the svg and directly paste the svg into html without using anything like object, img, picture, video or iframe. Then I applied the fill property, the problem was solved. The next big problem was working with absolute positions. I did not know that absolute positions are positioned relative to the nearest ancestor with position set to relative or smth else. This was an important realization because for mobile the absolute container needed to be relative to the section, whereas in desktop, it was supposed to be relative to the share button. Next up was the problem of whether to use a separate share button when the share button is clicked. I decided to stick one button only. Subsequently, I needed to decide to create two absolute containers, one for mobile, one for desktop. As I said, in two states they were supposed to be relative to different elements. That's why I made that choice. That really solved me the problem of responsiveness. My work was getting very slick. Btw, I also faced a dilemma on whether to use focus, active or hover states for changing the colors of the svg or to add or remove a certain class using javascript. I went for the second option because it seemed more reasonable and easier to implement and did not cause me any problems. Among the final problems was using javascript for showing the containers. I made it so that in a mobile screen, javascript shows the container made for mobile and for desktops, desktop container. It was all cool after all these days of struggle. The final touch was making sure that when resizing a mobile container opened in mobile view disappear when the viewport is resized to desktop size and vice versa. I again used javascript for that and everything worked fine!
What specific areas of your project would you like help with?Please, report any problem you see. I am very very very very open to any form of feedback. Feedback is invaluable to me. Thanks beforehand!
This time i took almost no help from google and solved it on my own.
What challenges did you encounter, and how did you overcome them?I faced challenge while giving the image the hover effect. So for this time, i didn't put it there. I'll upload the updated version with the hover effect later, cause i don't want to copy anyone.
What specific areas of your project would you like help with?Any suggestions on the hover effect will be really great.
This time i completed the challenge without any external help. GG.
What challenges did you encounter, and how did you overcome them?NA
What specific areas of your project would you like help with?The overall size of the container is always either a little small or big.
I structured the divs much more clearly this time ig.
What challenges did you encounter, and how did you overcome them?NA
What specific areas of your project would you like help with?If anyone can explain to me in short how does the length of the webpage works and how i can customize it, on which elements it depends. please help.
None
What challenges did you encounter, and how did you overcome them?Adding padding at the bottom of the page caused the site to overflow the viewport.
What specific areas of your project would you like help with?Adding padding at the bottom of the page caused the site to overflow the viewport at the sides.
All
What challenges did you encounter, and how did you overcome them?ok
What specific areas of your project would you like help with?ok
NA
What challenges did you encounter, and how did you overcome them?The challenge for me was to make it responsive. But i figured it out.
What specific areas of your project would you like help with?how should i think before making such responsive projects? i mean how should i categorize everything or plan everything?
