@introdevs-studentSubmitted 12 months ago
The given design of this project and the design to be compared do not match. Even the texts are different.
Oswald
@OswalldAll comments
- @KSnape34Submitted 25 days agoWhat are you most proud of, and what would you do differently next time?
I am very proud of my first encounter using React and Tailwind CSS. While I am proud with how the solution turned out, I think I would do more research on toggle navbar in Tailwind as the transition that happens with the open/close navbar is a bit off.
@OswalldPosted 14 days agoHey, it’s a bit unfortunate that your integration isn’t pixel-perfect, but for a first experience with Tailwind and React, it’s great! I’ll also be making the leap to React soon :)
P.S. Try revisiting this project later when you’re more comfortable with Tailwind—it’s a really great design to practice more complex layouts.
0 - @Hackerbot24Submitted 4 months agoWhat are you most proud of, and what would you do differently next time?
completing this task
What challenges did you encounter, and how did you overcome them?many i still need to do some changes
What specific areas of your project would you like help with?all areas especially the hero bg implementation
- @skyleranglhSubmitted 16 days ago
- @not-ludwigSubmitted 16 days agoWhat specific areas of your project would you like help with?
for some reason the screenshot has a white space at the bottom, I don't know why. I don't see it in any of my devices.
@OswalldPosted 16 days agoHi! For your screenshot, it’s probably because your overall spacing is smaller than in the reference design, which is why there’s a white space at the bottom (the same thing happened to me back in the day, I think).
In any case, great job—the responsive design is spot-on!
1 - @hikawiSubmitted 2 months agoWhat are you most proud of, and what would you do differently next time?
I'm most proud of somehow making the slider's styles correctly. This looked simple at first but seeing how convoluted the support for range inputs is was so frustrating.
What challenges did you encounter, and how did you overcome them?A lot of trouble styling the slider correctly on Safari and Chrome since the webkit is missing one pseudo class to style the left side of the slider, so I used a linear gradient with strict color stops instead.
@OswalldPosted 16 days agoHi! Great work, you weren’t lazy like me and really put effort into designing the checkboxes.
Just a small improvement: make sure that at least one character of each selected type is included (when the requested password length allows for it).
Keep it up! (I’ll be moving to React like you soon :) )
Marked as helpful1 - @Benja307Submitted about 1 year ago@OswalldPosted 17 days ago
Hi! It’s not working. The interactions on the percentage button look good, but the calculation isn’t happening, and the error messages aren’t showing up :(
0 - @vgt3j4d4Submitted about 1 month agoWhat are you most proud of, and what would you do differently next time?
I believe this is the first challenge that I use Tailwind.
What challenges did you encounter, and how did you overcome them?None.
What specific areas of your project would you like help with?Probably suggestions on how to improve performance.
- @kadiryildiriSubmitted 2 months ago@OswalldPosted 24 days ago
Hey, great work !
but the UI could be better, using tailwind you should start mobile first and as i see, you just have to add a "w-full" to your img and it will be perfect.
0 - @hikawiSubmitted 2 months agoWhat are you most proud of, and what would you do differently next time?
I'm most proud of the share view popup when clicking the share button, I'd want to use animations for pop-ups and slide-ups next time.
What challenges did you encounter, and how did you overcome them?Had some trouble styling the text at first to fit the correct height, I didn't know how to check the image dimensions provided in Figma. Had a LOT of trouble trying to make the share popup reusable for both use cases mobile and desktop, don't know how to make them reusable as in the mobile version, its placement is based on the entire text content div, but in the desktop version, its placement is based on the share button's position. So I put two copies of the same component, one in the share button and one in the text content and toggle if correct screen size.
What specific areas of your project would you like help with?Probably about the share popup view, I'm interested what's the conventional way of implementing it. Also how would you position the image? I used a lot of fixed pixel positioning to get it to display, and didn't really flow accordingly to flexbox or something.
@OswalldPosted 25 days agoHey, perfect and you could be perfect++ by just addind the class "rounded-br-lg" and "rounded-bl-lg" to the share panel on mobile size :)
Marked as helpful1 - @SantiNakcSubmitted almost 2 years ago
It was an easy layout, but it was my first carrousel. I improvised using JavaScript and Css Clases.
@OswalldPosted almost 2 years agoHey !
Here some things to make your code better :
1.Your responsive is not good beyond 1440px, on my screen ( 21:9 ) it is not scaling well ( the skill section, the header top, the contact section and the footer ), you can center them by using
margin: 0 auto;andmax-width:1440px.2.Try using sass/scss to make it more structured.
For your slider I wanted to do like you ( I also start in javascript ) but I found this way to be too messy, so I used a js library ( swiper).
Continue as your code is clean ! ( I think it is )
0
