@Aishi-Jain
@tagutirayane
Submitted
What are you most proud of, and what would you do differently next time?
Things are getting easier!
What challenges did you encounter, and how did you overcome them?
I don't have a lot of practice with CSS Grid, so it was nice to try it.
What specific areas of your project would you like help with?
I would like to check if the semantics I'm using is aligned with the market.
@Aishi-Jain
Posted
Hey!! Your CSS Code is really well written!! And good job on the grid properties. For your HTML, I would suggest you use more HTML Semantic tags like section and article instead of only relying on divs.
Great Job :)
Marked as helpful
@AvinashKumarMahato
Submitted
What are you most proud of, and what would you do differently next time?
I am particularly proud of the clean and responsive design I achieved. The social links profile looks great on both desktop and mobile devices, and the hover and focus states enhance the user experience. I also successfully implemented custom CSS properties, which made the styling more maintainable and scalable. If I were to tackle this project again, I would consider incorporating a JavaScript framework like React to manage the UI components more efficiently. Additionally, I would explore more advanced CSS techniques, such as CSS animations and transitions, to add subtle interactive effects. Finally, I would conduct more thorough testing across different browsers and devices to ensure complete compatibility and a consistent user experience.
What challenges did you encounter, and how did you overcome them?
One of the main challenges I encountered was ensuring the responsive design worked seamlessly across various devices and screen sizes. To overcome this, I used a mobile-first approach, employing CSS media queries to adjust the layout and styling for larger screens. Additionally, I utilized flexbox and CSS grid to create flexible and adaptive layouts.
Another challenge was maintaining consistent styling for hover and focus states across different browsers. I resolved this by thoroughly testing the site in multiple browsers and using CSS custom properties to ensure uniform styles. Debugging issues with browser compatibility also required researching specific quirks and applying targeted fixes.
Finally, optimizing the CSS for maintainability and scalability was crucial. I addressed this by organizing my CSS with meaningful class names and employing custom properties for color and spacing, which streamlined the styling process and made future updates easier.
What specific areas of your project would you like help with?
Specific Areas I Would Like Help With:
Advanced CSS Techniques:
JavaScript Integration:
Accessibility Improvements:
Performance Optimization:
Browser Compatibility:
Code Review and Refactoring:
@Aishi-Jain
Posted
Hello! I'm absolutely in love with the way you have written your code. It's clean and user friendly!! I also like that you added slight transitions to make your button look alive.
In CSS, I would suggest you use the var() function to insert your CSS variables instead of typing out the values. var() function is really helpful when you're making a website and it has a specific theme that you want to stick to. It also makes accessing and reading easier for yourself and for others as well!
Good Job :)
Marked as helpful
@newbscantdev
Submitted
What are you most proud of, and what would you do differently next time?
I'm proud about using translate & transition property. because it made elements looks more lively
Also, I just known about using CSS Selector in another CSS Selector because it maybe opens up my creativity but it seems to have some issues. Maybe there is more ways to do stuff like that
What challenges did you encounter, and how did you overcome them?
Aligning elements vertically is somehow difficult than horizontally because i tried to use align-items: center but its not working for me so i'm searching for any methods and i found out that i need another container element to wraps up the card itself and its now works perfectly fine
About the label name "Learning" (which i called info-status in this project) it stretches out by parent element which i set the property as display: flex and it uses all the width of the element and i asking people if there any solutions there and i got some tips from @gracesnow that i can use display: inline-block for a single child element in Flexbox and its worked
What specific areas of your project would you like help with?
I don't know if is there any better way to do this or more accurate than this. I want to know if there any best practices or more tips & tricks about this
@Aishi-Jain
Posted
Hello! I love the way you used the transitions to make the card look more lively! It definitely enhances the look of the preview card :) Although I would suggest your CSS code could be a lot more cleaner if you eliminated all the unnecessary line gaps in between sections. For eg, You could write it like this: .card-container { background-color: hsl(0, 0%, 100%); border: 2px solid hsl(0, 0%, 7%); border-radius: 12px; display: flex; flex-direction: column; width: 300px; padding: 20px; transition: box-shadow 0.12s, translate 0.12s; } The reason for this is it would be easier for anyone to read your code. The unnecessary gaps makes it look unclean. Also make sure you leave a line after every section, like this:
p, h1 {
font-family: "Figtree", sans-serif;
margin: 0;
}
a {
text-decoration: none;
color: black;
}
It separates every section and it will easier for you as well when you have to recheck the code.
Once again, great job!!
Marked as helpful