Skip to content
OverviewSolutions
8
Comments
7
Sakthivel Ramesh
@sakthivel155

All comments

  • Sakthivel Ramesh•150
    @sakthivel155Posted 3 months ago

    Hi @Steven-Ang,

    I suggest optimizing your code by using the classList.toggle() method instead of individually adding or removing classes. This approach simplifies the code and enhances readability.

    0
  • Sakthivel Ramesh•150
    @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 (like margin, padding, and background-color) in the body selector and avoid applying media queries directly to it. Instead, target specific classes or elements within your layout.
    Marked as helpful
    0
  • Sakthivel Ramesh•150
    @sakthivel155Posted 3 months ago

    Hello @J-Jawad,

    Great job on the code! A couple of suggestions:

    1. Avoid using global styles like display: flex; align-items: center; justify-content: center; flex-direction: column; on the body tag—it can cause issues later on. Consider applying these styles to a more specific container.

    2. 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, like card-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
  • thaArcadeGuy•120
    @thaArcadeGuySubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    I am proud of learning how to make a 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.

    What challenges did you encounter, and how did you overcome them?

    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

    Responsive Recipe Page

    1
    Sakthivel Ramesh•150
    @sakthivel155Posted 3 months ago

    hello 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 helpful
    0
  • Sakthivel Ramesh•150
    @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
  • Sakthivel Ramesh•150
    @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
  • Sakthivel Ramesh•150
    @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 helpful
    0