@Deeperr0Submitted 2 months ago
Konrad
@konradbaczykAll comments
- @konradbaczykPosted 2 months ago
Hi, I can give you some feedback :)
Design:
- you have to better focus on design details, for example: header image should be shadowed
- menu links are too little on desktop view
- menu links in mobile version have different layout
- images should be changed on mobile and desktop view - in your project you used only desktop images
- images in "Our creations" section have too much height
- try to use some type of "wrapper" to avoid too much stretch your content - When I zoomed out your site layout was totally stretched, also users with large screens will see bad layout
Code:
- try to split parts of code into smaller files - it'll make your code more readable
- avoid use "!important" - this property will provide only issues
- try do not use "px" units. Read about "rem" and "em" responsive units
- don't use values like this
padding-right: 5.5555555556%;. If u have to use values like this it probably (I think 99% times) means you did something wrong in other parts of code - I advice sort out the CSS properties, for example: dimensions are always on the beginning styles of the element or sort properties alphabetical
I hope it will help you in future projects, good luck :)
0 - @sksksk2024Submitted 3 months agoWhat are you most proud of, and what would you do differently next time?
I understand now what are pseudo elements and how to use them, so is a big big win!
What specific areas of your project would you like help with?Everything was easy until I've got to make the hover effect of the nft image. Tried using content, pseudo elements, the transition of the hover with background-image and z-index, but nothing really work. I even transformed the svg into jpg to see if the image works properly. It's a problem that I don't know how to resolve, even though I searched for info. Appreciated in advanced!!
@konradbaczykPosted 2 months agoGenerally looks not that bad, nice smooth hover effects :) I have some feedback:
- I have to use my mouse to move on site - component not accessible for only-keyboard users.
- card isn't responsive, layout looks squeezed on 375px (mobile view).
Marked as helpful1 - @vcollins1Submitted 3 months agoWhat are you most proud of, and what would you do differently next time?
Finishing the challenge
@konradbaczykPosted 2 months agoGenerally good job, I noticed two thing to improve:
- view of the image between ~500px and ~1000px - it doesn't looks good when this image is stretched too much
- no hover on the delete button in cart
0 - @danmlarsenSubmitted 3 months agoWhat specific areas of your project would you like help with?
I appreciate any helpful feedback.
@konradbaczykPosted 2 months agoGood job. Only thing to improve in my opinion is font-size on nav links on desktop view - they could be bigger. Rest of the code is excellent.
1 - @danmlarsenSubmitted 3 months agoWhat specific areas of your project would you like help with?
I appreciate any helpful feedback.
@konradbaczykPosted 3 months agoGreat job, it looks very good. I tried crash how your form works but I couldn't :)
1 - @dimitrisdrSubmitted 3 months agoWhat are you most proud of, and what would you do differently next time?
I think that after many tries in different small projects I have finally started to understand how accordion items work. I used grid layout for transitioning for height 0 to auto which make thinks a lot easier.
What challenges did you encounter, and how did you overcome them?The background screen pattern is something that I struggled with. I think that I need to work better on this topic
What specific areas of your project would you like help with?I think that I didn't manage to display the background pattern like the design. I don't think that I understand how the background-position property works especially for smaller screens.
- @tannguyenk3Submitted 3 months ago@konradbaczykPosted 3 months ago
Generally works well, looks really good :) I can give you some advice's:
- Use more tags for better accessibility. You gave everywhere div and p tags, but you could use form, input, label etc. I recommend you about accessibility and why it's so important.
- Try to avoid using window alerts (like this:
alert("Please select at least one rating!!!");. ) This provide bad user experience on your sites. Make your own alerts with HTML and CSS.
0 - @gmagnenatSubmitted 3 months agoWhat are you most proud of, and what would you do differently next time?
I started mobile first, did all the css for mobile and desktop before starting to write one single line of javascript.
Next time I need to plan a bit more the javascript before starting html and css as I had to refactor quite a few times.
What challenges did you encounter, and how did you overcome them?There are quite some details to handle with javascript and it took me time. Probably by implementing tests this can be done much faster.
What specific areas of your project would you like help with?I try to include accessible feature in my solution. Currently it is using the `` element.
I'd like to have something announced like "total per person: 100$, tip per person 5$". The issue I have is only the value is announced as the text stays the same. I try to clear the html before updating the value. Still the number only is announced. (I use firefox and voiceover on mac)
- @danielbasilioSubmitted 3 months agoWhat are you most proud of, and what would you do differently next time?
I am very proud of the responsive layout made using flexbox. In the future, I would focus on using some framework to increase the speed of development.
What challenges did you encounter, and how did you overcome them?I hadn't actually worked withUsing fetch before. It was really interesting and fun.
What specific areas of your project would you like help with?I believe in the separation of responsibilities of javascript
@konradbaczykPosted 3 months agoBecause link to code doesn't work I just look on design and I noticed that your app display "1hrs" and in design it was "1hr". Trying to change this looks simple but it can be really good lesson :)
0 - @rainofSubmitted 3 months agoWhat are you most proud of, and what would you do differently next time?
I'm proud of getting the form submission, error management, and navigation between the success and form submission pages to work. Although it wasn’t smooth, I learned much from the lesson. Next time, I’d focus on improving my event-handling skills by gaining more experience and applying best practices from the start to make the development process smoother.
What challenges did you encounter, and how did you overcome them?I faced challenges with handling events using JavaScript, which was new and initially confusing. To tackle this, I took a moment to step back, then relied on documentation, consulted ChatGPT, and used a trial-and-error approach to understand better and address the issues.
@konradbaczykPosted 3 months agoBecause I don't know React yet I will tell you my opinion about first view on this project:
- in my opinion on mobile view, more or less between 500-900px newsletter box is too big
- on desktop view this box is too small, I can't read text on my monitor without enlargement window
- remember about "cursor: pointer" on links and buttons
Marked as helpful1 - @Islandstone89Submitted 7 months agoWhat are you most proud of, and what would you do differently next time?
I managed to get the "Share" popup positioned correctly on both mobile and desktop.
What challenges did you encounter, and how did you overcome them?The biggest challenge was having the button appear alongside the overlay on the mobile layout. After quite a bit of experimenting, I made it work using absolute positioning and z-index.
What specific areas of your project would you like help with?I think I got it mostly right, as always I'm open to feedback :)
@konradbaczykPosted 3 months agoI can give u one tip :) Try to keep the order of the properties in CSS file. For example: u can keep it alphabetical or every time dimensions of the element (class) at the beginning, z-index at the end etc. It will help you to read your own code later because you will automatically know where properties are located :)
Marked as helpful1 - @roobiwebdevSubmitted 3 months agoWhat are you most proud of, and what would you do differently next time?
did it the grid layout
What challenges did you encounter, and how did you overcome them?to make it similar to the design and i use grid layout
@konradbaczykPosted 3 months agoDespite the inconsistency of some colors with the design, quite good work :)
Marked as helpful0
