@aysenurtatliSubmitted about 10 hours ago
Yacoub AlDweik
@YacoubDweikAll comments
- @YacoubDweikPosted about 8 hours ago
Hey!
Good job it was so smooth and responsive design well done!
can I say one thing? oh yeah thank you!
For any image in your life don't give it height & width, always try to give width only and make it responsive, why? Can you resize the window and notice what's happening to your image from 750px to 600px? can you?
It's shrinking while almost the aspect ratio of it is getting corrupted, cuz u told her always stay 300px ok!
There's no need for that height try to take it and see what's gonna happen.
Also for the future, in Images always set max-width: 100% and not width.
Good luck and keep it up Istanbul girl!
Marked as helpful0 - @dearestalexanderSubmitted about 8 hours agoWhat are you most proud of, and what would you do differently next time?
Note there is a link in the attribution at the bottom to switch between the yamanote design and the testimonial design.
Thanks to the really good grid training materials I didn't have too many problems with this exercise. In addition to grid for the macro layout I found grid useful to align the small headshot images with the name and role text.
In general I find grid is a little more predictable than flex for quick use and is more concise from a CSS point of view. So I can imagine I will use it more.
For my alternate design I had a bit of fun making the background image in figma. Starting to think about background images was a nice process from a design standpoint for me and I think there's a lot of fun to be had here, although I appreciate they are just decorative and not very functional.
What challenges did you encounter, and how did you overcome them?Nothing major, I learnt during this exercise you can't easily change opacity of background images so you need to either adjust your .svg or use some tricks.
What specific areas of your project would you like help with?Nothing in particular, but always open to feedback on my design or anything you think in my CSS is not optimal.
@YacoubDweikPosted about 8 hours agoHey!
Good job man just one small thing:
Don't give body { width: 100vw } instead it has a default value of 100%.
I was resizing the window using the dev tools in Chrome and I kept getting a horizontal scroll bar, like in all cases there's no need for it the body will take 100% of the screen in all cases.
Keep it up, I really liked the idea of having 2 designs!
0 - @Djamel1133Submitted about 17 hours agoWhat are you most proud of, and what would you do differently next time?
not proud, but happy to keep practicing and dealing with different difficulties, both in terms of programming and design.
What challenges did you encounter, and how did you overcome them?Dealing with different elements (progress bar, toggle button) to udpate data but there are solid js documentation.
What specific areas of your project would you like help with?How can I handle window resizing and get the correct position of the progress indicator? Any help you can offer would be greatly appreciated.
@YacoubDweikPosted about 17 hours agoHey! Good job buddy!
When you resize the window you should call that function to calculate and build the correct layout, something like this:
// Function to handle window resize function handleResize() { // Add your code here to execute when the window is resized console.log('Window resized!'); } // Event listener for window resize window.addEventListener('resize', handleResize);Keep it up!
Marked as helpful1 - @Grimm-NSubmitted 3 days agoWhat are you most proud of, and what would you do differently next time?
Well, I'm not sure if I can brag about this 😅, but I'm definitely trying to make my work interactive and dynamic! 😎 You tell me, did I nail it? Or should I try harder?
What challenges did you encounter, and how did you overcome them?The biggest challenge was working with Tailwind for the first time. It felt like jumping from heaven to hell 😅. So unfamiliar, but in the end, I made something work. Guess what? It’s only going to get easier from here! 💪
What specific areas of your project would you like help with?Unfortunately, I only noticed the background under the sections with the curved edges at the very end 😅. Maybe someone can share a simple and elegant way to use the provided images for this?
@YacoubDweikPosted 2 days agoYooo! Good job Ma'am!
The website is a bit slow especially at the footer and this is not surprising bcuz of that animation ofc,
Keep it up Ma'aaam and congrats for changing your nickname, as always ghosts and stuff hehe keep it up
0 - @Djamel1133Submitted 7 days agoWhat are you most proud of, and what would you do differently next time?
Not proud, but I'm happy to have finished this challenge (not hard) quickly and to have gotten hands-on experience with my first API using js.
What challenges did you encounter, and how did you overcome them?I didn't want to use Flexbox (nor reset), but I think (though I'm not sure) it was necessary to center the divider.
What specific areas of your project would you like help with?I am open to any comments.
@YacoubDweikPosted 3 days agoBro always always always whenever you are whatever you are and whoever you are, whatever you are coding if it's CSS or C++ always always always write this:
img { max-width: 100% }Otherwise you will see your design gets overflowed horizontally under 360px as you can see ;)
Let's go!
Marked as helpful1 - @Djamel1133Submitted 7 days agoWhat are you most proud of, and what would you do differently next time?
Not proud but beginning to code with JavaScript. I handle one event for both buttons (previous and next) using a custom data attribute (data-direction) to store additional information about an element (in this case, the tag). I know I don't need it for this challenge, but it will be helpful if I have more than two authors.
What challenges did you encounter, and how did you overcome them?Mobile-first doesn't always work. In this case, I spent a lot of time trying to implement this approach, but ultimately, I ended up creating two styles and organizing my code accordingly using SASS
What specific areas of your project would you like help with?I’m always open to any advice and comments...thank you all 😋
@YacoubDweikPosted 3 days agoHey Bro!
Good job man just please please please get rid of that footer I hate seeing it hahaha.
About Mobile-First Approach I don't know what you have faced but take this as a general rule, if the design is simple on Mobiles and then get more and more complicated as the screen gets wider then use Mobile-First, otherwise no start with Desktop-First, you simply start with the simple design then you go from there.
Keep it up my man!
Marked as helpful1 - @Shirin-Mohebi-9943463Submitted 3 days ago@YacoubDweikPosted 3 days ago
Hey!
Good job I like that!
Use max-width: 25ren instead of width: 25rem, to make the design responsive.
Keep it up!
Marked as helpful1 - @LauwedSubmitted 3 days ago@YacoubDweikPosted 3 days ago
Hey!
Good job that was amazing, I was happy while seeing how clean your code is and how you take care of accessibility, well done!
I just have one question, did we really need to change the font size for the screens wider than 1440px? I mean I am using the common laptop screen and I got really annoying vertical scroll bar that comes and goes when I click on each question and that was pretty annoying tbh.
Keep it up!
1 - @RemondaMalak5Submitted 8 days ago@YacoubDweikPosted 8 days ago
Hey!
Good job first everything is awesome, except one thing which is the responsivity, and tbh this is due to using Bootstrap in a wrong way.
Look I'd highly recommend you using pure CSS for now and try to be better at it, you can check out my solution for this design to see it should be very smooth and responsive.
Good luck, keep it up we all have gone through this process :)
Marked as helpful1 - @marta13kartaSubmitted 10 days ago@YacoubDweikPosted 10 days ago
Good job Marta!
Only give the img-container a max-width instead of fix width.
1 - @mohammad-hasan-devSubmitted 10 days ago@YacoubDweikPosted 10 days ago
Salam Mohammad mashAllah Well done bro!
I really liked your Portfolio as well, looks awesome!
Here, I just want to say that never ever put an img alone like this bro, always wrap it inside a parent div that's exclusive for it only.
You might ask me why right? I wanna show you, right click on your design then inspect, try to resize the design to its maximum, you will see that the whole design will shrink and grow while you resizing except that img first cuz u gave it width and not max-width, second if u gave it max-width it will tend to stay fixed under 250px or so, why? cuz simple the original size of the img is not smaller than 250px to shrink to that size.
By wrapping it with a parent div the img and give the img only max-width: 100% then it will shrink and grow according to its parent.
Also I'd recommend you looking at BEM for CSS Classes, Good luck Bro!
Marked as helpful1 - @MariekafSubmitted 11 days ago@YacoubDweikPosted 11 days ago
Hey!
Good job it's almost perfect for Desktops, although it is not responsive at all, Have you learned how to make any design responsive or not yet? Do you know how to make the design look good on Mobiles? are you willing to learn that? if yes then send a message with "Yes" to the number zero zero five five zero zero Whaaaat!! r u still reading lol!
1
