@skyleranglhSubmitted about 1 month ago
ShivamRajput57
@ShivamRajput57All comments
- @simplyObareSubmitted about 2 months ago@ShivamRajput57Posted about 2 months ago
color not matched exactly this same issue comes when i solved the project
0 - @Mubarak-AdeyemiSubmitted about 2 months agoWhat are you most proud of, and what would you do differently next time?
I'm most proud of creating a responsive, accessible Tip Calculator app that provides a smooth user experience across devices. The use of semantic HTML and ARIA roles ensures that the app is accessible to a broader audience. If I were to do it differently next time, I would explore using a JavaScript framework like React to make the app more scalable and modular.
What challenges did you encounter, and how did you overcome them?One challenge was managing the layout transitions between mobile and desktop views while maintaining accessibility standards. Ensuring the layout was both visually appealing and functional required tweaking the CSS and using media queries. I overcame this by following a mobile-first design approach and utilizing CSS Grid and Flexbox effectively to adapt to different screen sizes.
@ShivamRajput57Posted about 2 months agoi think you box have high width as compared to the height of the box
0 - @Shakil-aSubmitted 4 months agoWhat are you most proud of, and what would you do differently next time?
Most proud:
- Using fetch to get the data from the json file
- creating an algorithm to get the data first before coding
- getting better and more familiar with grid
different next time:
- I will have a look at other solutions to this challenge to look at how i can optimise the code
challenge 1 and solution:
figuring how to grab the data and display it, i first created an algorithm step by step to see what needs to be done and then started coding the solution
What specific areas of your project would you like help with?I would like help on:
-
how to make it more responsive from lower sizes to larger screen sizes whilst being smooth, would it be like one column, then two and then the four on the full desktop version
-
possibly a better method to have used for the javascript
@ShivamRajput57Posted 3 months agoi thinks you set the opacity in the user heading section also
0 - @rosemutaiSubmitted 3 months ago@ShivamRajput57Posted 3 months ago
i think your parent div is not centered correctly
Marked as helpful0 - @hmac100Submitted 3 months agoWhat are you most proud of, and what would you do differently next time?
It's far from perfect, but was proud to get most of it by researching and for the most part, getting it done . Really enjoyed the design difference between the mob and larger screens social pop-ups. Not sure how I'd do it differently next time - as I don't have the knowledge to assess.
What challenges did you encounter, and how did you overcome them?As mentioned - it's far from perfect. The svgs spooked me a bit - not sure If they were implemented properly - the image and padding was for me a headache - am still not 100% happy with how that worked out with responsiveness on the larger screens. Also I haven't really understood the positioning for the pop-up for largers screen sizes - it's doesn't behave in responsive way.
What specific areas of your project would you like help with?In terms of the responsiveness I'd like to develop a less ramshackle approach for margins - paddings and the proper way to position the hidden social pop-ups for screen sizes -plus the right way to use svgs and svgs for as active icons. I'm seeing this as a first draft - am definitely going onto discord to get more advice.
- @Elmedin1232Submitted 5 months ago
- @abigbroomstickSubmitted 4 months agoWhat are you most proud of, and what would you do differently next time?
I'm proud of learning some new tools such as BEM, visual hidden (aka sr-only) and pseudo-class is() to make my code cleaner. I tried the mobile-first approach this time and maybe next time I'll come back to using desktop-first workflow.
What challenges did you encounter, and how did you overcome them?I'm not used to using variables yet but I'm slowly getting there. The hardest part was writing the price tag so it will be screen reader friendly. I learned how to do that using visually-hidden property that would show the original price and current price without interfering with the general design.
What specific areas of your project would you like help with?I could use some feedback on the styling and spacing!
- @Ashutosh-NeupaneSubmitted 4 months agoWhat are you most proud of, and what would you do differently next time?
I'm most proud of the effective use of CSS Flexbox to achieve a clean and responsive tag layout, ensuring consistent styling through CSS variables.
Next time, I would focus on:
Enhancing Accessibility: Ensuring all interactive elements are easily accessible and readable for users with disabilities. Performance Optimization: Minimizing CSS and using more efficient selectors to improve load times and rendering performance.
What challenges did you encounter, and how did you overcome them?Challenges:
-
Alignment Issues: Ensuring that tags are consistently positioned at the top of various container sizes.
- Solution: Used
flexboxwithalign-items: flex-startto align items to the top.
- Solution: Used
-
Consistency Across Devices: Maintaining the same visual appearance across different screen sizes and devices.
- Solution:Implemented responsive design adjustments with media queries and used CSS variables for consistent styling.
-
Accessibility Concerns: Ensuring sufficient contrast and readability of tags for all users.
- Solution: Checked color contrasts and adjusted padding to improve readability and usability.
These solutions ensured a responsive, visually consistent, and accessible tag layout.
What specific areas of your project would you like help with?Advanced CSS Techniques: Implementing more complex layouts, animations, or transitions.
-
- @Ankit04042001Submitted 4 months ago@ShivamRajput57Posted 4 months ago
i think your solution is little bit more zoom in
0 - @HeberRiosSubmitted 4 months agoWhat are you most proud of, and what would you do differently next time?
I'm proud that I learned a lot doing this.
What challenges did you encounter, and how did you overcome them?Use the rem unit for the sizes of the project and fluid typography.
I achieved this by following a best practice for responsive design and the use of clamp for the fluid typography.
What specific areas of your project would you like help with?Any feedback is welcome
@ShivamRajput57Posted 4 months agoi this solution includes some basic concepts of html and css like- div, p h, section ,flex box,etc.
here we use the media query of min width to tackle the challenge of the range of screen size the html code is well structured but the css file code is not is well structure.
my solution in a little bit different from the design my solution is bigger or it is zoomer
0 - @bobyanovSubmitted 4 months ago
