P
@Oleksandr5768965
Latest solutions
flex, media query, object-fit, text-decoration, overflow.
#accessibilitySubmitted 5 months agoany improvements are welcomed :)
flex, ol, ul, table, li::marker, last-child.
#accessibilitySubmitted 5 months agoNothing for the moment, but any suggestions or improvements would be great to learn from.
Media Query , semantic HTML, animations (transition, transform), flex.
Submitted 6 months agoI'd like to explore using CSS Grid for more complex layouts, especially for creating responsive and dynamic grid systems. Adding more interactive elements with animations or transitions could enhance user engagement and visual appeal.
Latest comments
- @RidaniFZ
Very good use of CSS Grid: You use grid layouts smartly for different breakpoints (desktop, tablet, mobile). Good understanding!
- @ashrafitachiWhat specific areas of your project would you like help with?
- Responsive CSS
- Responsive units
- Any feedback
@RidaniFZHello you design is great! but The position: relative used to move the .supervisor and .calculator sections is not the cleanest method. A better alternative would be to rely on grid-row and align-self for more precise alignment.
- @harsh-mohan-99What are you most proud of, and what would you do differently next time?
I am proud of that i have managed to fit image in a button although its not a big task but before implementing this i thought its a big thing😂 but now i did it.And also proud that i have completed this project as it is shown in the image.And this time i improved as responsiveness in this project.
What challenges did you encounter, and how did you overcome them?I faced a challenge in adjusting the image in button. But after doing some research, trial and errors i improved my understand towards it. And finally i did it.
What specific areas of your project would you like help with?I need some good understanding of how to implement images in HTML also how to optimize them using different methods in different situations.
@RidaniFZCenter the Card Properly instead of using margin: 130px auto, use display: flex in body for a better vertical alignment. Fix: body { display: flex; justify-content: center; align-items: center; height: 100vh; /* Full viewport height */ overflow: hidden; }
- @adeisbrightWhat are you most proud of, and what would you do differently next time?
For this project, I am proud about how I was able to attempt the problem by logically splitting each key design step into smaller tasks.
I had zero to no battles with myself meaning I am beginning to freely enjoy building user interfaces. Also, I was able to stick to mobile first approach from start till the end. The result I got was good (although, I await feedback)
What challenges did you encounter, and how did you overcome them?My main challenge which is still unsolved is on how to properly style the instructions numbering without distorting the design.
I left the listing as an unordered list.
I still have challenge with that part of the design
What specific areas of your project would you like help with?- Styling the Instruction List
- Alternatives to styling the nutrition table
@RidaniFZYour HTML and CSS are well-structured, but I have some suggestions for improvements and corrections: 1- Fix Metadata in <head>
- Issue: The favicon is linked using a <link rel="stylesheet">, which is incorrect.
- Fix: Use <link rel="icon"> instead:html
2- to answer to your questions: Styling the Instruction List: use <ol> element and li::marker for styling (check my code). Alternatives to styling the nutrition table: Instead of <div>s, use a <table> for the nutrition facts (check my code).
- @vlademperorrWhat are you most proud of, and what would you do differently next time?
I need to learn more, many ideas I couldn't implement.
What challenges did you encounter, and how did you overcome them?adjusting the elements at the center of the page
What specific areas of your project would you like help with?Active stat for the links
@RidaniFZYour code is well-structured and follows good practices for styling and responsiveness. However, there are some areas of improvement and feedback to make it more optimized: Issues:
- <body> tag is inside <head> (should be closed properly).
- The <address> tag is meant for contact info, not locations.
- The <q> tag is for inline quotes, but your tagline is a standalone sentence.
- <link rel="preconnect" href="/assets/fonts/Inter-VariableFont_slnt,wght.ttf" crossorigin> is incorrect (it's not a Google-hosted font).
- @thejas2246What are you most proud of, and what would you do differently next time?
MM,It just feels awesome completing something
What challenges did you encounter, and how did you overcome them?Did not encounter any problems
What specific areas of your project would you like help with?nothing
@RidaniFZthe design looks great !
