What are you most proud of, and what would you do differently next time?
I was able to dynamically change the content of the html elements, while also dynamically retrieving html elements using a loop. I guess my code was pretty efficient. The next time I would try to spend less time on solving problems.
What challenges did you encounter, and how did you overcome them?
The report div and badge divs were supposed to overlap but they did not, I found out that I needed to add position relative to report div and make it go up a bit relative to itself.
What specific areas of your project would you like help with?
I would love to get feedback on accessibility, responsiveness of the website, and clarity and cleanliness of my JavaScript.
What are you most proud of, and what would you do differently next time?
I would try to do the new projects faster without wasting much time on solving small problems. I also would like to code less while achieving the same result. I guess this time I wrote a little too much code to be on the safe side. Most importantly, I was able to finish the project today.
What challenges did you encounter, and how did you overcome them?
There were tons of problems but I guess I solved them by simply shutting down chrome and reopening it. I discovered chrome has some bugs like html element in dev tools was having 0.2 pixel more width than the viewport width, which was not an expected behaviour. I also believe chrome has problems rendering picture tag images and showing borders of inputs when they are given border radius.
What specific areas of your project would you like help with?
Well, I guess javascript part is flawless, html is very well structured. If possible I would like feedback on css, specifically, redundancies I have in media queries.
What are you most proud of, and what would you do differently next time?
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!
What are you most proud of, and what would you do differently next time?
I managed to finish the work in less than 2 hours and I think it almost fully matches the original design. The next item I would like to spend less time on building such an easy project.
What challenges did you encounter, and how did you overcome them?
I had to learn how to use grid and how to create a responsive design using grid. I used media queries for different width and changed the layout of grid depending on the width, which I think made the design very appealing.
What specific areas of your project would you like help with?
Would be great if anyone gave feedback on responsiveness of my project and my use of grid. I would love to get feedback on any other part of my project that needs further improvement. Thanks in advance!
What are you most proud of, and what would you do differently next time?
I am proud that the website is responsive and has a great design until the vw of 220px. After that, it gets messy. The next time I would like to get better at eyeballing because it is taking me a lot of time.
What challenges did you encounter, and how did you overcome them?
In some cases, I forgot the inputs of some properties and had to get some help from chatgpt. Also, I have a hard time knowing whether to use padding or margin when I can use both, although I fully understand their differences. Finally, when I was thinking about the layout of cards, it took me quite a while to think about wrapping two middle cards into a div to get the desired layout.
What specific areas of your project would you like help with?
Can anyone explain to me why my first card is smaller than others?Also, as you shrink the viewport width, you can see that at some point my two middle sections nested inside a div will have a smaller width than other cards even though div does not contain any margin or padding. Why is that the case? What can I do? Lastly, I truly don't know how to handle the distorted view of the website when the viewport width is under 220px. Can anybody give any suggestions?
What are you most proud of, and what would you do differently next time?
I am proud that I was able to do this project despite not being able to perfect it.
What challenges did you encounter, and how did you overcome them?
I had problems with positioning some of the flex items a bit differently compared to their vertical or horizontal positioning specified in the flexbox. I did not do anything about it. Also, responsiveness of pictures was another big problem. Unfortunately, I could not solve it despite all my efforts. I hope there is someone who can help me out.
What specific areas of your project would you like help with?
Responsiveness of the image. Plus, I don't know why but when I am changing the flexbox for the mobile view, the width of the container does not seem to be acting in accordance with my specifications. I would love to get help on that
What are you most proud of, and what would you do differently next time?
I was able to complete the project successfully. I am proud that I learned tons about lists and some pseudo selectors. The next time I ensure that list content, when longer than a single row, aligns with the start of the first row, rather than continuing from the bottom of the bullet point.
What challenges did you encounter, and how did you overcome them?
I had problems with styling the bullet point. I needed to make it smaller, color differently and create some space from the list item. I overcame the challenge using two different methods. One was making the list style position inside and then putting text inside the list item span and then adding margin or padding to the span itself. The other method was getting rid of the default style, adding my personal bullet point with my own specifications using ::before selector. Finally, there was a serious problem with aligning the bullet point with the subsequent text because of differences in font sizes. So, because vertical alignment did not work, I made the position of the bullet point relative and then added top or bottom space according to my taste.
What specific areas of your project would you like help with?
I would love some help on responsiveness of my website. Also, as I said before, I could not
ensure that list content, when longer than a single row, aligns with the start of the first row, rather than continuing from the bottom of the bullet point. So, would be great if someone helped with that.
What are you most proud of, and what would you do differently next time?
Well, I was able to complete the project without any difficulty. Finally, I felt like I knew everything well.
What challenges did you encounter, and how did you overcome them?
Choosing how to cover the items, delegating them into containers caused me some confusion. Like I could create just one container for the author info part but at the end decided to divide it into 3 parts. I would love to get some advice on compartmentalizing the project correctly or reasonably.
What specific areas of your project would you like help with?
I think the design looks fun but I am not sure if I fully followed code writing conventions.
What are you most proud of, and what would you do differently next time?
I was able to understand variable fonts, grid usage, and changing the font for smaller devices. The next time I try to spend less time on development of the project.
What challenges did you encounter, and how did you overcome them?
I did not know how to link fonts to my css. After doing some googling and understanding the properties for linking fonts, I was able to add them successfully!
What specific areas of your project would you like help with?
I guess with hovering part. I am not sure if the parent element should change when the heading is hovered or if when the parent itself is hovered, it should change.
What are you most proud of, and what would you do differently next time?
Today, I realized that I had to apply the flexbox to the body instead of the main so that the main becomes centered. I learned more about inheritance and its impace on children from parents.
Unfortunately, I did not quite understand why setting the height of the body to 100vh centered the main content vertically. Logically, I thought as default, the height is always set to 100vh but now I guess there is smth to learn.
What challenges did you encounter, and how did you overcome them?
Creating an item in the center was the difficult part but by learning from others, I managed to fix it!
What specific areas of your project would you like help with?
I am not sure, maybe some advice on building responsive design would be great!
