N1Dovud
@N1Dovud
All comments
- N1Dovud• 170
@N1Dovud
Posted
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.
0 - duongns-vn• 210
@duongns-vn
Submitted
What 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)
N1Dovud• 170@N1Dovud
Posted
Hi, 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!
1 - Check the validation of the email when the user enters it.
- tchananet• 170
@tchananet
Submitted
What 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
N1Dovud• 170@N1Dovud
Posted
Hi 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!
0 - PPeter Bachman• 200
@PeterBachman100
Submitted
What 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.
N1Dovud• 170@N1Dovud
Posted
Hi 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!
0 What 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.
N1Dovud• 170@N1Dovud
Posted
Hi! 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!
0@kj728
Submitted
What 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.
N1Dovud• 170@N1Dovud
Posted
I 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!
0- salahdine• 100
@salahdinebocuif
Submitted
What are you most proud of, and what would you do differently next time?
Finish this project and learning new git command
What challenges did you encounter, and how did you overcome them?
I have problem with image and i overcome the problem withe setting height to the image and container
What specific areas of your project would you like help with?
Anything that needs repair
N1Dovud• 170@N1Dovud
Posted
Hi, it seems like your design for desktop perfectly matches that of the solution. But I notices some problems with responsiveness. First of all, I would suggest using a media query when the main content does not fit into the screen. Secondly, you called your css file index.css, which is usually not a convention. Although it is not a mistake, as a rule of thumb it is usually called styles.css. Also, I noticed some tag problems in your html file. Try to use semantic tags whenever possible. It helps screen readers and web crawlers to understand its structure and what it is about. Other than that, use appropriate tags. I notices you used div for paragraphs, headings and used paragraph tag for prices, which is not a good idea. Well again, I am not a pro myself but I tried to help you out. If you need some ideas, you can go over my solution for this project. If you have any specific questions, I am ready to help you out!
Marked as helpful
0 - Oladelejnr• 20
@Oladelejnr
Submitted
N1Dovud• 170@N1Dovud
Posted
Hi, I guess you did not build a recipe page but from your solution, I can see that you have a decent understanding of html and css. I am quite sure you can successfully build the recipe page with some guidance. Goodbye!
0 - Anwar Mestycer• 420
@AnwarMestycer
Submitted
What are you most proud of, and what would you do differently next time?
make my own profile links
What challenges did you encounter, and how did you overcome them?
no challenge encoutered
What specific areas of your project would you like help with?
working with links
N1Dovud• 170@N1Dovud
Posted
Well done. However, if you want to match the solution exactly, I would recommend decreasing the gap between hobbies paragraph and the links div. Also, you should make your container and links bigger to look more like a solution. Finally, when a user hovers over the links, the background color should be yellowish green not blue. I hope this helps!
1 - Prantaneel Pegu• 60
@Prantaneel-Pegu
Submitted
What are you most proud of, and what would you do differently next time?
Making the site responsive on all screens, from desktops to small mobiles. It even supports mobiles in landscape mode. Also, I wrote the code in a very clean and organized way.
What challenges did you encounter, and how did you overcome them?
Not any really.
What specific areas of your project would you like help with?
How can I implement responsive typography page-wide? I would like some links to guides on this topic.
N1Dovud• 170@N1Dovud
Posted
To have a responsive font size or responsive page as a whole try to use rem instead of pixels. REM is the root font size which as default is 16 px. What's cool is if you change the rem in your media query based on the screen sizes, you can easily make your fonts, padding, margin very responsive.
0 - mujtabaghafari• 150
@mujtabaghafari
Submitted
N1Dovud• 170@N1Dovud
Posted
- You should make the container a little bit smaller.
- Container border should be 1 px to match the design. Also, the box shadow needs to be 0.5 rem, yours seems a bit bigger.
- text about "published" should not be grey.
- paragraph after the heading should be grey.
- make your line heights 150%.
0 @dickykurniadi-icloud
Submitted
N1Dovud• 170@N1Dovud
Posted
I guess it would be a good idea to add some padding to the left and right of your texts. Also, the big text and the image has too much distance. Fixing padding or margins would make your solution better.
Marked as helpful
0
