P
@GamerSubhan
Latest solutions
Time Tracking Dashboard
Submitted about 1 year agoI would love to get feedback on accessibility, responsiveness of the website, and clarity and cleanliness of my JavaScript.
Newsletter sign up
Submitted about 1 year agoWell, 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.
Article component
Submitted about 1 year agoPlease, report any problem you see. I am very very very very open to any form of feedback. Feedback is invaluable to me. Thanks beforehand!
Css grid layout
Submitted about 1 year agoWould 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!
four-card
Submitted about 1 year agoCan 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?
Card component main
Submitted about 1 year agoResponsiveness 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
Latest comments
- @N1Dovud
Hi, there! I liked your solution. However, I found some problems. The biggest issue is responsiveness - your website only works for 1300px + screen sizes. Also, when the website is loaded, weekly option should be coloured white because at first the statistics is for weekly report. Also, when you hover over cards, their background should be changed, not only when you click them.
- @duongns-vnWhat are you most proud of, and what would you do differently next time?
- Check the validation of the email when the user enters it.
email.addEventListener('input', updateButtonState) - Update submit button status and color based on email validity.
function updateButtonState() - Show or hide error messages depending on email validity.
- Change the color of the submit button when hovering in or out if the email is valid.
onmouseoveronmouseleave - Display success notification and email value when the user presses the submit button and the email is valid.
addEventListener('click', function)
@N1DovudHi, there! Great project! I liked it. As for feedback, if you pay attention to the text input field, when I click it, its border color becomes yellow, whereas according to the design, it needs to be black or smth close to that. Another thing I noticed is your website is not responsive, it only works for desktop but not for tablets or mobile devices. Do consider this and if you need some help, you can check out my solution. I hope I was of some help. Have a good day!
- Check the validation of the email when the user enters it.
- @tchananetWhat challenges did you encounter, and how did you overcome them?
Had some issues with installing fonts, and properly sizing and placing the image
What specific areas of your project would you like help with?Proper sizing and positioning of elements using CSS
@N1DovudHi there! I really liked your solution! It is almost perfect. I just have some points to help you out.
- You gave body height: 99vh; You needed to give min-height: 100vh; because it helps with responsiveness when the vh is too small.
- You applied margin 0 and padding 0 to body but as a rule of thumb, most developers use universal selector(*) for getting rid of default styling.
- Try to use variables defined in the root instead of putting the colors and font sizes one by one manually. This makes the code look clean, helps avoid confusion.
- Your container is a bit bigger than the one in the solution.
- Your box shadow is not spread as much in the y direction as it is in the solution. So, try fixing the y direction.
- try to use rems and ems more instead of px for better responsiveness.
- have a separate css file for styling instead of putting everything inside html file.
- You gave a bit too much right left padding for the paragraph and the heading. Try to lower it to match the solution. That's about it. I hope my feedback was of some use. Have a good one!
- @PeterBachman100What are you most proud of, and what would you do differently next time?
Happy with the javascript simplicity using the toggle feature for class list.
What challenges did you encounter, and how did you overcome them?Some of the padding sizes seemed unusual to me, so I had to use more media queries for the padding than usual.
What specific areas of your project would you like help with?I'll be curious to see how others have structured the pop-menu in html and positioned with css. It seems most intuitive to have it be a child of the footer section on mobile for the layout on the bottom, but then on desktop it would be easier for it to be a child of the share button so it can be positioned relative to that.
@N1DovudHi there! I really liked your solution. In fact, it is among the best I have seen. However, I noticed one tiny problem. There is horizontal scrolling when the viewport is between 750px and 800px but not a big deal really. What I am fascinated by is how you managed to keep the pop menu in relation to the share button and in relation to the lower section for desktop and mobile views respectively. I personally created two pop up menus, put one of them inside the section for mobile view, the other one relative to the share button as a parent. Only then I was able to achieve responsiveness. I was basically toggling the right pop up menu depending on the viewport width. But you managed that without that, I guess because your main container has a fixed width unlike mine, therefore the pop menu seems to stay relative to the share button even though it is relative to the section. Good job again! Way to go!
- @AliceeLeWhat are you most proud of, and what would you do differently next time?
I'm proud to use more responsive layout element like rem. Also, custom designs for each element is pretty laborious.
What challenges did you encounter, and how did you overcome them?I was having trouble over having the grid keep its ration when adjusting the padding and margin. When I switched to rem instead of px, it works. I mostly google or search w3school for similar tutorials.
What specific areas of your project would you like help with?I'm still having trouble placing the quotation mark under the testimonial bolded text. I've tried using z-index and position:relative, but my code displays it as separate divs. Furthermore, I don't know how to make the pfp images more responsive when resizing. Would appreciate much help if anyone can help.
@N1DovudHi! I personally handled the quotation mark by setting its position to absolute and specifying top and right properties. I also set its parent to relative so that its position is relative to its parent rather than the whole document. Apply z index of 1 to the svg and z index of 2 to the text that overlaps with the svg. I think there is much of a need for making pfp images responsive since they are almost always small and their size does not have to change really, but if you really wanted, you could give them a different width depending on the vw. I personally think the biggest problem you have is your paragraph contents whose font size depends on the vw. You probably wanted to make them responsive but as you go anywhere below 900 px, your text gets unimaginably small and thus illegible. In mobile screen, that's even worse. So, to fix it, just give a proper rem or font size in pixels. It will solve the problem. Good job, btw!
- @kj728What are you most proud of, and what would you do differently next time?
I am proud that I have been able to recreate the web design using CSS.
What challenges did you encounter, and how did you overcome them?Making the cards responsive. I opted to use % when defining width and height.
What specific areas of your project would you like help with?I am using media queries. I do not have a problem with styling small devices (phones) and any large devices (desktop) the problem lies within medium devices (tablets). When I write this : @media only screen and (min-width:600px) { /* lines of code*/} it is breaking the code for desktop (when the width is more than 1200px). That's the problem.
@N1DovudI liked your solution. Here is my feedback:
- Add margin bottom to the webpage.
- Sometimes your cards look too long, try to use less margin bottom or padding bottom.
- I guess your cards are vertically stacked, meaning you are using flex-direction column. What I would suggest is just use flex-direction row and set flex-wrap to wrap without anything else.
- If you examine the first paragraph, there are problems with its margins compared to first heading. Fix that.
- I think in your box shadow you did not give your cards some spread. Also, probably think about lowering the opacity of the shadow color.
- The biggest problem you have is not using semantic html tags. They are very important for SEO and accessibility and screen readers.
- I noticed you used too many divs. Try to use as few as possible, although using a lot is not a problem.
- Do not use the word "image in your alt attribute in your image tag because the screen reader tells that itself. Give meaningful description to your alts.
- Never have the main heading with h2. The heading of the page should I always be h1.
- Instead of h3 for sections, you can use h2 because you have not used it anywhere else.
- Set box-sizing to border box for all items; it makes working with boxes easier.
- Try to avoid setting a certain height to objects even if you are using a relative unit. Height should be a problem in responsiveness, the problem should be the width.
- You used too much css for your project. I used only 100 lines of css for which you used 5 times more code. That is probably because you worked on media queries too much. If you want some learning source, I would suggest freecodecamp, where you are given tasks bit by bit and you do them individially, which helps to be code efficient and understand lower level details better. I hope I helped. Have a nice day!
