Sakthivel Ramesh
@sakthivel155All comments
- @Steven-AngSubmitted 2 months ago@sakthivel155Posted 2 months ago
Hi @Steven-Ang,
I suggest optimizing your code by using the
classList.toggle()
method instead of individuallyadding or removing
classes. This approach simplifies the code and enhances readability.0 - @DevEmmy001Submitted 4 months ago@sakthivel155Posted 3 months ago
Hi @DevEmmy001,
- Avoid Using IDs for Styling: Replace IDs with classes for more reusable and maintainable code.
- Place Media Queries at the Bottom: Move the media queries to the end of your CSS file for better organization and to ensure styles are applied correctly.
- Meaningful Class Names: Ensure your class names clearly describe their purpose, making your code easier to read and maintain.
- Avoid Element Selectors: Refrain from styling elements like
*
directly, as it can lead to unintended consequences. Use classes instead. - Structure the
:root
Pseudo-Class Properly: Move the:root
selector to the top of your CSS to define your CSS variables clearly. - Remove Unused Fonts: Clean up your CSS by eliminating any unused font styles to reduce unnecessary code.
- Add Essential Properties to
body
: Include vital properties (likemargin
,padding
, andbackground-color
) in thebody
selector and avoid applying media queries directly to it. Instead, target specific classes or elements within your layout.
Marked as helpful0 - @J-JawadSubmitted 3 months ago@sakthivel155Posted 3 months ago
Hello @J-Jawad,
Great job on the code! A couple of suggestions:
-
Avoid using global styles like
display: flex; align-items: center; justify-content: center; flex-direction: column;
on thebody
tag—it can cause issues later on. Consider applying these styles to a more specific container. -
Class names should reflect their purpose, not content. Instead of using names like
karma-card or team-builder
, opt for something more descriptive of their function, likecard-container or layout-flex
. Also, if you don't style these classes in CSS, it's better not to include them.
Hope this helps!
Thank you.
0 -
- @alekseibodeevSubmitted 3 months ago@sakthivel155Posted 3 months ago
hello brother! your code is excellent keep up and move to next level to separate css file
- important css rule don't use body as parent and use this { display: grid; place-content: center; }
- there should contain this don't use grid in body it problem later period . body { font-family, font-size, background-color, color, line-height, text-align }
- line no : 42 in html file the img tag doesn't have (alt="") value . check it out if need give some value for alt or clean that (alt = "")
0 - @thaArcadeGuySubmitted 3 months agoWhat are you most proud of, and what would you do differently next time?
I am proud of learning how to make a
What challenges did you encounter, and how did you overcome them?div
element ignore the padding of its parent when the screen is resized to a smaller screen using CSS media queries. What I would do differently is making sure at least I can style CSS the right way without having to be mechanical.I struggled with resizing the image to behave like in the mobile design but I was able figure it out after doing some web searching.
What specific areas of your project would you like help with?I want to understand more about Media Queries, then BEM; I would like to know if my code follows the BEM guidelines
@sakthivel155Posted 3 months agohello brother !
- The Html code very clean easy to read but i saw one unwanted mistake ":</strong> " in your html code line no: 52
- and the subheading line no:49 <li><span>heading</span>text</li> don't need span style separate style like this{color: hsl(30, 10%, 34%); font-weight: bold; } simply use <li><b>heading</b>text</li> just change it's bold and also color was change no need css
Marked as helpful0 - @asterisktotleSubmitted 9 months ago@sakthivel155Posted 3 months ago
Responsive is not good for laptop don't give % value on width because when the screen is large it response for that screen
- i give one idea first do mobile-first design then use flex to center a div give fixed width and height : auto (or) max-content ;
- it's automatically align for 1440 px screen no need to use @media here : )
Thinkyou, frnd I thing I give my best !
0 - @ziedlahbibSubmitted 3 months ago@sakthivel155Posted 3 months ago
hai bro! you do great job but do it again slit the part step-by-step .
- the title of the blog card it overflow so first go from mobile first design it make more easy
- box-shadow : (x-axis) (y-axis); = box-shadow: 16px 16px ;
- outline : 1px solid black; make good layout when develop then use this tool pesticide web store on browser it's show the layouts
0 - @olodocoderSubmitted 3 months ago@sakthivel155Posted 3 months ago
1)let use <main> tag after body 2)let style directly to img tag not parent element .qr-code-img { display: block; // img default inline so we change that into block it take entire hight width: 100%; border-radius: 10px; }
- may be img not look good then use {object-fit:cover; }
don't over do this: .qr-code { background-color: #2c7dfa; //don't do padding: 20px; //don't do border-radius: 15px; //overwrites } .qr-code img { width: 100%; border-radius: 10px; //overwrites }
Tip : keep follow the layout use Pesticide webstore tool to view layout with outline
Marked as helpful0