I had to put aside front-end for now. Got a job (in finance). There are no front-end jobs in my area that I can apply for...
I’m currently learning...self-studying: HTML, CSS, JS, React, TypeScript, Next, Tailwind CSS, started learning Node.js
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
