I'm trying react spring now
What challenges did you encounter, and how did you overcome them?Not completely sure how to use react spring
What specific areas of your project would you like help with?With react spring
I've read your bio... It's much easier to start from a job in Ukraine. I've applied a couple of times for a trainee there actually. The requeirements for a dev in Ukraine are lower because we don't have that many and good IT universities yet. The market is oversaturated, noone is going to look for a dev here. These project will help you to build your portfolio, learn or create your own ideas. You'll have to compete with graduates with degree abroad. And employable level of projects is: advanced+guru.
This is my first time officially using both Zustand and Framer Motion so I would like so insights to how I handled the global state and how can I make it better.
What challenges did you encounter, and how did you overcome them?Global State Management and Form Validations.
I solved the state problem with Zustand since it was fun and easy to use.
For form validations I was thinking about React Hook form but didnt want to add more complexity.
Another problem I had was validating the form before moving onto the next step. The form wasnt like the normal forms where you have a submit button to check, so I did an interceptor function(Thats what I call it but basically a wrapper) around the increment function so that before it moves on to the next step it validates the form and only when its correct it will go on to the next one.
What specific areas of your project would you like help with?Global State Management and better structure of files and components
Nice work! I'm not a pro too, but you can add pointer for step4 "change", and I'm not sure about it, but: circle steps can become buttons - easy to jump to needed step.
Having completed a project without procrastinating, I think I would like to learn a bit more about CSS and HTML to make sure I know what I am doing.
What challenges did you encounter, and how did you overcome them?I believe my biggest challenge was worrying too much about whether the website was perfect or if I was using the best tag or attribute.
What specific areas of your project would you like help with?I would like help with the CSS part because, as a beginner, I’m not sure if my code is correct or functional enough.
instead of that endless margin-left - first add padding to <main>, then continue to build without margin-left.
I am proud that I delivered a result that is most likely identical to the design given. if it's not the case please let me know for next projects, I would use other ways to position my element in the center. this time I used margin-top and margin-left properties but I am sure it's not the best way to do it as I tried multiples values to get the right position.
What challenges did you encounter, and how did you overcome them?the project is simple but I had two major challenges: 1- how to center the block element , so I used "transform" property transform: translateX(-50%);
2-how to add responsiveness (I am new to it): so I used media queries I am sure that the responsiveness is not perfect so a feedback on this would help
What specific areas of your project would you like help with?I would like some help with the responsiveness part and thanks for your time.
body { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; } Try this to align(top-bottom) and justify(left-right) your project to the center. It applies to the parent component(body), don't forget about !!min-height!!. You can use grid instead of flex too.
I. kind of had trouble in aligning the layout and design, but I hope by working out these challenges would help me improve my skills in HTML and CSS.
body { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; } Try this to align(top-bottom) and justify(left-right) your project to the center. It applies to the parent component(body), don't forget about !!min-height!!. You can use grid instead of flex too.
I made the web's design different for mobile and desktops using @media query. i still need to learn how to use it properly though. I tried to use BEM system
What challenges did you encounter, and how did you overcome them?for the width of the mobile users it went fine. For the website, i had some problems with it. When it comes to the width and the height of the .protect-box, i had some difficulties with it. The elements inside the box (texts and image) went outside of the box.
What specific areas of your project would you like help with?Can you look at my media queries? is the css optimized with the structure and the codes? For the @media screen and (min-width: 600px) i need help with. whenever i made the height of the website smaller, the .product-box__text-box elements went outside the box. Everything went outside the box except the image. The button and the texts went outside of the box when the height of the website got smaller. Do you have any suggestions to help me with?
.product-box {width: 80vw; max-height: 80vh;} - you should add max-width in rem or px here to stop endless drowth. Also max-height: 80vh; gives you nothing here you can consider or not to use it at all or add something like height: 80vh; max-height: some rem... But very often you don't need height at all because it depends on padding and content inside.
img { max-height: 80vh; height: 80vh;} - same problem. Change max-height value to rem or px you need it to stop it's growth at
Please, consider to add max-width in px or rem to your <main> to stop it's endless growth
I’m proud to have completed this challenge, successfully making the design closely resemble the original while ensuring strong responsiveness. Next time, I’ll aim to complete it in less time with even more accuracy to the design.
What challenges did you encounter, and how did you overcome them?I faced a challenge in adjusting the margins but overcame it by modifying the positioning and using auto margins to achieve the desired layout.
What specific areas of your project would you like help with?I would appreciate help in refining the responsiveness across a wider range of devices, particularly with optimizing layout transitions.
.card-container add min-height: 100vh; here to align your project
Proud to take on this challenge has it gives me more chance of learning and rooms for improvement.
body { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; } Try this to align(top-bottom) and justify(left-right) your project to the center. It applies to the parent component(body), don't forget about !!min-height!!. You can use grid instead of flex too.
div card-item: width: 20%; height: 330px; ??? -with this it's aspect ratio is going to be totally broken... try to add max-width too and controll the height with paddings and content inside so that you won't need a solid height
This time, I used the rem unit rather than the px unit because someone suggested it to me
in font-weight try to use numbers, check what numbers are supported for your font when download it.
One thing. that I am very proud of is the styling of the component. Knowing how to rightly position the div elements to get a design similar to the one that was provided.
What challenges did you encounter, and how did you overcome them?One challenge I encountered is knowning the exact colours that were used especially in the background. I overcame it by selecting a color similar to it and manipulating its RGB values to obtain a color very close to it.
What specific areas of your project would you like help with?Areas I would love some help in is knowing how to position the QR code to the centre of the page.
src="/images/image-qr-code.png"
change to src="./images/image-qr-code.png"
body { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; } Try this to align(top-bottom) and justify(left-right) your project to the center. It applies to the parent component(body), don't forget about !!min-height!!. You can use grid instead of flex too.
I had to use a negative margin.
(margin-top: -23rem) on .jeanette-container and .patrick-container
I tried grid-gap and row-gap instead but it did not work. Any ideas on how to reduce the large gap between the grid items and reduce the height of the containers ?
Currently on desktop size all your components are in row 1, row 2 is empty. Please consider to review row positions.
