@ayudh07
P
SrkiMax
@SrkiMaxAll comments
- P@SrkiMax
Hey, this looks pretty good, you should do more challenges. Happy coding!
- @zeeguWhat are you most proud of, and what would you do differently next time?
❤Things I've tried
- Created Single Page Application (SPA) with Vue
- Product Details Page with Data Binding
- Shopping cart: Created a function that only adds quantity when overlapping items are contained
- Used Boostrap to design layout and implement functionality
- Scored 92% on mobile, 80% on desktop Google PageSpeed Insights
- Considered web accessibility
- Responsive for Mobile, Tablet, Desktop devices
💪Things I should improve
- When I click on New Arrival's list of other products, the thumbnail changes slowly in the desktop layout with delays.
- Is it because of the size of the image capacity? Google PageSpeed Insights also said image-related resources indicate a problem.
- But I have no idea how to solve it 😢
Please let me know if there are any areas of improvement! Thanks :D
P@SrkiMaxThis is the best challenge solution I have seen so far on Frontend Mentor. I have a lot to learn from you. I like the way you added more products to the page. The only thing I think you could add is a lightbox that opens once the user clicks on the big image of the product. Keep up the good work. Happy coding!
- @YahyeAhmed0P@SrkiMax
Hi! I am also still learning, and here is my advice. You should try and check how your webpage looks on different screen sizes, and make corrections along the way, if some div goes behind other div, then you should correct your CSS styling for that div.
Happy coding!
- @ChrisRolandP@SrkiMax
This looks really good. I see that you also started coding recently. You're doing great. Happy coding!
- P@AnjelToppoP@SrkiMax
This looks great, and it's almost pixel perfect. I just noticed that you could get much smoother transitions with this accordion by using Bootstrap's accordion component. Try it out, you'll see how simple it is. Happy coding!
- @amir-mirzakhaniWhat are you most proud of, and what would you do differently next time?
.
What challenges did you encounter, and how did you overcome them?.
What specific areas of your project would you like help with?.
P@SrkiMaxThis looks good, you might also find a way to trap focus, and not let the user tab outside of the app while using the Tab button. Otherwise, all looks good. Happy coding!
- P@barriedirkWhat are you most proud of, and what would you do differently next time?
This is a very interesting exercise because you combine the knowledge you learn in the previous steps, like CSS, JSON, DOM manipulation, and JS.
I see that I need to improve the use of BEM for CSS classes
What challenges did you encounter, and how did you overcome them?The DOM manipulation how to add or remove children of a node.
Fortunately, there is plenty of documentation online that explains how to implement it.
What specific areas of your project would you like help with?Any suggestion or advice will be welcome
P@SrkiMaxThis looks great, I am myself learning how to code, and this was a very interesting exercise. You might want to find the way to prevent the purple border to appear on the selected answers after you chose the answer and clicked the submit answer button. Happy coding!
- P@KoxoneP@SrkiMax
This looks good, I like the glowing effect on the copy button, I might try something like that too. Happy coding!
- @ZorbiksWhat challenges did you encounter, and how did you overcome them?
Not repeating myself
P@SrkiMaxThis looks pretty good, keep up the good work. Happy coding
- @evgeniy8509P@SrkiMax
This really looks great. I wanted to check your code, but I get an error 404 when I click on the code. But this is really awesome
- @Usama-Hashmi-96P@SrkiMax
This looks ok. You might want to center the card vertically and horizontally. Try using flexbox, and set the margins left and right to "auto". Also, there should be a different image showing on the card on smaller screens. You can make that work using the picture tag. Here is a great clip I found that really helped me a lot. https://www.youtube.com/watch?v=nHB-3WJTfSg
Happy coding!
- @Usama-Hashmi-96What are you most proud of, and what would you do differently next time?
I'm proud of using JavaScript and making it interactive for user and next time I will make is more user-friendly
What challenges did you encounter, and how did you overcome them?in this solution making it interactive with JavaScript and making it responsive is quite challenging.
What specific areas of your project would you like help with?in this project I learned how to use and add event listener to elements
P@SrkiMaxThis look really good. You might just look for a way to keep the article centered on smaller screen sizes using flexbox. Other than that, it is pretty good. Happy coding!
- @tjnut3What are you most proud of, and what would you do differently next time?
Perfect layout with responsive. fully use bootstrap.
What challenges did you encounter, and how did you overcome them?It's al about
- Number section : I don't know how to create it at first. but i got help by chatgpt so i can solve it in an hour (That's long)
- First section it's about picture that over width i use like 1 day to solve it.
How about my bootstrap using. i want to know want is more benefit with it. thanks
P@SrkiMaxThis looks pretty good. I like the way you used Bootstrap grid to make the elements responsive. This way you have less lines of code, and I would say your code looks much simpler. I learned something from you, and I will try to use more Bootstrap in my future projects.
- @ardolynk-rebornWhat are you most proud of, and what would you do differently next time?
Here we'd better use a grid with fixed percentage per row / column. Also for this solution I finally used SASS preprocessor.
What challenges did you encounter, and how did you overcome them?@mixin desktop @media (min-width: 48em) @content main padding: 48px 0 48px 0 max-width: 70em @include desktop display: grid grid-template-columns: repeat(4, 25%) grid-template-rows: repeat(2, 50%)Another complexity connected with a background of the first card. Here I defined
What specific areas of your project would you like help with?background: url(./images/bg-pattern-quotation.svg) no-repeat 90% 0 hsl(263, 55%, 52%).Are there any good SASS plugins for VS Code? I use Sass (.sass only) by Syler and there are no reasonable autocompletion. Thanks in advance.
P@SrkiMaxThis looks good. The only thing I would add is centering the main vertically, either using flexbox, or margins
Marked as helpful - @alexpeteronojaWhat are you most proud of, and what would you do differently next time?
Learning More about Grid and Flexbox
What challenges did you encounter, and how did you overcome them?Arraiging the Grid
What specific areas of your project would you like help with?Please Review the code and let me know and I can improve
P@SrkiMaxHi Alexpeteronoja,
You can check these two interactive guides to learn CSS Flexbox and CSS Grid. They really helped me a lot:
CSS Flexbox https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/
CSS Grid https://www.joshwcomeau.com/css/interactive-guide-to-grid/
- @AbdalrahmanEmaraWhat are you most proud of, and what would you do differently next time?
I proud that i could do the shape of product view is close same what the task need. I used flexbox, but I see that I can't make it very well. I can guess that there are more solutions and methods to style. Even I want get feedback if there is a good method to using flexbox in different way. And if there is other method like using grid system i hope you to tell me. I learned using more picture and hide some of them.
What challenges did you encounter, and how did you overcome them?In mobile version, I want to style the image in top, but I take some time to see what the width is good for that to show the picture and the details under it. I will talk in trust, I try to change the width and height to get the good view.
What specific areas of your project would you like help with?font family, I try to use font family that is included in style-guide, but I observe that isn't like in the task.
And customize the picture and the text if i use flex in good way and i strictly select width and height for the component.
P@SrkiMaxHi Abdelrahman,
You can try using Bootstrap, it will save you a lot of time of writing code. They have a good grid system and responsive div containers so it gets easier than using Flexbox. Also, do not use both width and height dimensions, as you will end up with the text and components going out of borders of the parent elements when downsizing to smaller sized screens. Set only width, without setting height. Happy coding!
Marked as helpful - @C-machadopP@SrkiMax
Looks good, keep up the good work
- @alexabaloWhat are you most proud of, and what would you do differently next time?
.
What challenges did you encounter, and how did you overcome them?.
What specific areas of your project would you like help with?.
P@SrkiMaxHey Alex,
I am also starting with frontend development myself, and in this challenge I also had a problem finding the way to position attribution div under the social links card, close to the bottom of the page. I used something like this:
.attribution { position: absolute; top: 90%; left: 50%; transform: translateX(-50%); }
Try and see if it works for you too
